Skip to content

Latest commit

 

History

History
178 lines (137 loc) · 6.33 KB

README.md

File metadata and controls

178 lines (137 loc) · 6.33 KB
Raw

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.

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 | | | 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 [email protected]

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