How to install Tailwind in an Angular project

---

1-Create a new Angular project

if you havn’t creat an angular app yet, create one using angular cli

ng new your-app-name

2-Install Tailwind CSS

install Tailwind uisng npm by runing this command, then run the init command to generate a tailwind.config.js file.

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

3-Set up Tailwind CSS:

Your tailwind.config.js should like this

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

4-Include Tailwind CSS in your styles

Modify the styles.css file in the src folder to include Tailwind CSS:

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

5-Start your build process

Run your build process with ng serve.

ng serve

6-Start using Tailwind in your project

Now you can use Tailwind css in your angular app

<div class="bg-bleu-300 text-white text-3xl font-bold px-5 py-3 rounded-md>Button</div>

If you found this information useful, please consider sharing the article with others.