CODEWITHSUNDEEP
reactjstailwind-css
Denis
Denis

Reputation: 43

How can I add media queries like Tailwind to be in HTML but without Tailwind In React?

For example : with Tailwind: <div className="md:hidden">Hello</div> will result the div hidden after the breakpoint md - which after Tailwind doc , it is 768px; I would like to be able to do the same, but for custom widths, so not 768px; And I Don't want to write it in the CSS file and I dont want to modify Tailwind files. I would like to be still inline . Is it possible?

Upvotes: 1

Views: 290

Answers (1)

Konrad
Konrad

Reputation: 24661

Documentation

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 custom breakpoint on the fly using any arbitrary value.

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

Upvotes: 1

Related Questions