Bug report (regression #6975): Layer not preserved across imports

[ctjlewis]

See #6975 and repro. I've updated the Replit config so all you need to do is click the Run button.

For anyone running into this issue, the last stable version without this bug is 3.0.7.

[adamwathan]

Hey! The problem here is that you aren't using postcss-import to inline your imported files at build time, so as far as Tailwind is concerned it just sees an actual @import statement (since they are valid and can be sent to the browser).

I'm not sure if Next.js tries to process CSS imports, but if it's doing that then it is doing it in a way that is running Tailwind separately for each CSS file. This is a common source of this type of issue, and we talk about it in the docs here (in the context of Svelte/Vue components, but the underlying issue is the same):

https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css

You should install postcss-import and configure it like so:

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

Then update index.css to use our @import syntax and move your import near the top:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./special-bold/index.css";

@layer base {
  /*
   * Define a class in the base layer.
   */
  .large-bold {
    @apply font-bold text-3xl;
  }
}

This is required because in CSS the @import statement has strict rules about where it can be in a CSS file — it has to come before all other declarations (like @layer).

I can't get replit to work at all for some reason so I can't give you a working demo easily, but that's definitely the source of the problem and this should resolve it.

If it was working in older versions of Tailwind it was sort of by chance and not because it's really possible to guarantee that it would work. The changes I've outlined here are necessary for things to be reliable, even in older versions of Tailwind.

Hope that helps.