Search code examples
tailwind-css

Target mobile only breakpoint

I'm using Tailwind v3.

I have a custom background color being applied in an inline style with javascript:

<div style="background-color: RANDOM_GENERATED_COLOR" />

However in mobile breakpoint, I want it to ignore this background color, I want no background. So what I did was add !bg-transparent, using the "!" modifier I make it override the inline style:

<div style="background-color: RANDOM_GENERATED_COLOR" class="!bg-transparent" />

However I don't want the inline style overriden at all other breakpoints sm and above.

Is it possible to target !bg-transparent to mobile only breakpoint?

Solution

  • I landed here searching for a way to "target only one breakpoint" and I was pretty sure there would be another way to do this without using tailwind config file.

    The solution I present below is general and not specific to the question above; just in case someone else stumbles here like me in the future.

    You can now target only one breakpoint with the use of max-sm:class-name e.g. max-sm:background-slate-500

    Reference: https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range