Tailwind Inline Custom Breakpoint

Question

I have a project that has custom "desktop", "tablet", and "mobile" breakpoints, however I have a page where I want to do a 4th one-off breakpoint. I don't want to commit it to the overall styles page just yet and I was wondering if there was a way to define the breakpoint "inline" on the className? ie something like this:

<div className="grid  desktop:grid-cols-4 [1120px]:grid-col-3 tablet:grid-cols-2...

Answer 1

The recommended way from tailwind docs

Arbitrary values If you need to use a one-off breakpoint that doesn’t make sense to include in your theme, use the min or max modifiers to generate a custom breakpoint on the fly using any arbitrary value.

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>

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

(sometimes you have to restart the server to see that applied properly)