v4: md:gap-y-8 and custom classes

[frederikhors]

With Tailwind 3 this works:

.custom {
    @apply grid gap-6;
}

<div class="custom md:gap-y-8">

With Tailwind 4.0.1 the md:gap-y-8 doesn't work, but it works if I use !, why?

• app.css:

@import 'tailwindcss';

.custom {
    @apply grid gap-6;
}

<div class="custom md:gap-y-8!">

I'm using vite config with this:

import tailwindcss from '@tailwindcss/vite';

export default defineConfig(({ mode }) => {
    return {
        plugins: [sveltekit(), tailwindcss()],
    }
});

[adamwathan]

Hey! This is because we use native cascade layers, and styles that aren't in layers always defeat styles that are in layers.

This will work:

@import 'tailwindcss';

@layer components {
  .custom {
      @apply grid gap-6;
  }
}

[frederikhors]

This is not in the upgrading guide, right?