Video Thumbnail

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


Premium Features

Download Video

Tailwind Breakpoints

Published 3 years 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.


Want to participate?

Create a free Chris Courses account to begin


No comments yet, be the first to add one

Providing the lift to launch your development career

© 2024 Chris Courses. All rights reserved.