This is the setup I reach for at the start of every new React project. Getting Prettier and Tailwind CSS working together requires one specific step that's easy to forget — so here it is documented once, clearly.
I usually create the GitHub repo first and clone it locally, so I initialise Next.js or Vite in an existing folder. If you're doing the same, use the
.at the end of your command to scaffold into the current directory.
Next.js
npx create-next-app@latest .Here are the options I usually pick:
Would you like to use TypeScript? Yes
Would you like to use ESLint? No
Would you like to use Tailwind CSS? Yes
Would you like your code inside a \`src/\` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for \`next dev\`? Yes
Would you like to customise the import alias? NoOnce that's done, install Prettier and the Tailwind plugin:
npm install -D prettier prettier-plugin-tailwindcssThen add the following config to the bottom of your package.json:
"prettier": {
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": false,
"plugins": [
"prettier-plugin-tailwindcss"
]
}Prettier will now sort your Tailwind classes automatically on format. (Option + Shift + F on macOS.)
Vite
The Prettier config is identical. The only difference is how Tailwind is set up.
Install Tailwind CSS and its Vite plugin:
npm install tailwindcss @tailwindcss/viteImport the plugin in your vite.config.ts:
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [tailwindcss()],
});Import Tailwind in your main stylesheet (for example, src/style.css):
@import "tailwindcss";Make sure your compiled CSS is loaded in your HTML or app entry:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/src/style.css" rel="stylesheet" />
</head>
<body>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>If you're using VS Code, install the Prettier extension and enable format-on-save — it will handle class sorting automatically.
— Karl