Does Tailwind CSS tree-shaking work with @apply rules inside *.scss modules?

Question

It's my understanding that Tailwind CSS will tree-shake to only provide bundled CSS with the classes that I'm using. So in the following example:

<div class="flex flex-row">
</div>

...the final Tailwind bundle would only include:

.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}

However, I'm wondering if the @apply rule works the same? So if I instead had:

import styles from 'styles.scss';

export default function Example() {
  return (
    <div className={ styles.flex_row }>
    </div>
  )
}

and...

.flex_row {
  @apply flex flex-row;
}

Would this still tree-shake to give me the minimal bundle of Tailwind classes used?

I've Googled and read through the Tailwind docs, but I haven't been able to turn anything up. I'll see if I can look at the outputted bundle to see if it's evident in there...

Answer 1

Consider defining the rule in a @layer base/components/utilities rule and ensuring Tailwind processes the resulting CSS file after Sass has compiled it. This makes the CSS rule "known" to Tailwind, and thus Tailwind will process and "tree-shake" it.

---

As an aside, you may also wish to avoid @apply altogether as recommended by Adam Wathan, creator of Tailwind:

• https://twitter.com/adamwathan/status/1226511611592085504

  Confession: The apply feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework.

  You should almost never use it 😬

  Reuse your utility-littered HTML instead.

• https://twitter.com/adamwathan/status/1559250403547652097

  I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no @​apply 😬

  The behavior is outrageously complicated, everyone struggles to build the right mental model of what it's supposed to do, and it encourages bad CSS architecture.