Add Tailwind CSS to an Angular Workspace

schematics, angular, tailwind, tailwind-css
npm install @tryharddood/ngx-tailwind@2.2.0


Tailwind CSS Schematics

npm version Schematics CI

Simple Angular schematic initializing Tailwind CSS in your project. Angular v11.2 includes native support for Tailwind CSS.

For all versions before Angular v11.2 a custom webpack config is added to your build process.



ng add ngx-tailwind

# or

ng add ngx-tailwind --project <MY_PROJECT>

Example output

The package ngx-tailwind@dev will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Which stylesheet format are you using? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
? Which @tailwindcss plugins do you want to install? typography
CREATE tailwind.config.js (236 bytes)
UPDATE package.json (1095 bytes)
UPDATE src/styles.scss (177 bytes)
✔ Packages installed successfully.

Migrate from Tailwind CSS v1 to v2

To upgrade you project from Tailwind CSS v1.x to v2.0 run the following install command

npm i -D tailwindcss@latest autoprefixer@latest postcss@latest postcss-import@latest postcss-loader@latest

# using scss
npm i -D postcss-scss@latest

Read the full Upgrade Guide to update your custom tailwind.config.js (e.g. your color palette) and replace removed classes from your template (e.g. shadow-outline and shadow-xs).

Additional options

You can pass additional flags to customize the schematic. For example, if you want to install a different version for Tailwind use --tailwindVersion flag:

ng add ngx-tailwind --tailwindVersion 1.9.5

All available flags:

Flag  Description Type  Default
 autoprefixerVersion The autoprefixer version to be installed. string ^10.2.4
 cssFormat The file extension or preprocessor to use for style files. css |  scss css
 ngxBuildPlusVersion The ngx-build-plus version to be installed. string ^11.0.0
 project The project to initialize with Tailwind CSS. string First Angular project
 postcssVersion The postcss version to be installed. string ^8.2.6
 postcssImportVersion The postcss-import version to be installed. string ^14.0.0
 postcssLoaderVersion The postcss-loader version to be installed. string ^4.2.0
 postcssScssVersion The postcss-scss version to be installed. string ^3.0.4
 skipTailwindInit Skip initializing Tailwind. boolean false
 tailwindVersion The Tailwind version to be installed. string ^2.0.3
 disableCrossPlatform Set the build:prod script to be only UNIX compatible. boolean false
 crossEnvVersion The cross-env version to be installed. string ^7.0.3
 tailwindPlugins @tailwindcss plugins installed and added to tailwind.config.js string[] [aspect-ratio, forms, line-clamp, typography]

Advanced usage

ng add ngx-tailwind --cssFormat scss --tailwindVersion 2.0.0 --ngxBuildPlusVersion 10.1.1 --postcssVersion 8.0.0 --postcssImportVersion 13.0.0 --postcssLoaderVersion 4.0.4 --postcssScssVersion 3.0.4

Want to integrate Tailwind CSS in version 1.x.x? No problem:

ng add ngx-tailwind --tailwindVersion 1.9.6 --ngxBuildPlusVersion 10.1.1 --postcssVersion 7.0.35 --postcssImportVersion 12.0.1 --postcssLoaderVersion 4.0.4 --postcssScssVersion 3.0.4

By default, cross-env is added to the build:prod script to be able to set NODE_ENV=prod cross-platform. If you want to override the default behavior, you can set the flag --disableCrossPlatform:

ng add ngx-tailwind --disableCrossPlatform


Install @angular-devkit/schematics-cli to be able to use schematics command

npm i -g @angular-devkit/schematics-cli

Now build the schematics and run the schematic.

npm run build
# or
npm run build:watch

# dry-run in angular-workspace
npm run start:dev

# execute schematics in angular-workspace
npm run start