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.
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.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@latestRead 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).
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.5All 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.4Want 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.4By 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 --disableCrossPlatformInstall @angular-devkit/schematics-cli to be able to use schematics command
npm i -g @angular-devkit/schematics-cliNow 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent