close
The Wayback Machine - https://web.archive.org/web/20221120072638/https://dev.to/manthanank/adding-tailwind-css-to-angular-projects-5132
Skip to content
Search

DEV Community 👩‍💻👨‍💻

Manthan Ank
Manthan Ank

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)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠

Read next

helenaamartins profile image

Rick and Morty + Nuxt + Tailwind

Helena Martins -

larainfo profile image

Tailwind CSS List Style Marker Example

larainfo -

larainfo profile image

How To Install Flowbite Tailwind In React

larainfo -

sidali profile image

Débuter avec Angular 14: #6 Les composants

Sid Ali BENTIFRAOUINE -