@apply behaviour for not-imported "tailwindcss/utilities" changed in 2.0

[brookback]

Hi all!

Summary

In 2.0, Tailwind won't build a file which uses a utility class with @apply, and where tailwindcss/utilities isn't imported anywhere in the same CSS tree. This worked in 1.x.

---

I've just embarked on upgrading our Tailwind powered CSS module to Tailwind 2.0.1. The upgrade guide is great, but I ran into an issue with @apply.

The setup is this:

• There's three entrypoints when building the dist CSS: index.css, base.css, and utils.css.
• index.css file imports base.css and utils.css.

index.css

@import 'base.css';

@import 'utils.css';

base.css

@import 'tailwindcss/base';

body {
  @apply antialiased;
}

utils.css

@import 'tailwindcss/utilities';

The problem

When I run PostCSS on index.css, everything is fine. But when I run it on base.css, PostCSS fails.

CssSyntaxError: src/base.css:7:10: The `antialiased` class does not exist. If you're sure that `antialiased` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

   6 | body {
> 7 |   @apply antialiased;

This error makes sense, since base.css doesn't import the "utilities" Tailwind module.

BUT, this works fine with tailwindcss@1.6.2, and fails in tailwindcss@2.0.1 😭

Was this unintended (unsupported/accidental) behaviour in 1.x, or is it an undocumented breaking change in 2.x?

Link to a minimal reproduction

See: https://github.com/brookback/tailwind-repro.

The repo includes two directories, with the exact same CSS source, but with different versions of Tailwind and PostCSS.

• Run npm run build in 1.x directory to see behaviour for Tailwind 1.x (1.6.2).
• Run npm run build in 2.x directory to see behaviour for Tailwind 2.x (2.0.1).

The former will succeed, but the latter will not.

Thanks!

[adamwathan]

This is an undocumented breaking change I guess — Tailwind internally looks for references to @tailwind when processing apply statements to decide "have we already generated Tailwind's styles in this CSS tree or do we need to generated them from scratch for them to be available?"

We can probably make this still work, and @RobinMalfait is actually working on an unrelated thing that would force us to tackle this too.

Out of curiousity, why are you running PostCSS against index.css, and separately against the files it imports? Why isn't just running it against index.css enough?

[brookback]

@adamwathan Thanks for the reply.

I understand the reasoning behind this, but how could base.css use the antialiased util without importing it in v1? Good old "Globals"?

Out of curiousity, why are you running PostCSS against index.css, and separately against the files it imports? Why isn't just running it against index.css enough?

I'm using Tailwind in an internal CSS foundation module, which apps depend on (as npm module). In order for the cascade to work (utilities override, etc), I need to provide two exported CSS files:

• Base (using tailwind/base)
• Utils (using tailwind/utilities)

They are used like this in app.css:

@import "css-foundation/base";

/* all the app specific code here in the middle */

@import "css-foundation/utils";

On top of that, I build a big index.css with both Base and Utils, suitable for using in a link tag in quick prototypes.

Hope that makes sense.

[RobinMalfait]

Hey, this behaviour is currently broken because of:

@import 'tailwindcss/base';

body {
  @apply antialiased;
}

We made the assumption that if we see @tailwind in the tree, that we don't have to compute all the utilities so that you can apply them. But since you only added @tailwind base; the utilities don't exist and therefore you can't apply them.

In v1 we just generated all the utilities, but this means that we do all the work twice, therefore we had this shortcut.

I have an open PR (#3032) where we check for @tailwind utilities; explicitly.
There is also more information in that PR about this situation.

[RobinMalfait]

Hey! This is fixed and will be tagged in the next release!

[brookback]

Amazing! Thanks. Will try it out!