Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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!