How to use Prettier with Tailwind

Hello everybody welcome to today's session on how to use prettier with Tailwind for sorting classes. We will install and configure prettier to work smoothly with tailwind.

Why Prettier?

i) It's low overhead
ii) It's bug free
iii) It works with tailwind smoothly
iv) It arranges classes
v) Classes are compiled more quickly
vi) Format all tailwind classes of all files

How to install Prettier

First of all if you do not have prettier installed, install it from VS Code marketplace or anyothe code editor marketplace. The code editor where Prettier support can be found in their homepage.

How to configure with Tailwind

Node Apps

To configure with tailwind first install prettier-plugin-tailwind by using npm. To install it run the command

npm i prettier-plugin-tailwind

Then add the file with name prettier.config.js

module.exports = {
  tailwindConfig: "./tailwind.config.js",
};

Change tailwind config file if it is some other place