Ring not working with @apply in tailwindcss v3

[hi-reeve]

What version of Tailwind CSS are you using?

For example: v3.0.0

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

For example: postcss 8.4.4, Vue 3.2.23, Vite 2.7.1,sass 1.44.0

What version of Node.js are you using?

For example: v14.0.0

What browser are you using?

Brave

What operating system are you using?
Windows 11

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-bnujfo?file=src/components/HelloWorld.vue

Describe your issue

Ring not working if using @apply.
it does work normally when i move it to the html classes attribute.

[agusterodin]

Possibly related to #6194

[hi-reeve]

Possibly related to #6194

oh right, didn't check it. thankyou!

[agusterodin]

Honestly I would reopen your issue. Yours is more general than mine and mine hasn't gotten any attention for a few weeks. Plus you have a repro set up.

[hi-reeve]

Honestly I would reopen your issue. Yours is more general than mine and mine hasn't gotten any attention for a few weeks. Plus you have a repro set up.

allright. hope this got fix asap, since this is such a critical problem

[reinink]

Hey folks! This should be fixed now as of v3.0.2 👍

Ultimately these are the same issues: #6409 #6391 #6437

And the fix: #6461

Please let us know if you're still experiencing this issue on the latest version.

[solamichealolawale]

I am using ^3.0.12 and I am still having this issue on production
I am using Nuxtjs with Tailwind v3 and whenever I ran npm run generate it doesn't show

[Francismori7]

I am using ^3.0.12 and I am still having this issue on production I am using Nuxtjs with Tailwind v3 and whenever I ran npm run generate it doesn't show

Same here. In product on GatsbyCloud, the ring styles are non-functioning, using @apply or not.

[filipcoja]

For me, it still doesn't work, I have to manually add

--tw-ring-inset: var(--tw-empty, );

so that the box-shadow property is working.. since --tw-ring-inset is not defined and thus somehow breaks the box-shadow probably

I'm using the Version 3.0.22

EDIT: Okay now the custom hack also stopped working, don't ask me why.

[chrismllr]

Can confirm on version 3.0.22... Only seeing the issue in production build of the css.

I am using ember, which has an extra "minifyCss" step within the build process using broccoli-clean-css, which wraps an outdated version of clean-css.

The issue within clean-css (1196) looks to have been an issue with comments within variables -- This tracks, as this entire block of css was missing from the non-working minified CSS, but present in the working CSS, and these all look to have comments within the variables when un-minified:

