Arbitrary Breakpoints

[browner12]

Currently we can use arbitrary values for those rare situations we need to break out of our design system

<div class="p-[11px] sm:p-[15px]"></div>

I think it'd also be helpful to occasionally use custom breakpoints as well.

<div class="p-[11px] [400]:p-[13px] sm:p-[15px]"></div>

I have one very specific use case for this. When our main menu is below about 400px, we just have too much stuff in it and we have wrapping issues, but I don't want those things to get the adjusted style between 400px and SM.

I am a little hesitant to propose this idea, because if abused you could definitely lose out on some benefits of Tailwind, but I figured I'd throw it out to the group.

[jenstornell]

I like this idea. It could speed up development. At least until container queries arrive in CSS/Tailwind.

The downside would be that we could end up with very many breakpoints, a "breakpoint hell". But that's the downside to arbitrary values in general.

[theAdhocracy]

To add another use-case: we have two images, one with a portrait layout and the other with a horizontal one. Depending on the layout, we want to switch between the two. This works, but on our narrowest layout (single column) there are still plenty of devices that could fit the wider image, which would reduce the overall page height (and, frankly, look better).

There's no point adding a custom breakpoint for this single component, but it would be nice to have that slight flexibility in the editorial control.

[adamwathan]

You can do this now using arbitrary variants 👍

https://play.tailwindcss.com/XaNfzyHXsr

<div class="h-64 bg-red-500 [@media(min-width:711px)]:bg-green-500"></div>

Syntax is a bit verbose so maybe something we could simplify more in the future but it's at least possible when you need that escape hatch 👍

[totti-rdz]

Thanks @RobinMalfait for the tipps. This got quite confusing now. I updated Tailwind manually in my project and it didn't worked.
I created an example on Tailwind Play and examples with create-react-app+create-next-app, but there it worked.

In my project where it didn't worked I ran

npm install -D tailwindcss postcss autoprefixer

And it works now. I tried to revert the changes (and deleted node_modules) to update postcss and autoprefixer seperately to find the "culprit" package. Everytime deleting node_modules between the steps. But after reverting it still worked to my surprise.

I tested a little bit more and I found out, that only some classes do not work with arbitrary values according to the docs e.g. the flex-direction flex-row. I updated solely autoprefixer and now it works.

So I guess the solution is to update the autoprefixer package. And optionally the tailwind and postcss packages, so there is no compatibility issue with the new autoprefixer package.

@chamberlainpi and @lymau can you confirm that updating autoprefixer, maybe along with tailwindcss and postcss fixes this issue for you?

[MarvinMiles]

Updating autoprefixer/postcss did not worked for me.

At some point I got console warning:

The min-* and max-* variants are not supported with a screens configuration containing objects.

So removing extended screen configs fixed the issue.

[aamirbinabd]

So I guess the solution is to update the autoprefixer package. And optionally the tailwind and postcss packages, so there is no compatibility issue with the new autoprefixer package.

Had a similar issue. Updated both postcss and autoprefixer to latest version but had no effect.

So removing extended screen configs fixed the issue.

Also removed extended screen configs, checked for any issues in the file. Still getting this console warning:

warn - The min-* and max-* variants are not supported with a screens configuration containing objects.

Relying on [@media(min-width:711px)]:bg-green-500 route for now.

One possibly important note:
I have configured to use Max-width breakpoints as explained in the docs Max-width breakpoints

[wongjn]

I have configured to use Max-width breakpoints

Yep, this stops min-*/max-* from working. See #9558 for details.

[shrekuu]

Could you please add this to this page, at the bottom? https://tailwindcss.com/docs/responsive-design

Maybe also add this warning I found in the terminal output: warn - The min-andmax-variants are not supported with ascreens configuration containing objects.

[sonsoixam]

i get same problem , any solution ?

[TristanBrotherton]

Same issue here - using TW 3.3.6 only the syntax [@media(min-width:*)]: will work not min-*

[wongjn]

Consider checking you only have "simple" screen values. As detailed in #9558:

Your screens, if customized, MUST be min-width only and string values

To ensure proper sorting we've made the decision to restrict the use of these features to screens that are "simple", meaning that they are min-width-based, and consist of only string values that use the same units.

[TristanBrotherton]

I can confirm in my tailwind.config.cjs there is no values set for screens.

[wongjn]

Consider checking:

• Tailwind has compiled since you added the class.
• The content file globs sufficiently cover the file that the class appears in.
• String concatenation/interpolation is not used to build the class name.
• You are using the correct syntax for the class name.

[TristanBrotherton]

Thank you for the pointers a restart of vite seemed to do the trick.

[mauriciabad]

Now you can use the new range syntax:

<div class="h-64 bg-red-500 [@media(width>=400px)]:bg-green-500"></div>

[logemann]

came here because the docs mention to use:

min-[320px]:text-center

Is this still valid? Doesnt work for me with latest TWCSS. And then, which one should i use?

[rohitmathur-7]

Yes, I also tried using arbitrary breakpoints like this: min-[320px]:text-center, but this does not work.

<div class="h-64 bg-red-500 [@media(width>=400px)]:bg-green-500"></div>
Using arbitrary breakpoints like this is working.

[jkinley]

I have confirmed that none of these work for me.

[andynghiaa]

className="hidden [@media(min-width:1400px)]:flex"
Please use this approach, it works well

[nemanjam]

      class: `border-2 max-[${TW_SCREENS.XS}px]:border-red-500 max-[${TW_SCREENS.MD}px]:border-green-500  max-[${TW_SCREENS.XL}px]:border-orange-500`,

produces this warning:

warn - The `min-*` and `max-*` variants are not supported with a `screens` configuration containing mixed units.

and styles aren't applied.

[totti-rdz]

I don't think, that even when using arbitrary values Tailwind is able to resolve dynamic values in classes.

So this is not possible

const color = "green" class: "border-${color}-green"

And I think it is not possible with max- either

[nemanjam]

True.

[m-shum]

How would you apply this to something like @media (orientation: portrait) and (hover: hover)? It works well with a single @media rule but stacking them hasn't worked for me so far. Goes without saying that I removed the spaces when writing MQs as TW classes.

[shrekuu]

The portrait can be utilized as follows: <div class="h-64 bg-red-500 portrait:hover:bg-green-500"></div>.

In the desktop Chrome devtool, within the phone device view, it is necessary to click in order to simulate this hover state.

Reference: https://tailwindcss.com/docs/hover-focus-and-other-states#viewport-orientation.

Also, you can combine them now like this, with tailwindcss 3.4.15+. <div class="h-64 bg-red-500 portrait:hover:bg-green-500 min-[400px]:portrait:hover:bg-sky-300"></div>

reference: https://tailwindcss.com/docs/responsive-design#arbitrary-values

play it here: https://play.tailwindcss.com/dFq0O9ilLI

[m-shum]

I don't think my question was clear enough – I'm not trying to target :hover, I'm trying to target @media (hover: hover).

[wongjn]

You could do portrait:[@media(hover:hover)]:class-name which would compile:

@media (orientation: portrait) {
  @media (hover: hover) {
    .class-name {

Or you could put it all in one like [@media(orientation:portrait)_and_(hover:hover)]:class-name which would compile:

@media (orientation: portrait) and @media (hover: hover) {
    .class-name {