@tryharddood/ngx-tailwind

Add Tailwind CSS to an Angular Workspace


Keywords
schematics, angular, tailwind, tailwind-css
License
MIT
Install
npm install @tryharddood/ngx-tailwind@2.2.0

Documentation

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.

Installation

Run

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

Developing

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