Angular Tailwind CSS Schematics
A simple standalone angular schematics to add tailwindcss to your angular cli project.
Installation
-
Angular CLI workspace
ng add ngx-tailwindcss-schematic -
Nx workspace
nx add ngx-tailwindcss-schematic- In Nx, you can also use
ng add
- In Nx, you can also use
Schematic additional options
You can pass additional options while installing this schematic.
-
For e.g., Installing a specific version of
tailwindcss
ng add ngx-tailwindcss-schematic --tw 187
Options | Alias | Default | Type | Required | Description |
---|---|---|---|---|---|
project | --p | defaultProject in the workspace |
string | No | The name of the project where we want to add files. |
tailwindcssVersion | --tw | latest | string | No | Specific Tailwind CSS version to be installed. |
Different CSS types(preprocessors) support:
-
On installing, you will prompted to select one of the following CSS types. Select (use Enter key) one depending on your project's default selection.
? Which stylesheet type would you like to use?❯ CSSSCSS [ https://sass-lang.com/documentation/syntax#scss]Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax]Less [ http://lesscss.org]
Tailwind CSS dependencies used
tailwindcsspostcss-postcss-loader@angular-builders/custom-webpackpostcss-
By default, latest
versions are installed for all the required dependencies. You will notice the word latest
in your package.json
file.
As mentioned before you can provide the custom version for tailwindcss
using the additional --tw
flag.
Expected Output
ng add ngx-tailwindcss-schematic --tw 187
? Which stylesheet type would you like to use? SCSS https://sass-lang.com/documentation/syntax#scss] ➡️ Added tailwindcss@187 to devDependencies ➡️ Added postcss- ➡️ Added postcss-loader@latest to devDependencies ➡️ Added @angular-builders/custom-webpack@latest to devDependencies ➡️ Added postcss-scss@latest to devDependenciesCREATE tailwindconfigCREATE webpackconfigUPDATE packageUPDATE src/stylesUPDATE angular✔ Packages installed successfully
Building and Running schematic locally
To test locally, install @angular-devkit/schematics-cli
globally and use the schematics
command line tool. That tool acts the same as the generate
command of the Angular CLI, but also has a debug mode.
npm i -g @angular-devkit/schematics-cli
Building schematic
npm run build// OR run in watch modenpm run build:watch
Running/Testing Schematic
There are couple of ways to test the schematic in an Angular Cli workspace.
- Navigate to an angular workspace or create one.
- Run
schematics <path_to_collection.json>:ng-add
command. By default this runs in dry run mode (debug=true).
// Example from `sample-app` application.// dry-run modeschematics /src/collectionjson:ng-add// normal modeschematics /src/collectionjson:ng-add --debug false
You can also test using the ng add
or nx add
(in Nx workspace) command while developing this locally. This is good test before actually publishing your schematic to npm.
- Build the schematic:
npm run build
- Run
npm pack
. This will produce angx-tailwindcss-schematic-1.0.0-tgz
file of your schematic. Copy this file to any Angular workspace where you want to test the schematic. - Run
npm i --no-save ngx-tailwindcss-schematic-1.0.0-tgz
- Run
ng add ngx-tailwindcss-schematic
Unit Testing (Todo)
npm run test
will run the unit tests, using Jasmine as a runner and test framework.
Learning
Detailed blog on my learning coming soon!
Credits
This schematic project has been a learning process for me to learn and dive into Angular Schematics and also to publish my first schematic to npm
. This would not have been possible without some very useful resources/blogs etc. Here are couple that I refered a lot:
- Tomas Trajan Medium Blog - Helped to understand concepts, examples, etc.
- ngneat tailwind schematic - Helped with few code examples and ideas to structure this schematic.