README
Tailwind CSS Schematics
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.
Upgrade Guide
Tailwind CSS v2 to v3
To upgrade your project from Tailwind CSS v2 to v3.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Update your tailwind.config.js
to the new JIT Engine.
module.exports = {
- // mode: 'jit',
- purge: ['./src/**/*.{html,ts}'],
+ content: ['./src/**/*.{html,ts}'],
- darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
- variants: {
- extend: {},
- },
plugins: [],
};
Remove production build script from package.json
, which was used for purging unused styles. Since JIT Engine generates only used styles this script is not necessary anymore.
{
"name": "angular-workspace",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
- "build:prod": "cross-env NODE_ENV=production ng build --configuration production"
},
"private": true,
"dependencies": {
"@angular/animations": "~13.0.3",
"@angular/common": "~13.0.3",
"@angular/compiler": "~13.0.3",
"@angular/core": "~13.0.3",
"@angular/forms": "~13.0.3",
"@angular/platform-browser": "~13.0.3",
"@angular/platform-browser-dynamic": "~13.0.3",
"@angular/router": "~13.0.3",
"rxjs": "~7.4.0",
"tslib": "^2.3.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.4",
"@angular/cli": "~13.0.4",
"@angular/compiler-cli": "~13.0.3",
"@types/node": "^12.11.1",
"autoprefixer": "^10.4.1",
- "cross-env": "^7.0.3",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.8",
"typescript": "~4.4.4"
}
}
Migrate from Tailwind CSS
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 3.0.8
All available flags:
Flag | Description | Type | Default |
---|---|---|---|
autoprefixerVersion |
The autoprefixer version to be installed. | string | ^10.4.1 |
cssFormat |
The file extension or preprocessor to use for style files. | css | scss |
css |
project |
The project to initialize with Tailwind CSS. | string |
First Angular project |
postcssVersion |
The postcss version to be installed. | string |
^8.4.5 |
skipTailwindInit |
Skip initializing Tailwind. | boolean |
false |
tailwindVersion |
The Tailwind version to be installed. | string |
^3.0.8 |
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 3.0.8 --postcssVersion 8.4.5
Want to integrate Tailwind CSS with Angular 11.1 or lower? No problem:
ng add ngx-tailwind@2.3.0
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