Tailwind Vite Plugin does not properly handle variables in class names, but Tailwind Play CDN does.

[fornof]

What version of Tailwind CSS are you using?
v4.1.7

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

What version of Node.js are you using?
node 23.11.0

What browser are you using?
chrome

What operating system are you using?
WSL ubuntu in windows

Reproduction URL

export function ListGrid(props: any) {
    const num = 5
    const size = `grid-cols-${num}`

    return (
            <div className={`grid ${size} gap-0`}>
                <div>a</div>
                 <div>b</div>
                <div>c</div>
                <div>d</div>
                <div>e</div>
                <div>f</div>
                <div>g</div>
                <div>h</div>
                
            </div>
        
    )
}

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

This runs perfectly in the cdn version with script, but with vite plugin, it doesn't render the grid columns at all. just straight down, even though it says the class="grid grid-cols-5 gap0" , it does not have 5 columns (just 1), I tried multiple things like

safelist: [
{
pattern: /grid-cols-./,
}
],
etc. When I tried to show an example to my coworker of it not working , everything was working perfectly in the online playgrounds. So, vite and the plugin for vite is the culprit, possibly due to how it renders in conjunction with react. I'm using react 19.1.0

[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>;
}

[McVyp]

@wongjn is absolutely right! To fix your specific case, here are a few approaches that will work:

export function ListGrid(props: any) {
    const num = 5
    const size = {
        1: 'grid-cols-1',
        2: 'grid-cols-2', 
        3: 'grid-cols-3',
        4: 'grid-cols-4',
        5: 'grid-cols-5',
        6: 'grid-cols-6'
    }[num] || 'grid-cols-1'
    
    return (
        <div className={`grid ${size} gap-0`}>
            <div>a</div>
            <div>b</div>
            <div>c</div>
            <div>d</div>
            <div>e</div>
            <div>f</div>
            <div>g</div>
            <div>h</div>
        </div>
    )
}

Alternative :

export function ListGrid(props: any) {
    const num = 5

    return (
        <div 
            className="grid gap-0" 
            style={{ gridTemplateColumns: `repeat(${num}, 1fr)` }}
        >
            <div>a</div>
            <div>b</div>
            <div>c</div>
            <div>d</div>
            <div>e</div>
            <div>f</div>
            <div>g</div>
            <div>h</div>
        </div>
    )
}