Official Tailwind CSS linting with tailwind-lint — validates class usage, detects conflicts, and suggests canonical v4 class names.

​
Quick Start

Run the Tailwind linter: 
pnpm lint:tailwind
This scans all files in apps/panel/src and reports Tailwind CSS issues.

​
What It Checks

​
1. Conflicting Classes

Detects when multiple classes apply the same CSS properties: 
// ❌ Both `start-0` and `left-0` set the left position
<div class="relative start-0 left-0">

​
2. Non-Canonical Class Names (v4 Style)

Suggests v4-preferred canonical names:
IssueSuggestion
flex-shrink-0shrink-0
flex-growgrow
bg-gradient-to-rbg-linear-to-r
!p-2p-2! (important modifier order)
break-wordswrap-break-word
max-w-[60px]max-w-15 (use size tokens)

​
3. Invalid Custom Classes

Reports classes that don’t exist in your Tailwind config.

​
4. CSS Conflicts

Flags when multiple utilities produce conflicting styles.

​
Running the Linter

​
Check for issues

pnpm lint:tailwind
Returns exit code 0 if clean, 1 if issues found.

​
Auto-fix issues

pnpm lint:tailwind --fix
Automatically corrects most fixable issues.

​
Verbose mode for debugging

pnpm lint:tailwind --verbose
Shows detailed information about each issue.

​
JSON output

pnpm lint:tailwind --format json
Useful for CI/CD integration and parsing results programmatically.

​
CI/CD Integration

Add to your deployment pipeline: 
- name: Lint Tailwind CSS
  run: pnpm lint:tailwind
This ensures code quality standards before merging.

​
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

The SolidStart admin panel has tailwind-lint pre-configured: 
{
  "scripts": {
    "lint:tailwind": "tailwind-lint --config apps/panel/src/app.css apps/panel/src"
  },
  "devDependencies": {
    "tailwind-lint": "^0.11.0"
  }
}
The --config flag points to the CSS entry file (app.css), which references the Tailwind config via @config.

​
Manual Installation

If setting up in another app: 
pnpm add -D tailwind-lint
Then configure in package.json: 
{
  "scripts": {
    "lint:tailwind": "tailwind-lint --config src/app.css src"
  }
}

​
Configuration File

tailwind-lint reads settings from:
  1. .vscode/settings.json — IDE-level Tailwind settings
  2. tailwind.config.ts/js — Referenced in your CSS file via @config
Example .vscode/settings.json: 
{
  "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.