Width

    Auto

    Use to let the browser calculate and select the width for the element.

    Use .w-screen to make an element span the entire width of the viewport.

    Width - 图2

    1. <div class="w-screen bg-gray-400 h-4"></div>

    Fixed Width

    Use .w-{number} or .w-px to set an element to a fixed width.

    1. <div class="w-0 ..."></div>
    2. <div class="w-px ..."></div>
    3. <div class="w-1 ..."></div>
    4. <div class="w-2 ..."></div>
    5. <div class="w-3 ..."></div>
    6. <div class="w-4 ..."></div>
    7. <div class="w-5 ..."></div>
    8. <div class="w-6 ..."></div>
    9. <div class="w-8 ..."></div>
    10. <div class="w-12 ..."></div>
    11. <div class="w-16 ..."></div>
    12. <div class="w-20 ..."></div>
    13. <div class="w-24 ..."></div>
    14. <div class="w-32 ..."></div>
    15. <div class="w-40 ..."></div>
    16. <div class="w-48 ..."></div>
    17. <div class="w-56 ..."></div>
    18. <div class="w-64 ..."></div>

    Use or .w-full to set an element to a percentage based width.

    Width - 图4

    Responsive

    To control the width of an element at a specific breakpoint, add a {screen}: prefix to any existing width utility. For example, adding the class md:w-full to an element would apply the w-full utility at medium screen sizes and above.

    all

    Width - 图6

    sm

    md

    Width - 图8

    lg

    1. <div class="bg-gray-400 p-4 text-center">
    2.   <div class="w-1/2 sm:w-auto md:w-full lg:w-32 xl:w-3/4 ...">
    3.     Responsive Element
    4.   </div>
    5. </div>

    Responsive Element

    By default, Tailwind’s width scale is a combination of the as well as some additional values specific to widths.

    You can customize the spacing scale for padding, margin, width, and height all at once in the theme.spacing or theme.extend.spacing sections of your tailwind.config.js file:

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     theme: {
    4.       extend: {
    5.         spacing: {
    6. +         '72': '18rem',
    7. +         '96': '24rem',
    8.         }
    9.       }
    10.     }

    To customize width separately, use the theme.width section of your tailwind.config.js file.

    Learn more about customizing the default theme in the theme customization documentation.

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

    You can control which variants are generated for the width utilities by modifying the width property in the variants section of your tailwind.config.js file.

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

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

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

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     corePlugins: {
    4.       // ...
    5. +     width: false,
    6.     }
    7.   }