---
title: "Class looks like a Tailwind utility but compiles to no CSS (lint/tw-unknown-class)"
description: "lint/tw-unknown-class: Tailwind v4 never errors on unknown classes: `bg-primary` without `--color-primary`, `rounded-card` without `--radius-card`, or…"
canonical: https://void-design.vercel.app/rules/lint/tw-unknown-class
lastModified: 2026-09-16
---

# Class looks like a Tailwind utility but compiles to no CSS

`lint/tw-unknown-class` · severity **error** · category Lint · detected by `void lint` and `void audit`

## Why it matters

Tailwind v4 never errors on unknown classes: `bg-primary` without `--color-primary`, `rounded-card` without `--radius-card`, or `ease-smooth` without `--ease-smooth` silently render nothing. The component looks almost right, so the bug ships. void compiles your real CSS entry and checks every class string against it.

## How to fix it

Define the missing theme variable in `@theme` (namespace decides the utility: `--color-*` → bg/text/border, `--radius-*` → rounded, `--ease-*` → ease, `--font-*` → font, `--shadow-*` → shadow) or switch to an existing token.

## Example

```css
@import "tailwindcss";
@theme {
  --color-primary: oklch(0.62 0.19 272);   /* enables bg-primary, text-primary … */
  --radius-card: 0.75rem;                   /* enables rounded-card */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* enables ease-smooth */
}
```

## References

- https://tailwindcss.com/docs/theme#theme-variable-namespaces
- https://tailwindcss.com/docs/detecting-classes-in-source-files

## More lint rules

`void lint` reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.

- `tw-v3-arbitrary-var` `utility-[--var]` is Tailwind v3 syntax; v4 needs `utility-(--var)` — [lint/tw-v3-arbitrary-var](https://void-design.vercel.app/rules/lint/tw-v3-arbitrary-var)
- `tw-js-config-ignored` `tailwind.config.*` exists but the CSS entry has no `@config` — [lint/tw-js-config-ignored](https://void-design.vercel.app/rules/lint/tw-js-config-ignored)
- `tw-dark-variant-os` `dark:` follows the OS, but the app toggles themes with a class/attribute — [lint/tw-dark-variant-os](https://void-design.vercel.app/rules/lint/tw-dark-variant-os)
- `tw-v3-renamed` Utility whose meaning changed between Tailwind v3 and v4 — [lint/tw-v3-renamed](https://void-design.vercel.app/rules/lint/tw-v3-renamed)
- `tw-important-soup` Many `!important` utilities in one file — [lint/tw-important-soup](https://void-design.vercel.app/rules/lint/tw-important-soup)
- `tw-arbitrary-sprawl` Many arbitrary colors / pixel values bypass the design tokens — [lint/tw-arbitrary-sprawl](https://void-design.vercel.app/rules/lint/tw-arbitrary-sprawl)
- `page-level-use-client` `"use client"` at the top of a page or layout — [lint/page-level-use-client](https://void-design.vercel.app/rules/lint/page-level-use-client)
- `heavy-import` Heavy dependency imported into client code — [lint/heavy-import](https://void-design.vercel.app/rules/lint/heavy-import)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/tw-unknown-class`