DEV Community

loading...

Setting up Tailwind CSS in Angular v11

queencykoh
Updated on ・1 min read

Note: In the v12 release, Angular added support for Tailwind CSS. See tailwind official documentation on how to install Tailwind CSS in Angular v12

Rapidly build modern websites without ever leaving your HTML. - Tailwind CSS

Install Tailwind CSS

Open terminal and go to the Angular project directory and run

npm install tailwindcss
Enter fullscreen mode Exit fullscreen mode

Optionally, install Tailwind CSS plugins

npm install @tailwindcss/typography
npm install @tailwindcss/forms
Enter fullscreen mode Exit fullscreen mode

Configure Tailwind CSS

  1. In the Angular project directory, create a Tailwind CSS configuration file name tailwind.config.js

  2. Add the following configurations

module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class',
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],
};
Enter fullscreen mode Exit fullscreen mode

Add configuration for forms and typography plugins if the following Tailwind CSS plugins are installed

plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],
Enter fullscreen mode Exit fullscreen mode
  1. Open styles.scss file to import the 3 Tailwind CSS layers
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode

Try it out

Add the following to any components

<h1 class="text-4xl font-bold text-center text-blue-500">Hello World</h1>
Enter fullscreen mode Exit fullscreen mode

Run ng serve and open browser on http://localhost:4200/

Visit Tailwind CSS to learn more about the framework.

Discussion (1)

Collapse
sergeyioffe profile image
Sergey Ioffe

Tailwind CSS is an effective framework that is easy to maintain.