Tailwind CLI: The 'important' declaration is not applying to all generated classes

[Stuart88]

I'm importing tailwind like so:

@import "tailwindcss" prefix(tw) important;

A lot of the output is correct, e.g.

.tw\:mx-auto {
  margin-inline: auto !important;
}
.tw\:flex {
  display: flex !important;
}
.tw\:items-center {
  align-items: center !important;
}
.tw\:justify-between {
  justify-content: space-between !important;
}
.tw\:space-x-6 {
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0 !important;
    margin-inline-start: calc(calc(var(--tw-spacing) * 6) * var(--tw-space-x-reverse)) !important;
    margin-inline-end: calc(calc(var(--tw-spacing) * 6) * calc(1 - var(--tw-space-x-reverse))) !important;
  }
}

but pretty much all of the base element classes at the start do not have !important applied:

@layer theme {
  :root, :host {
    --tw-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --tw-color-blue-600: oklch(54.6% 0.245 262.881);
    --tw-color-white: #fff;
    --tw-spacing: 0.25rem;
    --tw-default-font-family: var(--tw-font-sans);
    --tw-default-mono-font-family: var(--tw-font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--tw-default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--tw-default-font-feature-settings, normal);
    font-variation-settings: var(--tw-default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
 //etc...

So now for example the font family in my project is being override by another library, because tailwind doesn't mark the font family as !important

[wongjn]

I think this is by design. The preflight CSS isn't "generated" CSS so to speak, it is just imported CSS.

Also as per the documentation:

If you're adding Tailwind to a project that has existing complex CSS with high specificity rules, you can use the important flag when importing Tailwind to mark all utilities as !important:

Notice how it says "utilities" and not something else, like "all declarations" or something else.

As a workaround, you could import your own version of preflight with everything marked as !important.

[thecrypticace]

@wongjn is correct here — this is by design. Generated utilities are marked with !important but preflight is not.

Instead of using important it would probably be best to make use of cascade layers themselves to achieve the specificity behavior you are after if at all possible. This may mean you need to wrap other styles in an @layer because un-layered styles always win over layered styles.

[Stuart88]

Ah, got it, thanks.

I'm quite new to the tailwind / hardcore css world so 'utilities' to me was just another word for 'all the classes' 😅, and all this talk of layers and cascading means zilch to me.

So I've instead imported the third party library's CSS and modified that one to get rid of the , so tailwind can just do its thing!

Thanks.