Components are not working with utilities classes

[dany68]

What version of Tailwind CSS are you using?

Tailwind v4.0.0-beta.8

What build tool (or framework if it abstracts the build tool) are you using?

Vite v5.4.11, in an electron-vite app

What version of Node.js are you using?

v22.11.0

What browser are you using?

Chrome (electronjs version 31.7.6 app)

What operating system are you using?

MacOS

Describe your issue

Hi,

It seems components cannot have utilities such as md:, lg: or dark: applied to it. For instance, I defined a button.css file:

@layer components {
   .btn {
        @apply
            inline-flex items-center justify-center
            gap-1.5 px-3 py-1 font-semibold text-base text-white
            rounded-xl border-1 border-white/40 select-none
            focus:outline-4 focus:outline-blue-800/80 focus:outline-offset-2;
   }
   .btn-lg {
         @apply text-lg px-5 py-2;
   }
}

// Then using it as follows does not work, the btn-lg is not applied on medium and up:
<button class="btn md:btn-lg">Click Me</button>

On a different nuxtjs project with tailwind v3 everything is working as expected.

Thanks for you help

[philipp-spiess]

@layer components is v3 syntax that doesn't exist in v4 anymore. What you instead want to do is to migrate your example to the new @utility syntax like so: https://tailwindcss.com/docs/v4-beta#adding-custom-utilities-1

@utility btn-lg {
  @apply text-lg px-5 py-2;
}

@utility btn {
  @apply inline-flex items-center justify-center
    gap-1.5 px-3 py-1 font-semibold text-base text-white
    rounded-xl border-1 border-white/40 select-none
    focus:outline-4 focus:outline-blue-800/80 focus:outline-offset-2;
}

https://play.tailwindcss.com/UVQi1qRc6k

[gustavopch]

Does that mean now the idiomatic thing is always @utility and there should not be a distinction between components and utilities in CSS anymore, i.e.: components and utilities are now meant to be a single layer?

Edit: doesn't seem to be the case as the documentation still talks about @layer components. I'm really confused about this.

Edit 2: this comment #15045 (comment) implies this was made to reduce the amount of concepts. I can see how that's a good thing, but then why is @layer components recommended in the documentation? Shouldn't the doc use @utility instead?

[dany68]

Thank you @philipp-spiess for you help :)

But then how can i solve the following problem: https://play.tailwindcss.com/YguqPOJb2Q?size=848x720

The only solution i see is to use !rounded-full or to define rouded-full md:rounded-full which none seems ideal.

[adamwathan]

Yeah so this is actually consistent with how v3 works, where you'd also need to do !rounded-full:

https://play.tailwindcss.com/hXfUUkJ5dv?size=848x720&file=css

But here's a solution where you nest a layer inside of your custom utilities:

https://play.tailwindcss.com/h5WPle1YNh?size=848x720&file=css

[dany68]

Thank you @adamwathan for your work and help :)