Integrate Tailwind css with angular

I’m using angular material in my projects, did quite a lot of customization of layouts, styling etc, so I was thinking to use some out of box solution to refactor the code, after reading a blog from angular team, want to give Tailwind a try and see how things go with UX

Install required dependencies

Based on it’s official doc, I need to install below dev dependencies

npm install -D tailwindcss postcss autoprefixer

Then run below command to init my angular project

npx tailwindcss init

Update tailwind configuration

Once have tailwind dependencies installed, make updates on the tailwind.config.js file, example as below

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

Then add Tailwind directives to global css file

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

Start my angular app, it’s ready to go with Tailwind support

Updates & Thoughts

Played with Tailwind for couple of days, some experience I got:

• Need to set important: true to force apply styles that conflicts with material design
• Has conflicts with material directives (eg, mat-button, mat date-picker), some styles can apply and behave as expected, some are not(eg: button height, entire date-picker input)
• Need to do responsiveness implementation manually, you have lots of control, but need a lot of time to make things work.
• Temporarily pause experiment on Tailwind, it’s a good tool to build web component and learn css, but seems be struggling with rapid web development

Reference

• https://tailwindcss.com/docs/guides/angular
• https://blog.angular.io/modern-css-in-angular-layouts-4a259dca9127