@apply with custom classes and focus in shared class don't work

[ryanw3b3r]

Describe the problem:

When I create a .button class and .button-yellow that extends .button, as soon as I add focus: to .button class, TailwindCSS removes padding. Moving focus: to .button-yellow class fixes it. Why?

I would expect focus: to work either way.

Error - no padding:

.button {
  @apply rounded-xl px-6 py-2 hover:text-white focus:border-opacity-100;
}

.button-yellow {
  @apply button bg-yellow-600 text-gray-200;
}

Good - padding is in:

.button {
  @apply rounded-xl px-6 py-2 hover:text-white;
}

.button-yellow {
  @apply button bg-yellow-600 text-gray-200 focus:border-opacity-100;
}

Link to a minimal reproduction:

Tailwind Play example

[jacobdalamb]

Umm, you need to add the class .button to it...

[ryanw3b3r]

Nope, I don't think so! .button class is already in @apply in css for button-yellow, so I don't have to add it to my button in HTML. It would duplicate applied styles. I don't think that's the issue or please be more specific.

[jacobdalamb]

No that's not how that works you need to add both classes

check out: https://tailwindcss.com/docs/functions-and-directives

[ryanw3b3r]

Then please open this part in the docs for Tailwind 2.0 and check section with "Any rules inlined with @apply will have !important removed by default to avoid specificity issues" - it shows .foo class and then .bar class that is applying it. Then take a look at generated CSS - there's a color: blue in both classes.

[jacobdalamb]

here's the answer but I highly don't recommend this approach

@tailwind base;
@tailwind components;

.button-yellow {
@apply button bg-yellow-600 text-gray-200;
}
@tailwind utilities;

.button {
@apply rounded-xl px-6 py-2 hover:text-white focus:border-opacity-100;
}

[adamwathan]

At first glance this looks like a bug to me for sure, will investigate.

[ryanw3b3r]

Thanks @benji014628 ! I don't understand why, but yeah, you're right. I will leave this open for now. I would love to see someone explaining why.
Version of your answer that I like even more:

.button {
  @apply rounded-xl px-6 py-2 hover:text-white focus:border-opacity-100;
}

@layer components {
  .button-yellow {
    @apply button bg-yellow-600 text-gray-200;
  }
}

[ryanw3b3r]

Thanks @adamwathan !

[adamwathan]

I've pushed up a failing test for this, hoping to have time to look at it next week. If someone feels like working on it and submitting a PR of course that's welcome too!

[RobinMalfait]

Hey!

This is now fixed and will be available in the next version!

Relevant PR: #2832