How to Setup Tailwind CSS Automatic Class Sorting with Prettier in New and Existing Projects

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
  • Initializing the Project and Installing Tailwind CSS
  • Install and Configure Prettier
• 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.