I want to make my custom tailwind classes use media prefixes

user_11417846 0
Viewed 2851

I am building a website with tailwind as a css framework, but I ran into the problem that when I try to use the media query prefixes of tailwind (sm:, lg:, etc.) this error is thrown:

@apply cannot be used with .sm\: because .sm\: either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .sm\: exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

Can someone explain how one should use these prefixes with own custom classes? Thank you for your help already! <3

tailwind-css
1 Answers

You could use the @screen directive to @apply style depending on the breakpoint.

See: https://tailwindcss.com/docs/functions-and-directives#screen

EDIT

You could normally declare it like so using a preprocessor or postcss-nested:

.your-class {
    @apply your-rules

    @screen sm {
        @apply your-rules-for-the-sm-breakpoint-and-above
    }

    @screen md  {
        @apply your-rules-for-the-md-breakpoint-and-above
    }
    /* etc... */
}

else use it this manner

.your-class {
    @apply your-rules
}

@screen sm {
    .your-class {
        @apply your-rules-for-the-sm-breakpoint-and-above
    }
}

@screen md  {
    .your-class {
        @apply your-rules-for-the-md-breakpoint-and-above
    }
}
    /* etc... */
user_126545070
Related