How To Use TailwindCSS In Angular

  • To write and maintain the code of your application is quicker using tailwind css. Tailwind css provide all the tools you need to build out a site in html. so you require rarely to write custom css.
  • Tailwind css is generally not be preferred in large project. because your code get messy if you tried to apply css conditionally .

Step – 1 : Create your project.

ng new my-project

Step – 2 : Install Tailwind CSS using below npm.

  • npm install -D tailwindcss postcss autoprefixer
  • npx tailwindcss init
  • npm i @tailwindcss/typography
  • npm i @tailwindcss/forms

Step – 3 : Add the paths to all of your template files in tailwind.config.js file.

module.exports = {
  prefix: '',
  purge: {
    content: [
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  variants: {
    extend: {},
  plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],

Step – 4 : Add the Tailwind directives to in style.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Step – 5 : Add the HTML in app.component.html

<h1 class="text-3xl font-bold underline">
  Hello world!

output :

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories