Use to create a block-level flex container:

Use .inline-flex to create an inline flex container:

To control the display property of an element at a specific breakpoint, add a {screen}: prefix to any existing display utility class. For example, use md:inline-flex to apply the utility at only medium screen sizes and above.

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

sm

md

lg

By default, only responsive variants are generated for flex display utilities.

You can control which variants are generated for the flex display utilities by modifying the flexbox property in the modules section of your Tailwind config file.

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

Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the display utilities.

Disabling

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

Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the display utilities.