[V4] Custom Colors Not Displaying in Tailwind CSS v4 with Vite Setup

[lkingch310]

What version of Tailwind CSS are you using?

v4.0.4

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.1.0

What version of Node.js are you using?

22.13.1

What browser are you using?

Chrome, Edge

What operating system are you using?

For example: Windows

Reproduction URL

Playground support HTML+CSS, but not TSX

Describe your issue

Environment: Vite + Tailwind CSS

npm create vite@latest
# (react+ts)

npm install tailwindcss @tailwindcss/vite

Configuration:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 12222
  }
});

@import "tailwindcss";

@theme {
  --color-primary: #0024d3;
  --color-info: #00a9eb;
  --color-danger: #f06473;
}

Issue:

1. None of the custom colors are displaying. App.tsx

interface TextProps {
  type: "primary" | "info" | "danger";
  text: string;
}
const Text: React.FC<TextProps> = ({ type, text }) => {
  const className = `text-${type}`;
  return <span className={className}>{text}</span>;
};

function App() {
  const typeInfo = "text-info";
  const typePrimary = "primary";
  return (
    <>
      <div className="flex flex-col gap-2">
        <Text type={typePrimary} text="This is a primary text" />
        <Text type="info" text="This is an info text" />
        <Text type="danger" text="This is a danger text" />
      </div>
    </>
  );
}

export default App;

2. info and danger colors display. App.tsx

interface TextProps {
  type: "primary" | "info" | "danger";
  text: string;
}
const Text: React.FC<TextProps> = ({ type, text }) => {
  const className = `text-${type}`;
  return <span className={className}>{text}</span>;
};

function App() {
  const typeInfo = "text-info";
  const typePrimary = "primary";
  return (
    <>
      <div className="flex flex-col gap-2">
        <Text type={typePrimary} text="This is a primary text" />
        <Text type="info" text="This is an info text" />
        <Text type="danger" text="This is a danger text" />
      </div>

      <div className="flex flex-col gap-2">
        <span className={`text-${typePrimary}`}>This is a primary text</span>
        <span className={`${typeInfo}`}>This is an info text</span>
        <span className="text-danger">This is a danger text</span>
      </div>
    </>
  );
}

export default App;

Expected Result:

All custom colors should display correctly.

[wongjn]

As per the documentation:

Since Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using.

❌ Don't construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.

Instead, make sure any class names you’re using exist in full:

✅ Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

If you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes:

❌ Don't use props to build class names dynamically

function Button({ color, children }) {
  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}