ngneat / Tailwind
Programming Languages
Projects that are alternatives of or similar to Tailwind
Angular Tailwind CSS Schematics
This schematic will add Tailwind CSS to your Angular application.
Versions
@ngneat/tailwind |
AngularCLI |
---|---|
v6.x.x | >= v11.1.x |
v5.2.5 | < v11.1.x |
The main difference is Angular CLI v11.1+ uses PostCSS 8
already so we remove that from our dependencies list. To use this schematics at specific version, please use this syntax: ng add @ngneat/[email protected]
or npm i -D @ngneat/[email protected]
Usage
ng add @ngneat/tailwind
Usage with Nx
In Nx, you can either use AngularCLI
or NxCLI
. If you setup your Nx Workspace to use AngularCLI
, the usage is the
same as above. If you setup your Nx Workspace with NxCLI
, follow the steps:
Install @ngneat/tailwind
first:
npm i -D @ngneat/tailwind tailwindcss postcss
yarn add -D @ngneat/tailwind tailwindcss postcss
then execute the schematics:
nx generate @ngneat/tailwind:nx-setup
Manual steps
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
(oryarn add -D @ngneat/tailwind tailwindcss
) - Import
addTailwindPlugin
from@ngneat/tailwind
in yourwebpack.config
- Import your TailwindCSS config in your
webpack.config
- Before you return or modify the original Webpack config, call
addTailwindPlugin
with the following parameters:-
webpackConfig
: the Webpack config -
tailwindConfig
: the TailwindCSS config that you import -
patchComponentsStyles?
: this flag will enable using TailwindCSS directives in components' stylesheets. Default tofalse
because turning it on might impact your build time
-
// 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;
}
Angular Material
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
.
Purge
@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.
CSS Preprocessors
If you're using CSS Preprocessors (SASS/SCSS, LESS, Stylus) in your application, please check out TailwindCSS's Using with Preprocessors guide
Contributing
- Fork this repo and clone the fork on your machine.
- Run
npm install
to install all the dependencies - Start working on changes
Structure
_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)
Commit
- Run
git add .
to stage your changes - Run
npm run commit
to start Conventional Commit flow
Commit Hooks
pre-commit will execute npm run lint
and pretty-quick
to lint and 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 npm run test
to test your
changes
E2E Tests
Please run npm run e2e
to run E2E tests before pushing
Updating README
README
is in two places at the moment: root and libs/tailwind/README.md
. The one in root is the one displayed on
Github while the one in libs/tailwind
is being used on npm
. When you make changes to README
, make sure to update
both.
A script can be created to automating this.
PR
When everything passes and looks good, make a PR. Thanks for your contribution.
Contributors β¨
Thanks goes to these wonderful people (emoji key):
Chau Tran π¬ π» π π€ π |
Netanel Basal π» π€ |
Santosh Yadav π€ π§βπ« |
BK π» π€ |
beeman π€ π§βπ« π» |
Vlad Tansky π» |
Abhinav Dinesh C π» |
This project follows the all-contributors specification. Contributions of any kind welcome!