Max-Width

    Usage

    Set the maximum width of an element using the utilities.

    The max-w-prose utility gives an element a max-width optimized for readability and adapts based on the font size.

    Max-Width - 图2

    1. <div class="text-sm max-w-prose ...">
    2. </div>
    4. <div class="text-base max-w-prose ...">
    5.   <p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
    6. </div>
    8. <div class="text-xl max-w-prose ...">
    9.   <p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
    10. </div>

    Constraining to your breakpoints

    To control the max-width of an element at a specific breakpoint, add a {screen}: prefix to any existing max-width utility.

    1. <div class="max-w-sm md:max-w-lg ...">
    2. </div>

    For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

    Customizing

    Customize Tailwind’s default max-width scale for the max-w-* classes in the theme.maxWidth section of your tailwind.config.js file.

    The max-w-screen-* classes are derived from the theme.screens section of your tailwind.config.js file.

    By default, only responsive variants are generated for max-width utilities.

    You can control which variants are generated for the max-width utilities by modifying the maxWidth property in the variants section of your file.

    For example, this config will also generate hover and focus variants:

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     variants: {
    4.       extend: {
    5.         // ...
    6. +       maxWidth: ['hover', 'focus'],
    7.       }
    8.     }
    9.   }

    If you don’t plan to use the max-width utilities in your project, you can disable them entirely by setting the maxWidth property to false in the corePlugins section of your config file: