prettier-plugin-tailwindcss

What is prettier-plugin-tailwindcss?

The prettier-plugin-tailwindcss npm package is a plugin for Prettier, the code formatter, that sorts Tailwind CSS classes automatically. It ensures that your Tailwind CSS classes are ordered consistently according to the recommended order from the Tailwind CSS documentation. This can help improve readability and maintainability of your code.

What are prettier-plugin-tailwindcss's main functionalities?

Sorting Tailwind CSS classes

This plugin will reorder the classes to follow the default Tailwind CSS order, for example, positioning classes like 'flex' and 'justify-center' would come before display and box model classes like 'p-4' and 'bg-red-500'.

"<div class='bg-red-500 p-4 flex justify-center'>Hello World</div>"

Other packages similar to prettier-plugin-tailwindcss

headwind

Headwind is a Visual Studio Code extension that also sorts Tailwind CSS classes automatically. It is similar to prettier-plugin-tailwindcss but is specifically designed for VS Code and does not require Prettier.

tailwindcss-classnames

This package is a typed utility function to combine Tailwind CSS classes. While it does not sort classes, it provides a way to conditionally join class names together, which can be useful in conjunction with a sorting tool.

tailwind-merge

tailwind-merge is a utility to merge Tailwind CSS classes without duplicates and with optimized class precedence. It does not sort classes but ensures that the final class string is optimized for Tailwind CSS.

README

prettier-plugin-tailwindcss

A Prettier plugin for Tailwind CSS that automatically sorts classes based on Tailwind's internal class sorting algorithm.

Installation

Note that prettier-plugin-tailwindcss is only compatible with Tailwind CSS v3

npm install --save-dev prettier prettier-plugin-tailwindcss

By default the plugin will look for a Tailwind config file (tailwind.config.js) in the same directory as your Prettier config file. If your Tailwind config file is somewhere else you can specify this using the tailwindConfig option (paths are resolved relative to the Prettier config file):

// prettier.config.js
module.exports = {
  tailwindConfig: './styles/tailwind.config.js',
}

If a Tailwind config file cannot be found then the default Tailwind configuration will be used.