How to add tailwind css into your Angular 18 project

using tailwind with angular

Add tailwind css into angular using the following npm command

npm install -D tailwindcss postcss@latest autoprefixer@latest

You can see packages are installed in package.json

contents package.json file

Run the init command to generate a tailwind.config.js file.

npx tailwindcss init

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

In the config file, update the content with the above src file.

If you are using css or scss, import using the below command or

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

if you are using sass style, use the below code to import tailwind.

@import "tailwindcss/base"
@import "tailwindcss/components"
@import "tailwindcss/utilities"

Run the angular project and check the tailwind styles are working fine, using the below piece of code.

<h1 class="text-3xl font-bold underline">Simple Tailwind CSS application</h1>

That’s it guys. Happy Coding !