---
title: "Class name built at runtime (tailwind/dynamic-class)"
description: "Tailwind generates CSS only for class names it finds whole in the source: `bg-${color}-500` has no styles."
url: http://localhost:4173/rules/tailwind/dynamic-class
updated: 2026-11-11
---

# Class name built at runtime

> `tailwind/dynamic-class` is a vetd rule. It flags: Class name built at runtime. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `tailwind/dynamic-class` |
| Severity | warning |
| Group | Tailwind CSS |
| Tags | correctness |

## Why it matters

Tailwind generates CSS only for class names it finds whole in the source: `bg-${color}-500` has no styles.

## How to fix it

Map values to full class names: { red: "bg-red-500", … }[color].

## Credit

Based on work by:

- [Tailwind Labs](https://tailwindcss.com): Tailwind only generates CSS for class names that appear as complete strings in source files.

## References

- [Detecting classes in source files - Core concepts - Tailwind CSS](https://tailwindcss.com/docs/detecting-classes-in-source-files), Tailwind CSS

## Related rules

- [`tailwind/conflicting-classes`](http://localhost:4173/rules/tailwind/conflicting-classes.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "tailwind/dynamic-class" }`. CLI: `npx vetd explain tailwind/dynamic-class`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`shadcn/base-ui-as-child`](http://localhost:4173/rules/shadcn/base-ui-as-child.md) · Next: [`tailwind/conflicting-classes`](http://localhost:4173/rules/tailwind/conflicting-classes.md)