T
TanStack•6mo ago
afraid-scarlet

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
/app
  /lib
    /styles
      app.css
  /routes
  __root.tsx
In /app/lib/styles/app.css: 
@import "tailwindcss" source("../../");
@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,
})
 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
Request Method: GET
Status Code: 404 Not Found
Referrer Policy: strict-origin-when-cross-origin
2 Replies
harsh-harlequin
harsh-harlequin•6mo ago
"fails to load" as in the file is not existing? is there another css file with a different hash?
afraid-scarlet
afraid-scarletOP•6mo ago
My bad, it was actually a configuration issue on my Netlify deployment that was causing the problem

Did you find this page helpful?