Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.

Premium Features

Download Video

Tailwind Breakpoints

Published 2 months ago

Tailwind breakpoints provide the ultimate answer to clean, easy-to-write media queries. Rather than painstakingly writing out standard media queries with CSS, you can utilize the following Tailwind class prefixes to determine on what screen size should certain Tailwind classes take effect.

For reference, the breakpoints Tailwind provides are as follows:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

So for instance, if we wanted a class of hidden to only take effect on screen sizes larger than 1024px wide, we'd add on a class of lg:hidden to the element, rather than just hidden which would hide the element on all screen sizes.

These breakpoints provide an extremely quick and powerful way to get your sites looking like they should based off a design - no more tedious custom class writing, just easy breakpoint rendering using simple prefixes.

Comments

Want to participate?

Create a free Chris Courses account to begin

Login

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.