TailwindCSS v4 CSS separately per page/component

[a-d-w-s]

Summary

I am using tailwindcss version 4, is it possible to make next js generate css for each page? For example, I have a link

/ - homepage
/contact - contact page

homepage contains many components, and therefore the result will be more css than contacts....
or will there be a component and css will be generated for it

What is a possible implementation? What is the best solution?

Thank You

Additional information

No response

Example

No response

[icyJoseph]

This was a nice investigation. Starting with a freshcreate-next-app, I changed globals.css to:

@import "tailwindcss" source(none);

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

@source "./layout.tsx";

• https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection

This way we scan only the layout, as far as I understand anyway

Then I made home.css:

@import "tailwindcss" source(none);

@source "./page.tsx";

And about/about.css:

@import "tailwindcss" source(none);

@source "./page.tsx";
@source "../../components/**/*.{tsx}";

.tomato {
  @apply text-red-300;
}

And then I was able to get some different stylesheets:

Screen.Recording.2025-11-11.at.10.59.07.mov

I'd start by trying a whole bunch of things with different patterns and get comfortable with this. The default of one single stylesheet, while not optimal, should be just fine for most cases.

After you feel like you are in full control of this pattern, then perhaps, you might find a page or two that would benefit from this. I am not sure this should be the best practice or default to go behavior.

[a-d-w-s]

Thank you, is it possible to load more than one css file? For example, I import a package button from another and I want to load the styles extra for that button....

[icyJoseph]

MMm I guess so, you could import that into the tailwind file too IIRC https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources

[a-d-w-s]

I don't really understand how it works.

I have the following structure:

apps/test-app/src/app/layout.css
apps/test-app/src/app/layout.tsx < import - layout.css
apps/test-app/src/app/page.tsx

packages-ui/test-ui/src/component/button.css 
packages-ui/test-ui/src/component/button.tsx < import button.css

layout.css

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

button.css

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
@source "./button.tsx";

apps/test-app/src/app/page.tsx

import { Button } from '@cme/ui-test/src/component/button'

export default function Home() {
    return (
        <div className="p-20 bg-amber-300">
            <Button>button</Button>
        </div>
    );
}

packages-ui/test-ui/src/component/button.tsx

export function Button({ className, children }: ButtonProps) {
    return (
        <div className='bg-red-500'>
            <button className={className}>
                {children}
            </button>
        </div>
    )
}

and result if call http://localhost:3000/

This is OK

/* [project]/apps/test-app/src/app/layout.css [app-client] (css) */
@layer theme {
  :root, :host {
    --color-amber-300: #ffd236;
    --spacing: .25rem;
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-amber-300: lab(86.4156% 6.13147 78.3961);
    }
  }
}

@layer utilities {
  .bg-amber-300 {
    background-color: var(--color-amber-300);
  }

  .p-20 {
    padding: calc(var(--spacing) * 20);
  }
}

and next css is NOT OK. Contain classes page.tsx

/* [project]/packages-ui/test-ui/src/component/button.css [app-client] (css) */
@layer theme {
  :root, :host {
    --color-red-500: #fb2c36;
    --color-amber-300: #ffd236;
    --spacing: .25rem;
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-red-500: lab(55.4814% 75.0732 48.8528);
      --color-amber-300: lab(86.4156% 6.13147 78.3961);
    }
  }
}

@layer utilities {
  .bg-amber-300 {
    background-color: var(--color-amber-300);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .p-20 {
    padding: calc(var(--spacing) * 20);
  }
}

The CSS file should only contain color:

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

I'm preparing a large project that will have many components and I would like to have it always separate so that there are no unnecessary styles... I would like to have it so that if a component from another package is loaded on the page, the css file for that component is loaded. Maybe there is a problem with how I'm using tailwindcss? Or does this have to be solved differently? But I would like to use tailwindcss, but it must be able to solve it with separate CSS per component.

[icyJoseph]

I think this might be the wrong optimization right now, is it even a problem for your app at this point? Ever more so, if you are having trouble following the logic, and I think it is pretty easy for a colleague to set something up incorrectly.

I guess the issue here depends on what you have on the button.css file.

[a-d-w-s]

You're right.... so if I wanted to have specific styles, I could prefix the class in the component. And it could work like this:

I would compile the style in the component package, to /dist/styles.css

And where I have, for example, a button - I would import import '../../dist/styles.css'

I tried it and it behaves exactly as I would expect - in the global style I have everything related to the application, including the tailwindcss class, and where the button is loaded, the extra style is loaded from that package, where I only have specific styles for the button.

[icyJoseph]

Nice! Well don't forget to mark as answered, not sure which comment fits best 😅 this was an itch I had for a while, I'll try to do it on my site first and then maybe write a bit longer form about it.