How to lint Tailwind classes in CI for Tailwind CSS developers in 2026

Learn how Tailwind CSS developers can lint classes in CI and compare tools that help review class changes before merging.

By SayDeploy · 2026-10-09

SayDeploy is published by LunarWerx, which makes some of the tools compared here.

Linting Tailwind classes in CI starts with preparing the project, choosing a checking tool, adding the check to the build process, and reviewing findings before merging changes.

Option	What it does	Cost
NormWind	Finds Tailwind class pairs that can be written as shorthands and flags matching arbitrary values. ^[1] ^[1]	Free with no paid tier. ^[1]
ESLint-based checks	Runs lint rules inside an ESLint workflow.	not published
Prettier-based checks	Runs formatting checks in projects that use Prettier.	not published
Custom CI scripts	Runs project-specific commands created by the development team.	not published

What you need before you start

Before linting Tailwind classes in CI, make sure the project has a working CI process and a clear place where code checks run. Check which files contain Tailwind classes, such as HTML, Vue, Svelte, Astro, or JavaScript and TypeScript files. Decide what kinds of class issues should block a change and what should only be reported for review. Keep the Tailwind configuration and project dependencies available to the CI environment. It also helps to agree on how developers will handle findings, such as fixing them before merging or reviewing them during code changes. A clear rule for class checks makes the CI result easier to understand and act on.

Step by step

Identify the Tailwind class patterns the team wants to review. Look for repeated utility combinations, unnecessary custom values, or other class patterns that match the chosen checking rules.

Choose a tool that can run in the CI environment. Check that it can read the project files and produce results in a format that fits the workflow.

Add the class linting command to the CI process. Place it at a point where code is available and where a failed check can stop a change from moving forward.

Run the check on a sample change. Review the findings and confirm that developers understand what needs to change.

Decide how fixes should happen. Some workflows apply changes automatically, while others show findings for a developer to update manually.

Add the check to normal development work. A repeatable CI step helps catch class issues when changes are introduced instead of after they reach later stages.

Review the CI output format. Text, JSON, or SARIF results can be useful for different ways of reading and tracking code checks.

Keep the linting rules connected to the project needs. Update the process when the codebase, Tailwind usage, or team workflow changes.

Tools that can do it

NormWind is made by the team that publishes this site. NormWind finds Tailwind class pairs like px-4 py-4 that can be written as one shorthand like p-4. ^[1] NormWind flags arbitrary values like rounded-[24px] that match a named Tailwind utility like rounded-3xl, using Tailwind's own canonicalizeCandidates engine. ^[1] NormWind can rewrite findings in Vue, Svelte, Astro and HTML files with --fix, and --fixall also covers JS, TS, JSX and TSX files. ^[1] NormWind can show which files a fix would change without writing to disk when using --dry-run. ^[1]

ESLint-based workflows can be another option when a project already uses JavaScript and TypeScript checks. Check whether the available rules match the Tailwind class checks needed by the project.

Prettier-based workflows can help teams that already use formatting checks. Check whether the chosen formatting approach covers the Tailwind class review needs.

Custom CI scripts are another option for teams that want to create their own checks. Review the maintenance work needed before choosing this approach.

Common mistakes to avoid

Adding a Tailwind class check without deciding what should fail CI can make results unclear. Avoid running checks only after problems appear in shared branches because earlier feedback is easier to act on. Do not assume every finding needs the same response. Review whether a change improves consistency, removes unnecessary class patterns, or needs a developer decision. Forgetting to check the output format can also make CI results harder to use. Keep the process understandable so developers know why a class was flagged and what action to take.

Frequently asked questions

How can Tailwind CSS developers lint classes in CI?

Tailwind CSS developers can lint classes in CI by preparing the project, selecting a checking tool, adding the check to the CI workflow, and reviewing results before merging changes. The exact process depends on the files, rules, and output style needed by the project.

What should developers prepare before adding Tailwind class linting to CI?

Developers should know where Tailwind classes appear, which changes should be checked, and how CI results will be handled. Preparing dependencies, project settings, and a clear review process helps the class linting step work as part of the existing development workflow.

Can NormWind fix Tailwind class findings automatically?

NormWind can rewrite findings in Vue, Svelte, Astro and HTML files with --fix, and --fixall also covers JS, TS, JSX and TSX files. ^[1] Developers can use this when automatic updates match the desired workflow for the project.

Does NormWind work in CI environments?

NormWind works with Tailwind CSS v4 projects, and CI runs on Ubuntu, Windows and macOS. ^[1] NormWind can also be installed from npm as a dev dependency, or run with npx. ^[1]

What should developers check before choosing a Tailwind class linting tool?

Check which files the tool can review, how it reports findings, whether it works in the project CI environment, and how fixes are handled. A tool should match the team's workflow and the type of Tailwind class review needed before it becomes part of regular development checks.

NormWind is free with no paid tier. ^[1]

Try NormWind

Sources

NormWind's own description of itself (the product of this site's publisher)