*,
:after,
:before {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

Not sure if anyone else still having this issue is using clean-css (directly or indirectly) but adding a resolution to version 5.4.3 of clean-css fixed this issue for me:

"resolutions": {
    "clean-css": "5.2.4"
  }

[boris-petrov]

I have a similar problem as @chrismllr - I'm also using Ember but not using tailwindcss. I had to fix clean-css to version 5.2.2. Anything above that (5.2.3, 5.2.4, 5.3.0) don't work.

[daguitosama]

Same problem (ring disapears from production build) in tailwindcss 3.0.23 .

Solved by downgrading to 3.0.10

"tailwindcss": "3.0.10"

Using with Nuxt is @nuxt/tailwindcss 5.X and works fine.
Im pining 3.0.10 for now, looking forward to know if is safe to keep goin with the tailwindcss edge.

[raymolla7]

I can't get the ring to show up in Prod even after downgrading to 3.0.10

[pthompson]

@adamwathan I'm having the same issue with ring not working in prod with Tailwind 3.0.24. Downgrading to 3.0.10 does not help, as it did for @D4G0. Is there a workaround?

[pthompson]

I found that if I set a focus border color along with the focus ring that it worked. For example:

  .focus-ring {
    @apply focus:outline-none focus:border-gray-800 focus:ring-gray-800 focus:ring focus:ring-offset-2;
  }

[raymolla7]

@pthompson I just tried what you did and it still not working in production for me :(

This is what I tried:
className='w-12 h-12 rounded-full outline-none border-gray-800 ring-orange ring ring-offset-1'

Did you try this on 3.0.24 or 3.0.10 ?

[pthompson]

@raymolla7 I got it to work with 3.0.10. 3.0.24 still does not work for me in production. I struggled with it for a couple of days, so I feel your pain. I've always used ring in conjunction with focus state, so I'm not sure about your use case.

[daguitosama]

He was clear, give the man a minimal reproduction people.

[pthompson]

It is difficult to create a repro as the issue only manifests itself in production. It works perfectly in dev and on the playground.

[raymolla7]

@D4G0 @pthompson I've created a discussion post where I have an example link on prod where the ring is not showing up.

[thecrypticace]

@raymolla7 @D4G0 @pthompson Hey, this issue has had some uptick so we're looking around. I've replied to the discussion. opened above. A reproduction of some kind is definitely necessary here and I'm very aware that a reproduction is difficult since it's a production only problem.

What would be helpful is a repo that is using the exact same tools and versions as a repo that does have that problem in production. Even if you can't "test" a production version of that reproduction yourself that should be enough to point us in the right direction.

The major difference between dev and prod builds in most tools are:

• You can't use the built-in server (though not necessarily always the case)
• Production builds minify CSS where as dev builds generally leave the CSS untouched

We can definitely handle the dev server situation for testing production builds so I would not worry about that at all. Tailwind CSS itself does not output different results in development versus production. The only instances of NODE_ENV in our codebase are in our integration tests and one in sharedState which is currently unused (it's useful for testing purposes while we work on Tailwind itself). However, the tools processing the CSS Tailwind generates may handle it differently like minifying, eliminating duplicate properties, etc…

My guess is that tools are seeing --tw-ring-inset: ;, incorrectly think that it is "empty", and are removing it when they should not be. If this is the case then it's highly likely that font variant utilities like numeric, tabular-nums, ordinal, etc (examples here: https://tailwindcss.com/docs/font-variant-numeric#resetting-numeric-font-variants) also don't work.

[pthompson]

@thecrypticace Okay, I will work on putting something together.

[pthompson]

@thecrypticace I created a repo by copying my project and stripping out the product bits. The build environment is the same. You can find it at https://github.com/pthompson/ring-issue-repro.

Thanks for your help in this. Let me know if you need anything else.

[adamwathan]

@pthompson Only looking at this for two seconds before my kids wake up but looking here:

https://github.com/pthompson/ring-issue-repro/blob/main/apps/ring_issue_repro_web/assets/package-lock.json#L2716

Your project is using an old version of cssnano which I'm guessing is the issue. cssnano is on version 5.1.11 now, and your project is using 4.1.11.

You can test if this is the issue by disabling this optimization block in your webpack config and seeing if the production builds are fine at that point:

https://github.com/pthompson/ring-issue-repro/blob/main/apps/ring_issue_repro_web/assets/webpack.config.js#L13-L18

[Francismori7]

@pthompson Only looking at this for two seconds before my kids wake up but looking here:

https://github.com/pthompson/ring-issue-repro/blob/main/apps/ring_issue_repro_web/assets/package-lock.json#L2716

Your project is using an old version of cssnano which I'm guessing is the issue. cssnano is on version 5.1.11 now, and your project is using 4.1.11.

You can test if this is the issue by disabling this optimization block in your webpack config and seeing if the production builds are fine at that point:

https://github.com/pthompson/ring-issue-repro/blob/main/apps/ring_issue_repro_web/assets/webpack.config.js#L13-L18

To be fair, I've had the same issue with a basic Gatsby app, no webpack config difference and certainly have not required cssnano manually, just thought I'd throw it out there

[pthompson]

@adamwathan You were spot-on, that fixed it. I don't use cssnano directly, but the optimize-css-assets-webpack-plugin requires it. It depends on cssnano v4.1.10, so I will try using the css-minimizer-webpack-plugin instead.

Thanks for your help and everything you do!

[adamwathan]

@pthompson Only looking at this for two seconds before my kids wake up but looking here:
https://github.com/pthompson/ring-issue-repro/blob/main/apps/ring_issue_repro_web/assets/package-lock.json#L2716
Your project is using an old version of cssnano which I'm guessing is the issue. cssnano is on version 5.1.11 now, and your project is using 4.1.11.
You can test if this is the issue by disabling this optimization block in your webpack config and seeing if the production builds are fine at that point:
https://github.com/pthompson/ring-issue-repro/blob/main/apps/ring_issue_repro_web/assets/webpack.config.js#L13-L18

To be fair, I've had the same issue with a basic Gatsby app, no webpack config difference and certainly have not required cssnano manually, just thought I'd throw it out there

If you can provide a reproduction I’m happy to look, it is almost certainly because of a bug in whatever versions of whatever minifier Gatsby is using to minify your CSS though, the output Tailwind generates is perfectly understood by browsers.