@apply for nested scss

[bananenbiegerei]

Hey there,
Just wanted to use @apply for nested sass stylings:
.main-content { h1, h2, a:not(.button), p { @apply text-3xl md:text-6xl; } }
The file is compiled successfully but the styles aren't visible.
If I try:
.main-content h1, .main-content h2, .main-content p { @apply text-3xl md:text-6xl; }
it works. But his would be really messy. Any idea?

[Kepro]

@bananenbiegerei check https://tailwindcss.com/docs/using-with-preprocessors#nesting

[simonswiss]

Hey,

Not 100% sure this is the answer since I don't have the visibility here, but you need to make sure that your scss is processed before the CSS runs through PostCSS (and therefore the Tailwind plugin). In other words, PostCSS needs to take the output of your scss pipeline as an entry, and run that through its chain of PostCSS plugins.

If the scss and PostCSS pipelines happen in parallel (or PostCSS first), that could explain why it's not working properly.