Tailwind Governance Rules

Overview

The Tailwind scanner extracts literal class names from JSX, parses each class into a structured utility, resolves token-form classes through project @theme declarations and bundled Tailwind v4 defaults, then runs governance rules over the resulting facts.

Enable

Start with the Tailwind preset for a project-level scale and an opinionated palette stance:

fragments govern scan --preset tailwind --format summary

Configure palette policy in fragments.config.ts when you want explicit allow or deny patterns:

import { defineConfig } from '@fragments-sdk/core';

export default defineConfig({
  govern: {
    presets: ['tailwind'],
    tailwind: {
      palette: {
        allow: ['brand-*', 'neutral-*'],
        deny: ['red-*', 'green-*', 'blue-*'],
      },
    },
  },
});

Resolver Rules

• tailwind/forbidden-palette: Flags resolved color tokens that match deny patterns or miss allow patterns. Example: bg-red-500 with deny: ["red-*"].
• tailwind/off-scale-spacing-token: Checks resolved spacing tokens against the project spacing scale after unit normalization. Example: p-3 resolving to 12px on a scale without 12.
• tailwind/raw-color-via-token: Flags Tailwind tokens outside the allowed palette when they resolve to raw color literals. Example: bg-red-500 resolving to #ef4444 when allow: ["brand-*"].

Arbitrary Rules

• tailwind/arbitrary-color: Flags raw color literals in arbitrary-value classes such as bg-[#abc123].
• tailwind/arbitrary-spacing: Flags arbitrary margin, padding, gap, and space utilities that are not on scale.

Strict Mode

Unknown-class checks are off by default. Enable them when CI should fail or warn on stale palette references and Tailwind typos:

export default {
  govern: {
    rules: {
      'tailwind/unknown-class': { enabled: true, severity: 'info' },
    },
  },
};

Cloud

Fragments Cloud accepts all Tailwind rule IDs, includes them in findings filters and governance rule settings, and stores class scan counters from the CLI report. Tailwind findings also carry resolver provenance such as theme-css or default in their structured attributes.