javascript

Setup Tailwind CSS with Angular Version greater than 11

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

Cool Dev

Share
Published by
Cool Dev

Recent Posts

How to setup laravel project using homestead

Step 1 : Create a new directory Homestead by using this command  cd ~/Homestead Step…

1 month ago

NPM vs NPX

npx and npm are both command line tools that are used to install and run…

1 month ago

Configure laravel project in vagrant box in ubuntu

Step 1: Create a directory where you want to store project such as  mkdir ~/vagrant_projects…

2 months ago

Guide To Naming Conventions

Specifically, there are certain naming conventions available across all programming languages, also known as Snake…

2 months ago

How to use a CORS proxy to avoid “No Access-Control-Allow-Origin header” problems

If you want to solve the Access-Control-Allow-Orgin header problems, you can setup the cors proxy.…

2 months ago

React Native Hybrid with Ease

React Native Hybrid: Is React native hybrid? a popular question that mostly developers asked. Let…

3 months ago

This website uses cookies.