I often have to work with Angular at my current employer and I've started using Tailwind CSS for almost every project this year, be it private or work, especially when working with a team. So here's a short tutorial on how to quickly set everything up.
1. Create a new Angular project
This step can be skipped if you already have an Angular project up and running. If not, the fastest way to create one is by using the Angular CLI. Install it globally by using your preferred package manager:
# npm
npm install -g @angular/cli
# yarn
yarn global add @angular/cli
After it is done installing, create a project with the ng new
command. When asked which stylesheet format you would like to use, go with the first option (CSS) and wait until the dependencies are done installing.
2. Install Tailwind dependencies
Next up we need to get all needed dependencies for Tailwind CSS:
# npm
npm install tailwindcss postcss autoprefixer postcss-import --save-dev
# yarn
yarn add tailwindcss postcss autoprefixer postcss-import --dev
Open the styles.css
located in the src
folder and add the following imports:
// styles.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
3. Create a Tailwind config
This step is optional but is necessary if you want to customize your Tailwind installation. Run the following command to create the config file using npx:
npx tailwindcss init
This will create the tailwind.config.js
at the root of your project. Read more about configuring Tailwind on the official docs.
4. Customize webpack configuration
In order to be able to use PostCSS we need to customize the build configuration of Angular. For this, we need another dependency:
# npm
npm install @angular-builders/custom-webpack --save-dev
# yarn
yarn add @angular-builders/custom-webpack --dev
It is now possible to extend the existing webpack config by creating a webpack.config.js
file at the root. Insert the following code:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer')
]
}
}
}
]
}
};
Now all that's left to do is to tell Angular to actually use our custom config. This can be done by modifying the angular.json
file:
// angular.json
{
...
"architect": {
"build": {
// Replace the value for builder
"builder": "@angular-builders/custom-webpack:browser",
"options": {
...
// Add this to the options object
"customWebpackConfig": {
"path": "./webpack.config.js"
}
}
},
"serve": {
// Replace the value for builder
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
...
// Add this to the options object
"customWebpackConfig": {
"path": "./webpack.config.js"
}
}
}
}
}
5. Setup PurgeCSS
One last step, which I highly recommend, is to remove unused CSS from your production builds. Check out this article from the official Tailwind docs with some great in-depth explanations. Add the purge
option with all paths to your templates in your Tailwind config (see step 3):
// tailwind.config.js
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.ts',
],
...
}
After that, you should be done and ready to go!