[Tailwind CSS Angular] Install Tailwind CSS in an Angular project

Posted on Edited on In , , Views: Word count in article: 4.7k Reading time ≈ 4 mins.

Tailwind CSS and Angular

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup to make rapidly build modern websites without ever leaving your HTML.

Installation

Install Angular CLI

You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

To install the Angular CLI, open a terminal window and run the following command:

1
$ npm install -g @angular/cli

Create a workspace and initial application

You develop apps in the context of an Angular workspace.

To create a new workspace and initial starter app:

Run the CLI command ng new and provide the name my-app, as shown here:

1
$ ng new my-app

The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

1
$ cd my-app

Install tailwindcss, postcss and autoprefixer

you’ll want to install Tailwind and its peer-dependencies via npm.

1
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Configuration

If you’d like to customize your Tailwind installation, generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

1
$ npx tailwindcss init -p

This will create a minimal tailwind.config.js file at the root of your project:

1
2
3
4
5
6
7
8
9
10
// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

And create a minimal postcss.config.js file at the root of your project too:

1
2
3
4
5
6
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Learn more about configuring Tailwind in the configuration documentation.

Include Tailwind in your CSS

Create a CSS file if you don’t already have one, and use the @tailwind directive to inject Tailwind’s base, components, and utilities styles:

1
2
3
4
/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.

Building your CSS

How you actually build your project will depend on the tools that you’re using. Your framework may include a command like npm run dev to start a development server.

When building for production, be sure to configure the purge option to remove any unused classes for the smallest file size:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// tailwind.config.js

// Configuration - Tailwind CSS
// https://tailwindcss.com/docs/configuration

module.exports = {
// purge: [],
// purge: [
//   './src/**/*.html',
//   './src/**/*.ts',
// ],
purge: {
  enabled: true,
  content: [
    './src/**/*.{html,ts}',
  ]
},
// purge: {
//   enabled: process.env.NODE_ENV === "production",
//   content: ["./src/**/*.{html,ts}"],
// },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

See Removing unused CSS - https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css to learn how to purge all the unused classes.

Read our separate guide onoptimizing for production - https://tailwindcss.com/docs/optimizing-for-production to learn more about tree-shaking unused styles for best performance.

FAQS

initial exceeded maximum budget

1
2
3
4
5
$ npm run build:ssr
...
Warning: initial exceeded maximum budget. Budget 500.00 kB was not met by 2.50 MB with a total of 2.98 MB.
Error: initial exceeded maximum budget. Budget 1.00 MB was not met by 1.98 MB with a total of 2.98 MB.
...

Configure the purge option to remove any unused classes for the smallest file size:

1
2
3
4
5
6
7
8
// tailwind.config.js

  purge: {
    enabled: true,
    content: [
      './src/**/*.{html,ts}',
    ]
  },

References

[1] Install Tailwind CSS in an Angular project | by Thivagar | JavaScript in Plain English - https://javascript.plainenglish.io/install-tailwind-css-in-an-angular-project-54a189b53db2

[2] Installation - Tailwind CSS - https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin

[3] UPDATED: Angular 11 and TailwindCSS 2 | by Jacob Neterer | Medium - https://jacobneterer.medium.com/angular-and-tailwindcss-2388fb6e0bab

[4] feat(@angular-devkit/build-angular): detect and use tailwindcss in projects by clydin · Pull Request #19935 · angular/angular-cli - https://github.com/angular/angular-cli/pull/19935

[5] Optimizing for Production - Tailwind CSS - https://tailwindcss.com/docs/optimizing-for-production

[6] Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. - https://tailwindcss.com/

[7] Angular - https://angular.io/

[8] postcss/postcss: Transforming styles with JS plugins - https://github.com/postcss/postcss