rules-tailwindcss

RISK: A bare './**/*' content glob scans node_modules, .env, and build artifacts — secrets can leak into the generated CSS as class strings, and builds become very slow. FIX: Restrict to source dirs, e.g. ['./src/**/*.{js,ts,jsx,tsx,html}'].

RISK: Building safelist from a variable/import can pull untrusted strings into CSS generation, bloating output or enabling regex DoS. FIX: Inline a static array of safelisted classes or {pattern: /.../} entries.

RISK: Interpolating values into a Tailwind arbitrary url() class enables CSS-based data exfiltration (the URL is fetched by the browser even though React escapes attributes). FIX: Use a fixed allow-list of asset URLs or set the background via a sanitized inline style with a parsed URL.

RISK: javascript: URLs inside Tailwind arbitrary values execute in some legacy contexts and indicate an XSS sink. FIX: Remove the javascript: URL; use event handlers in JS instead.

RISK: 'mode: jit' was removed — JIT is always-on since v3.0 and the key is invalid in v4. FIX: Delete the mode key entirely.

RISK: Tailwind Play CDN is dev-only per official docs — it ships the full generator, runs at runtime, and is a supply-chain dependency on a third-party origin. FIX: Install tailwindcss as a build dependency (npm i tailwindcss @tailwindcss/postcss) and compile locally.

RISK: PostCSS <8.4.31 is vulnerable to CVE-2023-44270 (ReDoS in line/source-map parsing). FIX: Upgrade to postcss ^8.4.31 or newer.

RISK: A '.*' safelist disables purging and ships a multi-MB CSS bundle. FIX: Use precise class names or scoped {pattern: /^bg-(red|blue)-\d+$/} entries.

RISK: In Tailwind v4, @apply inside CSS Modules / scoped stylesheets needs an explicit '@reference' to the main stylesheet or it silently produces no styles. FIX: Add '@reference "../app.css";' (or your entry) at the top of the module.

RISK: @apply with template-interpolated class names executes at build time on attacker-controllable input and can pull arbitrary utilities into a selector. FIX: Use only static class names with @apply; compose dynamic styles in JS.

RISK: decoration-slice/clone utilities were removed in v4. FIX: Use box-decoration-slice / box-decoration-clone.

RISK: flex-shrink-* and flex-grow-* were renamed to shrink-* / grow-* in Tailwind v4. FIX: Replace with shrink-0, grow, etc.

RISK: bg-opacity-*/text-opacity-*/etc were removed in Tailwind v4. FIX: Use slash color syntax such as bg-black/50, text-white/75.

RISK: Dynamically constructing Tailwind classes via concatenation/interpolation breaks JIT detection so styles are missing in production. FIX: Use complete class strings, a clsx/cva mapping, or an explicit safelist.

RISK: The 'purge' config key was renamed to 'content' in v3 and removed in v4. FIX: Rename to 'content' (v3) or migrate to v4 CSS-first @source directives.

RISK: The @tailwind base/components/utilities directives are deprecated in Tailwind v4. FIX: Replace with a single '@import "tailwindcss";' at the top of your entry CSS (see v4 upgrade guide).

RISK: In Tailwind v4 the PostCSS plugin moved to the separate '@tailwindcss/postcss' package; using 'tailwindcss' directly in postcss.config will fail to build. FIX: Install @tailwindcss/postcss and reference it instead.