Add TailwindCSS in Angular

Hi, All today I am going to show you how we can add a CSS framework in angular, and this time I am using TailwindCSS for this post I am considering you have created an angular project already and want to integrate CSS framework.

• Visit TailwindCSS's official website https://tailwindcss.com/docs/guides/angular

• On this website, you will see two npm commands we have to run the following command.
  

npm install -D tailwindcss postcss autoprefixer

• Now we have to run the following command it will create one configuration file for TailwindCSS and the file name is tailwind.config.js.

npx tailwindcss init

• Then add this configuration to the file.

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

• After this head to the global style sheet style.scss or style.css and add these lines to the file.

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

• Now After this last step run your project using.

ng serve

• Open the app.component.html file remove all default HTML and change the HTML with the following.

<div class="container m-5 flex gap-2">
<button type="button" class="bg-blue-600 text-white px-4 py-2 rounded">Blue</button>
<button type="button" class="bg-red-600 text-white px-4 py-2 rounded">Red</button>
<button type="button" class="bg-green-600 text-white px-4 py-2 rounded">green</button>
<button type="button" class="bg-cyan-600 text-white px-4 py-2 rounded">cyan</button>
<button type="button" class="bg-purple-600 text-white px-4 py-2 rounded">purple</button>
</div>

Now check your browser.

In this way, we integrated TailwindCSS into your Angular project it will work for any version of Angular and if you have any queries or doubts then feel free to reach out to me!!