DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

Adding Tailwind CSS to Angular projects.

#angular #tailwindcss

First need to Install Tailwind CSS using CLI command :

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Next Run init command to generate tailwind.config.js

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Configuring template paths :

In tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {

    ...

  content: [
    "./src/**/*.{html,ts}",
  ],

    ...

}
Enter fullscreen mode Exit fullscreen mode

Adding the Tailwind directives to your CSS :

In style.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Reference : Official Docs

Top comments (0)

Read next

fpaghar profile image

Object Iteration ways in JavaScript

Fatemeh Paghar -

nikhil6076 profile image

Angular at Scale: Introduction to Micro Frontend Architecture

Nikhil Sai -

davidepassafaro profile image

Angular Signal Inputs: road to Signal Components

Davide Passafaro -

railsstudent profile image

Build full stack text translation application with Angular and Generative AI

Connie Leung -