Angular with Tailwind CSS
Learn how to style Angular applications with Tailwind CSS
- Authors
Marc Stammerjohann
- Published at
Learn how to use utility-first CSS framework Tailwind CSS with Angular using ngx-build-plus.
This guide works for both Tailwind CSS v1 and v2 and Angular v10 and v11.
Angular Version 11.2.0 or higher
Angular added native support for Tailwind CSS with the release of v11.2. Enable Tailwind CSS with the following 3 steps
📦 Install Tailwind dependencies
npm install -D tailwindcss autoprefixer postcss
🏗 Create Tailwind config file via the Tailwind CLI
npx tailwindcss init
Or create tailwind.config.js in your root folder and copy the following content. It already includes purge for your HTML and TS files.
module.exports = {
// mode: 'jit',
purge: ['./src/**/*.{html,ts}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
🖌️ Add Tailwind in your styles file, either src/styles.css or src/styles.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Angular Version below 11.2
You need the Angular CLI to create a new Angular v10 or v11 application.
ng new app-name --style=scss
cd app-name
Follow the instruction to manually configure Angular w/ Tailwind 🍬🍫🍪 or jump directly to the shortcut.
Setup
Start by adding dependencies for Tailwind, PostCSS and ngx-build-plus for angular.
npm i -D tailwindcss autoprefixer postcss postcss-import postcss-loader postcss-scss
ng add ngx-build-plus
Create a webpack.config.js in your root folder to configure PostCSS with Tailwind.
touch webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
},
};
Now open angular.json file to apply the extra webpack config to generate Tailwind styles during ng build, ng serve and ng test. If you used the schematics ng add ngx-build-plus it automatically replaces @angular-devkit/build-angular with ngx-build-plus in your angular.json. Additionally, add the extraWebpackConfig to each build step. In the end your angular.json should look like this:
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:browser",
+ "builder": "ngx-build-plus:browser",
"options": {
+ "extraWebpackConfig": "webpack.config.js",
...
}
...
},
"serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
+ "builder": "ngx-build-plus:dev-server",
"options": {
+ "extraWebpackConfig": "webpack.config.js",
...
}
...
},
"test": {
- "builder": "@angular-devkit/build-angular:karma",
+ "builder": "ngx-build-plus:karma",
"options": {
+ "extraWebpackConfig": "webpack.config.js",
...
}
...
},
Perfect, now it's time to generate the Tailwind config npx tailwindcss init or for full config npx tailwindcss init --full. Almost there. Add Tailwind base styles to your src/styles.scss file
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Now go ahead serve your app, you are ready to style 🎨 your Angular app with Tailwind utility classes.
... wait a moment, we need to purge the unused CSS styles from Tailwind.
Remove unused CSS Styles
We can use the new purge option in tailwind.config.js.
module.exports = {
purge: ['./src/**/*.html', './src/**/*.ts'],
theme: {
extend: {},
},
variants: {},
plugins: [],
};
Unused styles are removed by Tailwind when you run your build with NODE_ENV set to production. Add "build:prod": "NODE_ENV=production ng build --prod", to your scripts in package.json. Now run npm run build:prod for a production build only with used Tailwind styles.
CSS instead of SCSS
Using CSS instead of SCSS? No problem. You don't need to install postcss-scss.
npm i -D tailwindcss autoprefixer postcss postcss-import postcss-loader
ng add ngx-build-plus
module.exports = {
module: {
rules: [
{
test: /\.css$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
},
};
Finally add Tailwind base styles to src/styles.css.
@tailwind base;
@tailwind components;
@tailwind utilities;
Shortcut aka Angular Schematics
If you also think the steps above are tedious ... Don't look any further.
Angular Schematics 💪 to the rescue. Gary created a schematic to add Tailwind to an Angular project.
Simply run the schematic to automatically configure Tailwind CSS:
ng add ngx-tailwind
Use Tailwind CSS utility classes
Now go crazy with Tailwind's CSS utility classes in your Angular app.
Add them to your HTML template class, [class.hover:...]="true" or use them with ngClass
<span class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white" [class.hover:bg-red-700]="hoverMe">
#angular
</span>
span {
@apply inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white;
}
span:hover {
@apply bg-red-700;
}
Or use @HostBinding in your *.ts files
@HostBinding('class')
get classes() {
return 'bg-red-500 px-4';
}
@HostBinding('class.hidden')
get classes() {
return this.isHidden;
}
Add the following snippet to your src/app.component.html to see if Tailwind styles the following card. (Don't worry about the picture its random)
<div class="max-w-sm mx-auto mt-8 rounded overflow-hidden shadow-lg space-y-4">
<img
class="h-64 w-full object-cover object-center"
src="https://source.unsplash.com/random"
alt="Random unsplash photo"
/>
<div class="px-6">
<div class="font-bold text-xl">Angular w/ Tailwind</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
quia, nulla! Maiores et perferendis eaque, exercitationem praesentium
nihil.
</p>
</div>
<div class="px-6 pb-4 space-x-2">
<a
href="https://angular.io"
target="_blank"
rel="noreferrer"
class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-red-700"
>
#angular
</a>
<a
href="https://tailwindcss.com"
target="_blank"
rel="noreferrer"
class="inline-block bg-indigo-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-indigo-700"
>
#tailwind
</a>
<a
href="https://notiz.dev"
target="_blank"
rel="noreferrer"
class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 hover:bg-blue-400"
>
#notiz
</a>
</div>
</div>
In the next post you will create an Angular component for a floating form field based on my last post Floating Form Field with Tailwind CSS.
Migrations
Upgrading from Tailwind CSS v1 to v2
To upgrade you project from Tailwind CSS v1.x to v2.0 run the following install command
npm i -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-import@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).
Update postcss-loader from 3.x to 4.x
postcss-loader has new breaking changes when updating from version 3.x to 4.x. Huge thanks to @phileagleson :clap: who pointed out that options for PostCSS have moved to the postcssOptions. Therefore, update your webpack.config.js as follows when updating to postcss-loader@4.x
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
- ident: 'postcss',
- syntax: 'postcss-scss',
- plugins: () => [
- require('postcss-import'),
- require('tailwindcss'),
- require('autoprefixer'),
- ],
+ postcssOptions: {
+ ident: 'postcss',
+ syntax: 'postcss-scss',
+ plugins: [
+ require('postcss-import'),
+ require('tailwindcss'),
+ require('autoprefixer'),
],
},
},
},
],
},
};
All webpack.config.js examples are updated to use the new postcssOptions for postcss-loader@4.x.
Sponsor us
Did you find this post useful? We at notiz.dev write about our experiences developing Apps, Websites and APIs and develop Open Source tools. Your support would mean a lot to us 🙏. Receive a reward by sponsoring us on Patreon or start with a one-time donation on GitHub Sponsors.
