Skip to content

Responsive modifiers for components not working in tailwind 4 #18047

@KonstantinVlasov

Description

@KonstantinVlasov

What version of Tailwind CSS are you using?
v4.1.7

Describe your issue
Hi! Thank you for your big work with tailwind 4.

We have a problem with responsive modifiers for our components using tailwind 4.
Example usage: <div class="button is-small sm:is-big">example</div>

With tailwind 3 it's very easy to implement:

@layer components {
    .button {
        @apply h-10;
        &.is-small { @apply h-8; }
        &.is-big { @apply h-12; }
    }
}

How we can achive this using tailwind 4? @utility don't working as expected

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions