[v4.1] Missing Classes with Vite – Styles not applied in dynamically loaded components

[WaPasc]

Problem Summary

Using Tailwind CSS v4.1 and @tailwindcss/vite, I started experiencing inconsistent styling behavior. Tailwind utility classes were not being applied to components that were not mounted initially, especially modals or conditionally rendered components.

Classes like the following were missing entirely from the compiled CSS:

• mr-auto, border, shadow
• space-y-2, space-y-1, etc.
• flex-row
• Several bg-* colors such as bg-yellow-500, bg-orange-500, bg-amber-*

This caused layouts to break or appear unstyled in modals or other nested components that aren’t immediately visible.

Cause

Tailwind v4 injects styles only for classes used in the current render tree. This means:

• Classes used in unmounted components (like modals) are not detected until those components mount.
• Styles for those classes are therefore not present in the CSS, unless triggered at runtime.

Temporary Fix (Seeder Component)

I worked around this by adding a hidden seeder component in the App.tsx file:

const TailwindClassSeeder = () => (
  <div className="hidden">
    {/* Force these classes to be included */}
    <div className="mr-auto ml-auto border shadow space-y-1 space-y-2 space-y-3">
      <div className="flex-row bg-amber-500 bg-amber-700 bg-yellow-500 bg-orange-500">
        <div className="bg-amber-100 bg-amber-200 bg-amber-300 bg-amber-400 bg-amber-600 bg-amber-800 bg-amber-900"></div>
      </div>
    </div>
  </div>
);

---

Has someone a solution for this? Initially everything was working it was only later on I started to experience this. I didn't find anything that could cause it. I went back in commits and checked things that could effect it + I reinstalled everything completely and removed the cache and so on.

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.

[WaPasc]

I can give you snippets what styles aren't properly rendered:

For example:
In the following snippet the styles like mr-auto, bg-red-500 and so on aren't applied. If I use the seeder class it works fine.

      <ul className="space-y-2">
        {data.map((ds: any) => (
          <li key={ds.name} className="border p-3 rounded shadow">
            <div className='flex flex-row justify-start'>


              <div className='flex flex-col mr-auto'>
                <p><strong>{ds.name}</strong></p>
                <p className="text-gray-600 text-sm">Path: {ds.path}</p>
              </div>
              <Button className='bg-red-500 hover:bg-red-400' onClick={() => handleDelete(ds.name)}>Delete</Button>
            </div>

          </li>
        ))}
      </ul>

Here the same thing for some of the styles.

                    {!datasetName && (
                        <div className="flex items-center">
                            <span className="mr-4 text-gray-500 dark:text-gray-400">
                                <FaFolderOpen size={24} />
                            </span>
                            <input
                                type="text"
                                placeholder="Dataset name (e.g., my-dataset-v1)"
                                className="w-full rounded-lg border-2 border-gray-300 p-3 text-gray-800 transition-colors duration-200 focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-blue-400"
                                value={targetDatasetName}
                                onChange={(e) => setTargetDatasetName(e.target.value)}
                            />
                        </div>
                    )}

                    {targetDatasetName && (
                        <div className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
                            <p className="text-sm text-blue-700 dark:text-blue-300">
                                <span className="font-semibold">Files will be uploaded to:</span>
                                <br />
                                <code className="text-xs">...{targetDatasetName}/</code>
                            </p>
                        </div>
                    )}

Is this because the components are dynamically loaded, and how to fix it, because I had these specific snippets before and they worked fine at first.

[wongjn]

That looks fine to me. Unfortunately, it would be difficult for me to help diagnose the problem without a reproduction.

[WaPasc]

I'll look further into it tomorrow.

According to claude sonnet 4:
Because I use a fetch and then iterate over the array to render those elements, causes the tailwind to be compiled before those elements are rendered. He thinks the same problem occurs using useEffect. His solution would be to use @source "./src/components**/*.{js,jsx,ts.tsx}"; in the main.css file.

I'll try this out tomorrow and let you know.

[WaPasc]

The @source rule didn't work. I have uninstalled @tailwindcss/vite and installed tailwind again, but now using npm install -D tailwindcss@3 postcss autoprefixer. This seems to have fixed the problem.

Another way was to safelist all the styles I use with @source inline("") in the index.css file, but this is too much to manager for my use case.