benjaminforras/ngx-tailwind

💨 Simple Angular schematic that initializes Tailwind CSS in your project and adds a custom webpack config to your build process.

Tailwind CSS Schematics

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

Only works with Angular v11.2 and up.

Installation

Run

ng add @tryharddood/ngx-tailwind

# or

ng add @tryharddood/ngx-tailwind --project <MY_PROJECT>

Example output

? Which stylesheet format are you using? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
? Which @tailwindcss plugins do you want to install? aspect-ratio, forms, line-clamp, typography
CREATE tailwind.config.js (360 bytes)
CREATE scripts/ngx-tailwind-jit-transform.js (367 bytes)
UPDATE package.json (1782 bytes)
UPDATE src/styles.scss (97 bytes)
√ Packages installed successfully.

All available flags:

Flag	Description	Type	Default
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.2.6
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]

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