Skip to content

Setup Tailwind CSS with Angular Version greater than 11

  • by

Install tailwind css with npm

Run the following command to install tailwind css

npm install -D tailwindcss

Generate Tailwind css configuration file

In the root of the project generate the tailwind css configuration file by using this command

 npx tailwindcss init

For optional performance , enable all the things in the tailwind configuration file

Just In Time Mode

Enable this, for optimizing build and ensure better performances result

Purge Unused CSS styles

To ensure Tailwind removes all unused CSS classes, enable purge and provide the path to all files that consume the Tailwind-CSS classes in your tailwind.config.js file. This will result in a smaller sized style bundle.

Add Tailwind CSS to your style.css file to enable globally

To confirm that TailwindCSS is working correctly, simply add a button to your html file in any of your components.

After this check the result. Tailwind css is setup correctly

Leave a Reply

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

I accept that my given data and my IP address is sent to a server in the USA only for the purpose of spam prevention through the Akismet program.More information on Akismet and GDPR.