DEV Community

queencykoh
queencykoh

Posted on • Updated on

Setting up Tailwind CSS in Angular v11

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/

Using a utiliy-first frameworks like TailwindCSS can make your HTML files bloated to deal with this duplication and to keep your project maintainable, visit Extracting Components at Tailwind CSS

To see how I created a Authentication form using TailwindCSS visit link below

Discussion (1)

Collapse
sergeyioffe profile image
Sergey Ioffe

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