CODEWITHSUNDEEP
tailwind-css
jesper
jesper

Reputation: 149

I want to make my custom tailwind classes use media prefixes

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

Upvotes: 8

Views: 7925

Answers (1)

edemots
edemots

Reputation: 394

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... */

Upvotes: 17

Related Questions