@apply not working in imported css with `a {}` only

[Braincoke]

I am a beginner in CSS so this might be obvious to some of you. I tried to look at similar issues but I fail to see how they could be related.

I created the most simple gridsome project using TailwindCSS.

The project

My main.css looks like this:

@tailwind base;
@tailwind components;

@import "./theme-pink.css";

@tailwind utilities;

The theme-pink.css looks like this:

// This one is correctly applied
div {
    @apply bg-pink-200;
}

// This one is not
a {
    @apply text-red-600;
}

// This one is correctly applied
a:hover {
    @apply text-blue-500;
}

The issue

Every css in theme-pink.css is applied but the one with a { @apply text-red-600; }.

If move the problematic line in main.css then our style is applied:

@tailwind base;
@tailwind components;

@import "./theme-pink.css";

@tailwind utilities;

a {
    @apply text-red-600;
}

Try it yourself

If you feel like helping you can test this with this reproduction code : https://github.com/Braincoke/issue-tailwind-apply.

Would anyone know why this is not working ?

[cytRasch]

Try this:

// all the tailwind stuff
@tailwind base;
@tailwind components;
@tailwind utilities;

// your custom styles
@import "./theme-pink.css";

[Braincoke]

Oh yeah I had already tried this but unfortunately it didn't work :(