Skip to content

Commit a1dd221

Browse files
author
Chau Tran
committed
docs: update README
1 parent ebd28fe commit a1dd221

File tree

5 files changed

+8711
-89
lines changed

5 files changed

+8711
-89
lines changed

Diff for: ‎.all-contributorsrc

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"projectName": "tailwindcss-schematics",
3+
"projectOwner": "nartc",
4+
"repoType": "github",
5+
"repoHost": "https://github.com",
6+
"files": [
7+
"README.md"
8+
],
9+
"imageSize": 100,
10+
"commit": true,
11+
"commitConvention": "angular",
12+
"contributors": [],
13+
"contributorsPerLine": 7
14+
}

Diff for: ‎CONTRIBUTING.md

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Contributing
2+
3+
🙏 We would ❤️ for you to contribute to Angular Tailwind CSS Schematics and help make it even better than it is today!
4+
5+
# Developing
6+
7+
Start by installing all dependencies:
8+
9+
```bash
10+
npm i
11+
```
12+
13+
Run the tests:
14+
15+
```bash
16+
npm run test
17+
```
18+
19+
## <a name="rules"></a> Coding Rules
20+
21+
To ensure consistency throughout the source code, keep these rules in mind as you are working:
22+
23+
- All features or bug fixes **must be tested** by one or more specs (unit-tests).
24+
- All public API methods **must be documented**.
25+
26+
## <a name="commit"></a> Commit Message Guidelines
27+
28+
We have very precise rules over how our git commit messages can be formatted. This leads to **more
29+
readable messages** that are easy to follow when looking through the **project history**.
30+
31+
### Commit Message Format
32+
33+
Each commit message consists of a **header**, a **body** and a **footer**. The header has a special
34+
format that includes a **type**, a **scope** and a **subject**:
35+
36+
```
37+
<type>(<scope>): <subject>
38+
<BLANK LINE>
39+
<body>
40+
<BLANK LINE>
41+
<footer>
42+
```
43+
44+
The **header** is mandatory and the **scope** of the header is optional.
45+
46+
Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
47+
to read on GitHub as well as in various git tools.
48+
49+
The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
50+
51+
Samples: (even more [samples](https://github.com/angular/angular/commits/master))
52+
53+
```
54+
docs(changelog): update changelog to beta.5
55+
```
56+
57+
```
58+
fix(release): need to depend on latest rxjs and zone.js
59+
60+
The version in our package.json gets copied to the one we publish, and users need the latest of these.
61+
```

Diff for: ‎README.md

+20-89
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Angular TailwindCSS Schematics
1+
# Angular Tailwind CSS Schematics
22

33
This schematic will add [TailwindCSS](https://tailwindcss.com/) to your [Angular](https://angular.io) application.
44

@@ -8,107 +8,38 @@ This schematic will add [TailwindCSS](https://tailwindcss.com/) to your [Angular
88
ng add @nartc/tailwind-schematics
99
```
1010

11-
## Limitation
11+
## Usage with Nx
1212

13-
- [AngularCLI](https://cli.angular.io)-powered projects only
14-
- No prior **Custom Webpack** configuration setup with [@angular-builders/custom-webpack](https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack)
13+
In Nx, you can either use `nx add` or `ng add` (same as above) to use the schematics.
1514

16-
## Schematic details
15+
```
16+
nx add @nartc/tailwind-schematics
17+
```
1718

18-
### Options
19+
## Options
1920
|name|type|default|description|
2021
|----|----|-------|-----------|
21-
|configDirectory|string|.|The location where the config files (TailwindCSS and Webpack) will be stored|
22-
|tailwindConfigFileName|string|tailwind.config|File name of TailwindCSS Config|
23-
|usePurgeCss|boolean|true|Setup PurgeCSS in Production build|
2422
|cssFlavor|string|css|The CSS flavor the project is using|
2523

26-
#### Note
27-
Please add `./` when you provide a different value for `configDirectory`.
28-
29-
### Dependencies
30-
31-
The schematic will add the following packages to `devDependencies` and install:
32-
- `@angular-builders/custom-webpack`
33-
- `tailwindcss`
34-
- `postcss-import`
35-
- `postcss-loader`
36-
- `@fullhuman/postcss-purgecss` if `usePurgeCss` is `true`
37-
- `postcss-<cssFlavor>`: if `cssFlavor !== 'css'`, then a `postcss-<cssFlavor>` will be added as well
38-
39-
### Configuration Files
40-
41-
#### TailwindCSS Config
42-
43-
The schematic uses `tailwindConfigFileName` to generate a `<tailwindConfigFileName>.js` file as [TailwindCSS Configuration](https://tailwindcss.com/docs/configuration). The default content is as follows:
44-
45-
```js
46-
module.exports = {
47-
prefix: '',
48-
separator: ':',
49-
theme: {}
50-
}
51-
```
52-
53-
#### Webpack Config
54-
55-
Webpack configuration is generated based on `usePurgeCss`
56-
57-
- With `PurgeCSS`
58-
- `webpack-dev.config.js`: Development Webpack configuration file
59-
- `webpack-prod.config.js`: Production Webpack configuration file with `purgecss` setup
60-
- Without `PurgeCSS`
61-
- `webpack.config.js`: A single Webpack configuration file to be used in both Development and Production environment
62-
63-
#### `angular.json`
64-
65-
The schematic will modify `angular.json` file to use `@angular-builders/custom-webpack` instead of the default `@angular-devkit/build-angular` with the proper `customWebpackConfig.path` based on the `configDirectory` and **Webpack Config** above. Before and after are as follows:
66-
67-
```json
68-
{
69-
"architect": {
70-
"build": {
71-
"builder": "@angular-devkit/build-angular:browser"
72-
}
73-
}
74-
}
75-
```
76-
77-
```json
78-
{
79-
"architect": {
80-
"build": {
81-
"builder": "@angular-builders/custom-webpack:browser",
82-
"options": {
83-
"customWebpackConfig": {
84-
"path": "webpack-dev.config.js"
85-
}
86-
}
87-
}
88-
}
89-
}
90-
```
91-
92-
#### `styles.<cssFlavor>`
93-
94-
The schematic will also update the main `styles.<cssFlavor>` to include `@import` from TailwindCSS
95-
96-
```css
97-
@import 'tailwindcss/base';
98-
@import 'tailwindcss/components';
99-
@import 'tailwindcss/utilities';
100-
```
101-
10224
## Acknowledgement
10325

10426
- [Total Guide to Custom Angular Schematics](https://medium.com/@tomastrajan/total-guide-to-custom-angular-schematics-5c50cf90cdb4)
10527
- [ng add Schematic](https://brianflove.com/2018-12-15/ng-add-schematic/)
10628
- [@santosh](https://twitter.com/SantoshYadavDev) for quick and concise answers to my questions
10729

108-
## References
109-
110-
- [Angular Schematics](https://angular.io/guide/schematics)
111-
11230
## Contribution
11331

11432
Any contribution is welcome
33+
34+
## Contributors ✨
35+
36+
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
37+
38+
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
39+
<!-- prettier-ignore-start -->
40+
<!-- markdownlint-disable -->
41+
<!-- markdownlint-restore -->
42+
<!-- prettier-ignore-end -->
43+
<!-- ALL-CONTRIBUTORS-LIST:END -->
44+
45+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

0 commit comments

Comments
 (0)