TanStackT
TanStack•10mo ago•
3 replies
progressive-amaranth

Tailwind V4 not recognize in production

I'm encountering an issue with Tailwind CSS in production. Everything works perfectly in local development — my Tailwind classes are recognized and applied correctly. However, in production, the classes aren't recognized, and the app.css stylesheet can't be loaded.

I've already tried adding the source function, but that didn't resolve the issue. I'm deploying the project on Netlify, and aside from this Tailwind-related problem, everything else works fine.

Here's my project structure:
/app
  /lib
    /styles
      app.css
  /routes
  __root.tsx


In /app/lib/styles/app.css:
@import "tailwindcss" source("../../");


In /app/routes/__root.tsx:
 import appCss from '../lib/styles/app.css?url'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'TanStack Start Starter' },
    ],
    links: [
      { rel: 'stylesheet', href: appCss },
    ],
  }),
  component: RootComponent,
})


In production, the following CSS file fails to load: https://test.netlify.app/_build/assets/app-DWwm2m29.css
Request Method: GET
Status Code: 404 Not Found
Referrer Policy: strict-origin-when-cross-origin
Was this page helpful?