How to use breakpoints (media query) with TailwindCSS

#Engineering
TailwindCSS is a popular CSS framework, sometime you may want to use an arbitrary media query to make your website responsive, here are 2 options to do that.

Add a custom breakpoint to the config file

Add your breakpoints to the tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  plugins: [],
}
 

Then, you can use this breakpoint in the html, like this:

<div class="hidden 3xl:block"></>

Use arbitrary breakpoints directly

Sometime you may don’t want to add an official breakpoint to the tailwind.config.js, just using an arbitrary breakpoint for a specific case is more convenient. You can use an arbitrary breakpoint with [] syntax, like this:

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

Checkout the live demo.

Actually, you can use more arbitrary controls, like CSS values, CSS properties, and TailwindCSS variants, checkout the official doc for more details.