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

TanStack•12mo ago•

3 replies

progressive-amaranth

Tailwind V4 not recognize in production

/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

Tailwind V4 not recognize in production

Similar Threads

Tailwind V4 not recognize in production

Similar Threads

Similar Threads

Similar Threads