Tailwind CSS Linting

​

Quick Start

pnpm lint:tailwind

​

What It Checks

​

1. Conflicting Classes

// ❌ Both `start-0` and `left-0` set the left position
<div class="relative start-0 left-0">

​

2. Non-Canonical Class Names (v4 Style)

​

3. Invalid Custom Classes

​

4. CSS Conflicts

​

Running the Linter

​

Check for issues

pnpm lint:tailwind

​

Auto-fix issues

pnpm lint:tailwind --fix

​

Verbose mode for debugging

pnpm lint:tailwind --verbose

​

JSON output

pnpm lint:tailwind --format json

​

CI/CD Integration

- name: Lint Tailwind CSS
  run: pnpm lint:tailwind

​

Why tailwind-lint?

• ✅ Official Tailwind CSS linting tool
• ✅ Version support — Works with Tailwind v3 & v4
• ✅ Smart detection — Catches conflicting classes, not just syntax
• ✅ Canonical names — Suggests v4-preferred class names
• ✅ Auto-fix — Can automatically resolve many issues
• ✅ Monorepo-friendly — Better path resolution than ESLint plugins

​

Installation & Configuration

​

Already Configured

{
  "scripts": {
    "lint:tailwind": "tailwind-lint --config apps/panel/src/app.css apps/panel/src"
  },
  "devDependencies": {
    "tailwind-lint": "^0.11.0"
  }
}

​

Manual Installation

pnpm add -D tailwind-lint

{
  "scripts": {
    "lint:tailwind": "tailwind-lint --config src/app.css src"
  }
}

​

Configuration File

1. .vscode/settings.json — IDE-level Tailwind settings
2. tailwind.config.ts/js — Referenced in your CSS file via @config

{
  "tailwindCSS.lint.cssConflict": "warning",
  "tailwindCSS.lint.invalidApply": "error",
  "tailwindCSS.lint.invalidScreen": "warning"
}

​

Example Issues & Fixes

​

Conflicting Classes

// ❌ Issue: 'end' and 'end' conflict
<button class="relative end-0 right-0">Action</button>

// ✅ Fixed
<button class="relative end-0">Action</button>

​

Non-Canonical Names

// ❌ Issue: Not v4 canonical
<div class="flex-shrink-0 !p-2 bg-gradient-to-r">
  Content
</div>

// ✅ Fixed
<div class="shrink-0 p-2! bg-linear-to-r">
  Content
</div>

​

Important Modifier Order

// ❌ v3 style
<span class="hover:!text-primary">Hover me</span>

// ✅ v4 style (preferred)
<span class="hover:text-primary!">Hover me</span>

​

Notes

• Style preferences — Some warnings suggest style preferences (e.g., canonical names). You can ignore if intentional.
• Workspace settings — The tool reads your IDE settings from .vscode/settings.json if available.
• Auto-fix limitations — Some complex conflicts require manual fixing.
• Performance — Linting is fast even on large codebases; safe to run frequently.

​

Related

• Tailwind CSS Documentation
• ESLint Integration — For TypeScript/JavaScript linting
• Code Quality Standards — Quality guidelines