Boost Your Tailwind Workflow with ESLint and Prettier

Introduction

Tailwind CSS is an essential tool for building modern UIs, but let’s be real, managing its class names can get messy fast. Ever found yourself staring at an HTML tag loaded with an endless string of utility classes? Or maybe you’ve caught yourself wondering, “Did I already add ‘px-4’ here?” Keeping class names consistent and ordered isn’t just about aesthetics; it’s about maintaining sanity in collaborative projects.

If you’ve ever struggled with disorganized Tailwind classes, you’re in the right place. In this post, I’ll walk you through how to make your Tailwind CSS setup strict and efficient. Using the Prettier Tailwind CSS plugin, you’ll learn how to sort class names following the official Tailwind team’s recommendations. Additionally, we’ll explore the ESLint Tailwind CSS plugin, which not only enforces class order but offers even more capabilities to improve your workflow. By the end, you’ll have a clean, consistent codebase that’s easier to read, debug, and scale.

Let’s dive in and clean up that class name chaos.

Tutorial: Setting Up a Strict Tailwind CSS Workflow

Step 1: Install Required Dependencies

To get started, you’ll need to install some packages that will make this setup possible. Run the following command to add them to your project:

I will be using pnpm as my package manager, but feel free to use whatever works for you.

pnpm install -D prettier prettier-plugin-tailwindcss eslint eslint-plugin-tailwindcss

In addition to core ESLint and Prettier packages themselves, this installs both the Prettier Tailwind CSS plugin for sorting class names and the ESLint Tailwind CSS plugin for validating and enforcing best practices.

Step 2: Configure Prettier

Next, let’s set up Prettier to automatically sort Tailwind CSS class names. Open your .prettierrc (or equivalent) file (or create one if it doesn’t exist) and add the following configuration:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Prettier will now automatically sort Tailwind CSS class names every time you format your code.

Step 3: Configure ESLint

Now, let’s configure ESLint to enhance your Tailwind CSS setup. Open your .eslintrc.json file and update it with these settings:

{
  "plugins": ["tailwindcss"],
  "extends": ["plugin:tailwindcss/recommended"]
}

In ESLint 9, they moved to use a new flat config format (typically configured in an eslint.config.js file), and they provide a very helpful configuration migrator that we can run on our existing config file to convert it to the new format. To use it do the following to your existing configuration file (.eslintrc, .eslintrc.json, .eslintrc.yml):

pnpm dlx  @eslint/migrate-config .eslintrc.json

This will create a starting point for your eslint.config.js file but is not guaranteed to work immediately without further modification.

If you want to do it manually, you can create a new eslint.config.js file and paste the following to it.

import path from "node:path"
import { fileURLToPath } from "node:url"
import js from "@eslint/js"
import { FlatCompat } from "@eslint/eslintrc"

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
})

export default [
  ...compat.extends("plugin:tailwindcss/recommended"),
  {
    settings: {
      tailwindcss: {
        callees: ["cn", "cva"],
        config: "tailwind.config.mjs", // Update this path to point to your tailwind config.
      },
    },
  },
]

Step 5: Verify the setup

With everything configured, it’s time to test the setup. Create a file with some unordered Tailwind CSS classes, like this:

<div className="relative flex min-h-svh flex-col bg-background w-full">

Run Prettier to format the file, and ESLint to validate it. After formatting, the class names will be ordered automatically:

<div className="relative flex min-h-svh w-full flex-col bg-background">

Step 6: Add to Your Workflow

To make the most of this setup, integrate these tools into your workflow:

• Use Prettier with your code editor (e.g., enable auto-formatting in VS Code).
• Add ESLint to your CI/CD pipeline or Git hooks using a tool like Husky to enforce rules before committing code.

Check our my previous blog post for a detailed guide on optimizing your workflow.

Conclusion

Keeping class names organized and consistent is crucial for maintaining a clean and readable codebase. With a little effort upfront, you can simplify your workflow, avoid common pitfalls, and create a more collaborative coding environment. Consistency makes all the difference.

Thanks for reading this far.