Introduction
Tailwind CSS is a popular utility-first CSS framework that provides low-level utility classes to apply styles directly in the markup, leading to faster development cycles.
Prettier, on the other hand, is a widely-used code formatter that ensures your code is consistently formatted by parsing it and reprinting it with its own rules. This helps maintain a uniform code style across the entire project, making the codebase cleaner and easier to read.
One common challenge when using Tailwind CSS is managing the order of utility classes, especially as the complexity of your styles and HTML grows. Manually sorting these classes can be tedious and error-prone. This is where automatic class sorting comes in. By leveraging tools like Prettier along with plugins such as prettier-plugin-tailwindcss
, we can automate the sorting of Tailwind CSS classes, ensuring a consistent order and improving the readability and maintainability of classes.
The purpose of this article is to guide you through the process of setting up Tailwind CSS automatic class sorting with Prettier in both new and existing projects. Whether you are starting a fresh project or integrating into an ongoing one, this comprehensive guide will provide you with step-by-step instructions.
Table of Contents
- Setting Up Tailwind CSS and Prettier in a New Project
- Setting Up
prettier-plugin-tailwindcss
in an Existing Tailwind CSS Project - Conclusion
Setting Up Tailwind CSS and Prettier in a New Project
Before we begin, ensure you have the following installed:
- Node.js
- A package manager (we will be using bun for this project, but you can use npm, yarn, or pnpm if you prefer)
- A code editor (e.g., VS Code)
Initializing the Project and Installing Tailwind CSS
Start by creating a new project. The specific steps may vary depending on your preferred framework or setup. Refer to the Tailwind CSS Installation Framework Guide for detailed instructions. If you have already completed the Tailwind CSS installation steps, you can proceed to the Setting Up prettier-plugin-tailwindcss
in an Existing Tailwind CSS Project section. Hereโs how to do it using Vite:
bun create vite my-app --template react-ts
cd my-app
bun install
Now let's install & configure Tailwind CSS
bun install -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p
You should see a Tailwind CSS config file: tailwind.config.js
, copy the following contents into it.
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Add the following Tailwind directives to the top of your CSS file (e.g., src/index.css
):
@tailwind base;
@tailwind components;
@tailwind utilities;
Install and Configure Prettier
bun install -D prettier prettier-plugin-tailwindcss
Create a prettier configuration file in the root of your project and add the prettier-plugin-tailwindcss
plugin to the configuration file, we'd be using .prettierrc
, you can check out other acceptable prettier configuration file types here here
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Now let's test the setup, modify the src/App.tsx
file and save it.
import { useState } from "react";
import "./App.css";
const App = () => {
const [count, setCount] = useState(0);
return (
<>
<div className="card">
<button
className="border-2 border-teal-700 hover:border-white bg-white hover:bg-teal-700 text-slate-800 hover:text-white transition-colors duration-300 custom-btn"
onClick={() => setCount((count) => count + 1)}
>
Count is {count}
</button>
</div>
</>
);
};
export default App;
Result:
import { useState } from "react";
import "./App.css";
const App = () => {
const [count, setCount] = useState(0);
return (
<>
<div className="card">
<button
className="custom-btn border-2 border-teal-700 bg-white text-slate-800 transition-colors duration-300 hover:border-white hover:bg-teal-700 hover:text-white"
onClick={() => setCount((count) => count + 1)}
>
Count is {count}
</button>
</div>
</>
);
};
export default App;
Setting Up prettier-plugin-tailwindcss
in an Existing Tailwind CSS Project
If your project already has Prettier set up, integrating the prettier-plugin-tailwindcss
plugin is straightforward. You'd only need to install the plugin and configure it. If Prettier is not yet installed, you'll need to set it up alongside the plugin.
For projects with an existing prettier setup, run:
bun add -D prettier-plugin-tailwindcss
For projects with no existing prettier setup, run:
bun add -D prettier prettier-plugin-tailwindcss
Add the plugin to your existing Prettier configuration. If there's no existing Prettier configuration, Create a .prettierrc
file in the root of your project. Then add the following:
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Ensure that Prettier is working correctly by making changes to a file with Tailwind CSS classes. Save the file and check if the Tailwind CSS classes are sorted automatically.
Conclusion
Integrating prettier-plugin-tailwindcss
into both new and existing Tailwind CSS projects improves your development workflow by ensuring consistent and organized class sorting. For new projects, you can set up Prettier and the plugin simultaneously to streamline your initial configuration. For existing projects, simply add the plugin to your existing Prettier setup or install both Prettier and the plugin if Prettier is not yet configured.
For additional configuration options like sorting classes in non-standard attributes, visit the prettier-plugin-tailwindcss documentation.
Top comments (1)
This was really helpful for understanding how to organize Tailwind classes with Prettier. Do you have plans to cover more advanced configurations in future posts?