Tailwind V3: @apply ring... does not work anymore

[madebyfabian]

What version of Tailwind CSS are you using?

For example: v3.0.1

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

vite.js 2, vue 3

"@tailwindcss/line-clamp": "^0.3.0",
"@types/tailwindcss": "^2.2.4",
"@vitejs/plugin-vue": "^1.6.0",
"autoprefixer": "^10.4.0",
"postcss-nested-ancestors": "^2.0.0",
"tailwindcss": "^3.0.1",
"vite": "^2.5.3",

What version of Node.js are you using?

v15.8.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Can't be reproduced in Tailwind Play, since it works there. https://play.tailwindcss.com/Ft82oCeXrQ?file=css

Describe your issue

The issue is that all the ring-* utilities don't work anymore in Tailwind v3, when using @apply inside a Vue.js SFC. My code:
.classname { @apply ring ring-offset-2 ring-green-700 ring-offset-gray-800; }
In Tailwind v2, this showed me the ring. In v3, this shows nothing. It's similar to the issue #6342 This is how the output looks in v2:

with computed looking like this:

In v3 however, it looks like this:

with computed looking like this:

so similar to issue #6342, it never gets applied actually, though not visible.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

It's hard to tell without looking at actual source code, can you create a minimal reproduction repo and share it?

In the meantime, my guess is that you don't have @tailwind base;, you should make sure that exists. Upgrade guide: https://tailwindcss.com/docs/upgrade-guide#base-layer-must-be-present

[madebyfabian]

@RobinMalfait Hey, thanks so much for the quick response! I was really happy to see Tailwind v3 being released and I was going through the upgrade guide very carefully. I did everything in the guide. My CSS starts with

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
...

I will be sure to create a reproduction repo as soon as possible and will add it to here.

[agusterodin]

Same issue here. Broke after 3.0alpha-1

[talkenson]

Same issue. Can reproduce on 3.0.1.
Simply applying these rules breaks all the ring.

IMPORTANT!!!
In previous case shadow won't be applied
So, to add shadows I need to delete all ring-* rules

[stevelacey]

I am also seeing ring issues that I'm yet to fully understand, what seems to be happening is that nothing works unless you also supply inset and offset classes, this works, and looks the same as what I had before, except the ring has to be inset:

@apply ring-2 ring-white ring-inset ring-offset-0 ring-offset-white;

As far as I can see, if any one of the shadow css vars is undefined, the box-shadow rule is kaput, maybe they had default values in 2.0.

For those looking for a quick hack to get a non-inset ring working, this utility helps:

.ring-outset {
  // Temporary fix for ring issue in Tailwind 3.0
  // https://github.com/tailwindlabs/tailwindcss/issues/6391#issuecomment-991862726
  @apply ring-offset-0 ring-offset-white;
  --tw-ring-inset: ;
}

[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.

Ultimately this is the same as this issue: #6409

[madebyfabian]

@adamwathan awesome, thank you all so much!

[stevelacey]

@adamwathan worked perfect, thank you! 🙏🏼

[ShawnFarsai]

Hey @adamwathan ,

I'm guessing things have changed since 2021.

I'm running into an issue where using the border utility class on it's own doesn't work and border-solid needs to be applied. Conclusion is border-style: solid for the preflight is not getting applied- even though the rest of preflight works.

Additionally, ring utility classes outright don't work.

I saw you mention disabling optimizeUniversalDefaults in 2021. For the heck of it i tried setting it to true in my tailwind.config and that fixed our problem. But I have no idea why... hahaha