Question 1

How to configure prettier-plugin-tailwindcss for Tailwind CSS v4?

Accepted Answer

You need to add the tailwindStylesheet option in your Prettier config, pointing to your CSS entry file like ./resources/css/app.css. This is required because Tailwind v4 uses a CSS-first approach, and the plugin needs to access your theme and utilities. Ensure the path is relative to your Prettier configuration file.

Question 2

Can prettier-plugin-tailwindcss sort classes in function calls like clsx?

Accepted Answer

Yes, by using the tailwindFunctions option in your Prettier config, you can list function names such as 'clsx' or 'cva'. The plugin will then automatically sort classes within those function calls, maintaining consistent order in dynamic class generation scenarios.

Question 3

Why does prettier-plugin-tailwindcss need to be loaded last in Prettier plugins?

Accepted Answer

It uses Prettier APIs that can only be used by one plugin at a time, causing conflicts with others. The plugin includes workarounds for specific plugins but must be last to function correctly, which can complicate setups if you rely on multiple formatting tools.

Question 4

prettier-plugin-tailwindcss vs manual class sorting: which is better?

Accepted Answer

prettier-plugin-tailwindcss automates sorting based on Tailwind's recommended order, ensuring consistency and saving time in teams. Manual sorting is error-prone and inconsistent, making the plugin superior for standardized workflows, though it adds a dependency.

Question 5

How to use the public API of prettier-plugin-tailwindcss outside of Prettier?

Accepted Answer

Import createSorter from 'prettier-plugin-tailwindcss/sorter' and provide options like base path or stylesheet. Use methods like sortClassAttributes or sortClassLists to programmatically sort classes, which is handy for custom tooling or integration into build processes.

Question 6

Is prettier-plugin-tailwindcss compatible with Svelte or Astro projects?

Accepted Answer

Yes, it has explicit compatibility with prettier-plugin-svelte and prettier-plugin-astro, as listed in the README. However, you must ensure it's loaded last in your plugin list to avoid conflicts, following the provided configuration examples.

Prettier plugin

What is Prettier plugin?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions