1 min read

How to use breakpoints (media query) with TailwindCSS

Written by



Creator, Quotion

Published on



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.


Create your blogs directly from Apple Notes.

Say goodbye to complex CMS updates and management issues!

You focus on creating quality content while Quotion takes care of the rest.


More from the blog