Tailwind 3.x shadows and rings removed when NuxtJs extractCSS is set to true

[danielrjames]

What version of Tailwind CSS are you using?

3.0.23

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

nuxt 2.15.8 using the official installation guide: https://tailwindcss.com/docs/guides/nuxtjs

What version of Node.js are you using?

v16

What browser are you using?

Chrome & Firefox

What operating system are you using?

Windows 10

Reproduction URL

https://github.com/danielrjames/tailwind-test

• Added a simple header with a shadow and a button with a ring on the index.vue page. Toggle the extractCSS option in nuxt.config.js to demonstrate the bug.

Describe your issue

Nuxt's extractCSS build option removes Tailwind v3 shadow and ring classes. I used this build setting with Tailwind v2 shadows and rings with no issue.

https://nuxtjs.org/docs/configuration-glossary/configuration-build/#extractcss

[RobinMalfait]

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

The issue is not that it gets rid of the shadow related classes because they still exist:

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

The issue is that it got rid of some of the required css variables:

Notice the greyed out css variables.

This is either a nuxt.js bug or a cssnano bug because we've seen similar reports of these. e.g.: #7801

But this is not a Tailwind bug, therefore going to close this one.

Side note: Tailwind is small in production so you probably don't even need this "optimisation". More info: https://tailwindcss.com/docs/optimizing-for-production

[ThibodeauJF]

It's something that wasn't an issue before these changes #6926
Where as --tw-ring-inset was set to var(--tw-empty,/*!*/ /*!*/) instead of being an empty value, and it wasn't stripped out, making the output invalid for box-shadow. We had styles disappear after upgrading tailwind version. (Our stack is using Tailwind with Postcss & StencilJS).

If this is was a cssnano bug, they fixed it recently in version 5.1.2 cssnano/cssnano@4ed3967

[jasperverbeet]

Upgrading cssnano as a peer dependency of a Nuxt project seems resolve the issue for Nuxt2 users, see my comment here #7044 (comment).