Using @apply with any class that sets @defaults (transforms/filters/rings/border) doesn't work in CSS modules/Svelte components/Vue components

[charkour]

First, thank you for this awesome tool. Tailwind is amazing!

What version of Tailwind CSS are you using?

v3.0.1

What build tool (or framework if it abstracts the build tool) are you using?

next: 12.0.7
postcss: 8.4.4
autoprefixer: 10.4.0

What version of Node.js are you using?

v16.13.0 and v14.18.x

What browser are you using?

Chrome, Safari, Brave

What operating system are you using?

macOS

Reproduction URL

Reproduction repo

Describe your issue

When applying the same tailwind border class to an element, the border color differs depending on how the styles are applied. Using CSS modules with @apply, the border color will be black, but when applying tailwind classes inline, the border will be gray (or the default color in the tailwind config). In tailwind v2, this was not a bug. And the update guide to v3 did not mention this as a breaking change. Thanks!

home.module.css

.card {
  /* Here the same styles are applied, but the borders are different colors. */
  @apply h-36 w-36 border rounded p-4 m-4;
}

index.tsx

const Home () => {
  return (
    <>
      <article className={styles.card}>
        Styled with CSS Modules + Tailwind
      </article>
      <article className="h-36 w-36 border rounded p-4 m-4">
        Styled with inline Tailwind
      </article>
    </>
  )
}

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      borderColor: {
        // removing this default border color will only change the border color of the element using inline tailwind classnames
        DEFAULT: 'blue'
      }
    },
  },
  plugins: [],
}

Here the default border color property is set in the tailwind config.

Here no default border color property is set

Downgrading to v2 works as expected.

Here the default border color property is set in the tailwind config.

Here no default border color property is set

[charkour]

It seems others are experiencing other issues with tailwind v3 and the @apply directive.

• Utility classes can't be built with @apply and custom props #6321
• Ring not working with @apply in tailwindcss v3 #6328
• Focus visible doesn't work with @apply in CSS module #6194
• Using @apply does not work with dark: variant in CSS module/css file  #6388
• Tailwind V3: @apply ring... does not work anymore #6391
• Tailwind v3, Vue, Vite, @apply any transform #6342

[adamwathan]

Just a note for myself, this is likely because CSS modules are processed in isolation and Tailwind doesn’t know to collect the class name of the class using apply and add it to the @defaults rule that is injected in the base layer. This is probably not fixable without reintroducing the serious browser performance issue that @defaults was introduced to solve.

Likely the best solution to this particular problem is to document what’s happening and explain the workaround which would involve explicitly including a border color when using @apply to apply border when inside a CSS module, Svelte component style block, or Vue component style block.

[charkour]

Not trying to interject on your personal note; my team is using the workaround of explicitly including a border color when using @apply as you suggested.

Thanks for explaining the technical portion of the problem!

[adamwathan]

I've updated the title to better reflect the underlying issue so others can find it, going to tag a patch this morning that mitigates it with a bandaid solution until we can come up with something better 👍🏻

[adamwathan]

Hey folks! We've patched a fix for this in v3.0.2 👍 It involved disabling this new optimizeUniversalDefaults feature which is a meaningful performance boost in the browser on huge pages with lots of HTML, so that sucks, but we almost have a fix in place that will allow us to re-enable it for v3.0.3.

[charkour]

Thank you for addressing this quickly and for the updates!

[kirbby]

Thanks for the quick fix, for the transform it works now.
I'm still having trouble with filter invert while using @apply, if I should open a new issue for this please let me know.

img { @apply w-9 h-9 invert; }

--tw-filter is not getting generated.
When I use normal CSS filter: invert(100%) or class="invert" on the tag itself, it works and generates the --tw-filter as well.
Then I can change it back to tailwinds invert and it works (until I restart the app), because the variable is there.

img { @apply w-9 h-9; filter: invert(100%); }

Is there still a problem or am I doing it wrong?

[agusterodin]

@adamwathan just checked, works in Chrome still broken in Safari