A schematic that adds TailwindCSS to Angular applications
npm install @ngneat/tailwindThis schematic will add Tailwind CSS to your
Angular application.
![Angular Tailwind CSS Schematics][demo]
[demo]: https://github.com/ngneat/tailwind/raw/master/assets/ngneat-tailwind.gif
| @ngneat/tailwind | AngularCLI |
| :----------------- | :------------------- |
| v7.x.x | >= 11.2.x |
| v6.x.x | >= v11.1.x, < 11.2.x |
| v5.2.5 | < v11.1.x |
In v7, we leverage the built-in TailwindCSS support from AngularCLI if you use AngularCLI >= 11.2. When you invoke the schematics, and you have AngularCLI <11.2 installed, you'll see the following message:
```
Detected AngularCLI version is 11.0.7 which does not support TailwindCSS natively.
Please run "ng add @ngneat/tailwind@6" for Custom Webpack support.
The main difference is Angular CLI v11.1+ uses PostCSS 8 already, so we remove that from our dependencies list. To use these schematics at specific version, please use this syntax: ng add @ngneat/tailwind@5.2.5 or npm i -D @ngneat/tailwind@5.2.5
``
ng add @ngneat/tailwind
> IMPORTANT for AngularCLI users: As of April 06 2021, create-nx-workspace@latest still generates Angular with AngularCLI 11.0.7 which does not have built-in TailwindCSS support. Please update AngularCLI by running ng update @angular/cli before running this schematics.
In Nx, you can either use AngularCLI or NxCLI. If you set up your Nx Workspace to use AngularCLI, the usage is the same as above. If you set up your Nx Workspace with NxCLI, follow the steps:
Install @ngneat/tailwind first:
``
npm i -D @ngneat/tailwind tailwindcss postcss autoprefixer
yarn add -D @ngneat/tailwind tailwindcss postcss autoprefixer
then execute the schematics:
``
nx generate @ngneat/tailwind:nx-setup
In v7, we do not use a Custom Webpack anymore. If you use Custom Webpack, please follow the below guide and use @ngneat/tailwind@6
If your projects are already using a custom Webpack builder with a
custom webpack.config, follow these steps to add TailwindCSS to
your project
- npm i -D @ngneat/tailwind tailwindcss (or yarn add -D @ngneat/tailwind tailwindcss)addTailwindPlugin
- Import from @ngneat/tailwind in yourwebpack.config
webpack.config
- Import your TailwindCSS config in your addTailwindPlugin
- Before you return or modify the original Webpack config, call
with the following parameters:webpackConfig
- : the Webpack configtailwindConfig
- : the TailwindCSS config that you importpatchComponentsStyles?
- : this flag will enable using TailwindCSSfalse
directives in components' stylesheets. Default to because
turning it on might impact your build time
`js
// example
const { addTailwindPlugin } = require('@ngneat/tailwind');
const tailwindConfig = require('relative/path/to/tailwind.config');
module.exports = (config) => {
addTailwindPlugin({
webpackConfig: config,
tailwindConfig,
patchComponentsStyles: true,
});
return config;
};
`
If you plan to use @ngneat/tailwind with @angular/material, please make sure that you setup @angular/material before @ngneat/tailwind because @angular/material:ng-add schematics will error out if it detects a custom Webpack in your angular.json.
@ngneat/tailwind uses built-in purge functionality by tailwindcss (under the hood, it is postcss-purgecss). By default, @ngneat/tailwind sets the content to any HTML and any TS files in the project.
This behavior can be modified as the consumers see fit.
In v7, @ngneat/tailwind provides an option to enable JIT mode for TailwindCSS. This is a new compilation mode that improves the compilation time as it does not compile ALL of TailwindCSS anymore but only compiles what you use in your application. This mode is still in preview as of tailwindcss@2.1.1
If you're using CSS Preprocessors (SASS/SCSS, LESS, Stylus) in your application, please check out TailwindCSS's Using with Preprocessors guide
- Fork this repo and clone the fork on your machine.
- Run npm install to install all the dependencies
- Start working on changes
``
_apps
|__tailwind-e2e (e2e tests)
_libs
|__tailwind
|__src
|__schematics
|__ng-add (AngularCLI schematics)
|__nx-setup (NxCLI schematics)
|__files (files template to be generated)
|__specs (unit tests)
|__schema.d.ts (interface)
|__constants (constants used in the project)
|__utils (utilities functions)
|__collection.json (schematics configuration)
|__package.json (package.json of @ngneat/tailwind which will be published to npm)
- Run git add . to stage your changesnpm run commit
- Run to start Conventional Commit flow
pre-commit will execute npm run lint and pretty-quick to lint andnpm run test
reformat.pre-commit does not run Unit Tests because Unit Tests will be
ran in Github Actions. Feel free to run the Unit Tests with to test your changes
Please run npm run e2e to run E2E tests before pushing
README is in two places at the moment: root andlibs/tailwind/README.md. The one in root is the one displayed onlibs/tailwind
Github while the one in is being used on npm. When youREADME`, make sure to update both.
make changes to
> A script can be created to automating this.
When everything passes and looks good, make a PR. Thanks for your
contribution.
Thanks goes to these wonderful people
(emoji key):
Chau Tran 💬 💻 📖 🤔 👀 | Netanel Basal 💻 🤔 | Santosh Yadav 🤔 🧑🏫 | BK 💻 🤔 | beeman 🤔 🧑🏫 💻 | Vlad Tansky 💻 | Abhinav Dinesh C 💻 |
Suguru Inatomi 📖 |
This project follows the
all-contributors
specification. Contributions of any kind welcome!