Angular Tailwind CSS Schematics
A simple standalone angular schematics to add tailwindcss to your angular cli project.
Angular CLI workspaceng add ngx-tailwindcss-schematic
Nx workspacenx add ngx-tailwindcss-schematic
- In Nx, you can also use
- 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
tailwindcssng add ngx-tailwindcss-schematic --tw 187
||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
latest versions are installed for all the required dependencies. You will notice the word
latest in your
As mentioned before you can provide the custom version for
tailwindcss using the additional
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
npm run build// OR run in watch modenpm run build:watch
There are couple of ways to test the schematic in an Angular Cli workspace.
- Navigate to an angular workspace or create one.
schematics <path_to_collection.json>:ng-addcommand. 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
npm pack. This will produce a
ngx-tailwindcss-schematic-1.0.0-tgzfile of your schematic. Copy this file to any Angular workspace where you want to test the schematic.
npm i --no-save ngx-tailwindcss-schematic-1.0.0-tgz
ng add ngx-tailwindcss-schematic
Unit Testing (Todo)
npm run test will run the unit tests, using Jasmine as a runner and test framework.
Detailed blog on my learning coming soon!
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: