Customizing Screens

    Customizing the default breakpoints for your project.

    You define your project’s breakpoints in the section of your tailwind.config.js file. The keys become your (like md:text-center), and the values are the min-width where that breakpoint should start.

    The default breakpoints are inspired by common device resolutions:

    tailwind.config.js

    Feel free to have as few or as many screens as you want, naming them in whatever way you’d prefer for your project.

    To completely replace the default breakpoints, add your custom screens configuration directly under the theme key:

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    3.     screens: {
    4.       'sm': '576px',
    5.       // => @media (min-width: 576px) { ... }
    7.       'md': '960px',
    8.       // => @media (min-width: 960px) { ... }
    10.       'lg': '1440px',
    11.       // => @media (min-width: 1440px) { ... }
    12.     },
    13.   }
    14. }

    Any default screens you haven’t overridden (such as xl using the above example) will be removed and will not be available as screen modifiers.

    Overriding a single screen

    To override a single screen size (like lg), add your custom screens value under the theme.extend key:

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    3.     extend: {
    4.       screens: {
    5.         'lg': '992px',
    6.         // => @media (min-width: 992px) { ... }
    7.       },
    8.     },
    9.   },
    10. }

    Adding larger breakpoints

    The easiest way to add an additional larger breakpoint is using the extend key:

    tailwind.config.js

    1. module.exports = {
    2.     extend: {
    3.       screens: {
    4.         '3xl': '1600px',
    5.       },
    6.     },
    8.   plugins: [],
    9. }

    This will add your custom screen to the end of the default breakpoint list.

    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.

    Instead, override the entire screens key, re-specifying the default breakpoints:

    tailwind.config.js

    We expose the default theme at tailwindcss/defaultTheme so you don’t have to maintain the list of default breakpoints yourself.

    Using custom screen names

    You can name your custom screens whatever you like, and are not limited to following the sm/md/lg/xl/2xl convention that Tailwind uses by default.

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    3.     screens: {
    4.       'tablet': '640px',
    5.       // => @media (min-width: 640px) { ... }
    7.       'laptop': '1024px',
    8.       // => @media (min-width: 1024px) { ... }
    10.       'desktop': '1280px',
    11.       // => @media (min-width: 1280px) { ... }
    12.     },
    13.   }
    14. }

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

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

    Advanced configuration

    Max-width breakpoints

    If you want to work with max-width breakpoints instead of min-width, you can specify your screens as objects with a max key:

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    3.     screens: {
    4.       '2xl': {'max': '1535px'},
    5.       // => @media (max-width: 1535px) { ... }
    7.       'xl': {'max': '1279px'},
    8.       // => @media (max-width: 1279px) { ... }
    10.       'lg': {'max': '1023px'},
    11.       // => @media (max-width: 1023px) { ... }
    12.       'md': {'max': '767px'},
    13.       // => @media (max-width: 767px) { ... }
    15.       'sm': {'max': '639px'},
    16.       // => @media (max-width: 639px) { ... }
    17.     }
    18.   }
    19. }

    Make sure to list max-width breakpoints in descending order so that they override each other as expected.

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

    tailwind.config.js

    Unlike regular min-width or max-width breakpoints, breakpoints defined this way will only take effect when the viewport size is explicitly within the defined range.

    1. <div class="md:text-center">
    2.   This text will be centered on medium screens, but revert back
    3.   to the default (left-aligned) at all other screen sizes.
    4. </div>

    Multi-range breakpoints

    Sometimes it can be useful to have a single breakpoint definition apply in multiple ranges.

    For example, say you have a sidebar and want your breakpoints to be based on the content-area width rather than the entire viewport. You can simulate this by having one of your breakpoints fall back to a smaller breakpoint when the sidebar becomes visible and shrinks the content area:

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    3.     screens: {
    4.       'sm': '500px',
    5.       'md': [
    6.         // Sidebar appears at 768px, so revert to `sm:` styles between 768px
    7.         // and 868px, after which the main content area is wide enough again to
    8.         // apply the `md:` styles.
    9.         {'min': '668px', 'max': '767px'},
    10.         {'min': '868px'}
    11.       ],
    12.       'lg': '1100px',
    13.       'xl': '1400px',
    14.     }
    15.   }
    16. }

    Custom media queries

    If you want full control over the generated media query, use the raw key:

    1. module.exports = {
    2.   theme: {
    3.     extend: {
    4.       screens: {
    5.         'tall': { 'raw': '(min-height: 800px)' },
    6.         // => @media (min-height: 800px) { ... }
    7.       }
    8.     }
    9. }

    Media queries defined using the raw key will be output as-is, and the min and keys will be ignored.