Flex Basis

    Utilities for controlling the initial size of flex items.

    Show all classes

    Use the utilities to set the initial size of flex items.

    1. <div class="basis-1/3 hover:basis-1/2">
    2.   <!-- ... -->
    3. </div>

    For a complete list of all available state modifiers, check out the documentation.

    You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:basis-1/3 to apply the basis-1/3 utility at only medium screen sizes and above.

    To learn more, check out the documentation on , Dark Mode and .

    The default flex basis scale is a combination of the default spacing scale as well as a set of percentage based values.

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    3.     extend: {
    4.         '112': '28rem',
    5.         '128': '32rem',
    6.       }
    8.   }
    9. }

    Alternatively, you can customize just the flex basis scale by editing theme.flexBasis or theme.extend.flexBasis in your tailwind.config.js file.

    tailwind.config.js

    Learn more about customizing the default theme in the documentation.

    1. <div class="basis-[14.2857143%]">

    Learn more about arbitrary value support in the documentation.