DEV Community

Cover image for Add TailwindCSS in Angular
venkateshpensalwar
venkateshpensalwar

Posted on

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.

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • Then add this configuration to the file.
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode
  • Now After this last step run your project using.
ng serve
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

Now check your browser.

html demo

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!!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay