Tailwind CSS is a utility-first CSS framework that makes it easy to build outstanding design systems. It's based on the philosophy that pretty much anything you can do with CSS, you can achieve it by adding a bunch of utility classes directly in your HTML. Angular, on the other hand, is a platform that allows you to build high-quality enterprise applications. Combine Angular with Tailwind CSS and you have a perfect stack for building top-notch web applications.
In this article, I will walk you through how you can add Tailwind CSS to your Angular application.
This article assumes that you're using Angular CLI version 11.2.0 or higher.
1. Generate a new Angular application
Let's start by creating a new Angular project using the ng new
command:
ng new my-app
When the CLI asks you "which stylesheet format would you like to use?" choose CSS because:
- With Tailwind, you don't need a CSS preprocessor like Sass. You'll rarely need to write custom CSS anyway.
- Your CSS will compile much faster because it won't need to pass through multiple compilation pipelines.
If you want to use a CSS preprocessor, or have an existing project, don't worry! The rest of this guide is still relevant.
2. Install the needed dependencies
Now, install the required dependencies via npm:
npm install postcss --save-dev
npm install tailwindcss
If you use npm, you technically don't need to manually install the postcss package. But doing so will help you avoid hoisting issues and make your setup future-proof.
3. Create your configuration file
npx tailwind init
This command will create the tailwind.config.js
file which contains your Tailwind CSS configuration. This is where you can customize your design system and other Tailwind options like Purge CSS.
4. Configure Purge CSS
Tailwind provides out of the box support for Purge CSS—a tool that will remove all unused Tailwind utility classes from your production bundle. Open the tailwind.config.js
file and replace its content with the following:
module.exports = {
purge: {
enabled: process.env.WEBPACK_DEV_SERVER === 'true' && process.argv.join(' ').indexOf('build') !== -1,
content: [
"./src/**/*.{html,ts}",
"./projects/**/*.{html,ts}"
]
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
We need this because Tailwind generate thousands of CSS classes by default—many of which we won't use in your application. The configuration above tells Purge CSS to analyze all the HTML and TypeScript files inside the src
and projects
folders and remove any CSS class that is not used inside those files when using ng build
. This will leave you with a very lightweight CSS bundle for production. When using ng serve
the full set of Tailwind classes will still be loaded.
5. Add Tailwind directives to your global CSS file
Open your global CSS file (src/style.css
) and add the following content:
@tailwind base;
@tailwind components;
@tailwind utilities;
With this, Tailwind will process the @tailwind
directives and inject its base
, components
, and utilities
classes.
6. Enjoy!
You can now start your Angular application and enjoy using Tailwind:
npm start
Top comments (0)