Tailwind CSS - Screens

---

Tailwind CSS Screens allow you to specify the default breakpoints for your project.

Set your project's breakpoints in theme.screens. The keys become responsive modifiers (e.g. md) and the values set the minimum width for each breakpoint.

/** @type {import('tailwindcss').Config} */
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) { ... }
    }
    }
}

Overriding the defaults

Replace default breakpoints by adding custom screens under theme key. Unoverridden defaults will be lost.

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    screens: {
        'sm': '576px',
        // => @media (min-width: 576px) { ... }

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

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

Overriding a single screen

Override a single screen size by adding a custom value under 'theme.extend'. This replaces the default value while maintaining the order.

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    extend: {
        screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
        },
    },
    },
}

Adding larger breakpoints

You can easily add a larger breakpoint using the 'extend' key. It adds to the end of the list

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

Adding smaller breakpoints

If you want to add an additional small breakpoint, you can't use extend because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    theme: {
    screens: {
        'xs': '475px',
        ...defaultTheme.screens,
    },
    },
    plugins: [],
}

Using custom screen names

You can also choose your own names for custom screens. Which will be used in responsive modifiers.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

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

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

Your responsive modifiers will reflect these custom screen names, so using them in your HTML will look like this:

<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>

Max-width breakpoints

If you want to work with max-width breakpoints, you can easily specify your screens as objects with a 'max' key. Make sure to list max-width breakpoints from largest to smallest so they work correctly.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }

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

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

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

      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }
    }
  }
}

Fixed-range breakpoints

If you want your breakpoints to specify both a min-width and a max-width, use the min and max keys together.

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    screens: {
        'sm': {'min': '640px', 'max': '767px'},
        // => @media (min-width: 640px and max-width: 767px) { ... }

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

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

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

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

Multi-range breakpoints

If you want a breakpoint to work in multiple ranges, You can easily do it by using single definition to cover different sizes.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Sidebar appears at 768px, so revert to `sm:` styles between 768px
        // and 868px, after which the main content area is wide enough again to
        // apply the `md:` styles.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

Custom media queries

If you want total control over media queries, Use the 'raw' key. It lets you write the query exactly as you want it.

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    extend: {
        screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
        }
    }
    }
}