TailwindCSS v4 generates bloated CSS with styles not used in the project

Question

In my index.css I have these annotations:

@import "tailwindcss" prefix(tw) source(none);
@source "../content_script";

Generated CSS file has styles with names that are not under content_script and not anywhere in my project

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  
  /* ... */
}
/* ... */

How to get rid of unnecessary generated styles? Have them not be generated at all?

It's much better that you highlighted this in a separate question. This way, it's clearly visible that you want to remove TailwindCSS's "reset" styles. These resets are responsible for removing default margins, paddings, borders, outlines, etc. from elements, so you can build your styles from a clean, zero-formatting base. — rozsazoltan
– rozsazoltan, Commented Apr 12 at 7:40

Wongjn · Accepted Answer · 2025-04-11 21:25:21Z

1

Those styles are from Tailwind's preflight:

An opinionated set of base styles for Tailwind projects.

You can remove them as per the documentation:

Remove:

@import "tailwindcss";

And replace with:

@layer theme, base, components, utilities;

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

answered Apr 11 at 21:25

Wongjn

27.1k5 gold badges24 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rozsazoltan · Accepted Answer · 2025-04-12 08:00:58Z

0

Actually, Wongjn described exactly what you need; but it's neither mentioned in the documentation nor here that, in order to preserve prefix() and source(), you need to include them in both imports.

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" layer(utilities) source(none);

@source "../content_script";

tailwindlabs/tailwindcss.com issue #2144: v4 config conversion for prefix and important, selector strategy - GitHub (TailwindCSS Docs)
tailwindlabs/tailwindcss.com issue #2145: how to pass theme(static), source(), prefix(), important when Disable Preflight - GitHub (TailwindCSS Docs)

edited Apr 12 at 8:00

answered Apr 12 at 7:55

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

Collectives™ on Stack Overflow

TailwindCSS v4 generates bloated CSS with styles not used in the project

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related