Skip to main content

Command Palette

Search for a command to run...

Install TailwindCSS in Angular

Updated
1 min read
Install TailwindCSS in Angular

Today we will see how to install TailwindCSS in an Angular project

Create or use your Angular project

ng new project
cd project

**Install and configure TailwindCSS **

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init # Will generate a file tailwind.config.js

Configure the paths of all your template files

Edit your tailwind.config.js to add these lines :

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add TailwindCSS directives to your CSS file style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

**Enjoy using TailwindCSS ** ng serve

More from this blog

G

Gilles Ferrand's Blog

18 posts

Lead Developer Front-end - Enthusiast Developer - NX & Angular Lover