Gilles Ferrand
Gilles' Journey

Follow

Gilles' Journey

Follow
Install TailwindCSS in Angular

Install TailwindCSS in Angular

Gilles Ferrand's photo
Gilles Ferrand
·Jan 7, 2023·

1 min read

Table of contents

  • Create or use your Angular project
  • **Install and configure TailwindCSS **
  • Configure the paths of all your template files
  • Add TailwindCSS directives to your CSS file style.css

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

 
Share this