mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
52 lines
995 B
Markdown
52 lines
995 B
Markdown
---
|
|
extends: _layouts.markdown
|
|
title: "Display"
|
|
---
|
|
|
|
# Display
|
|
|
|
<div class="subnav">
|
|
<a class="subnav-link" href="#usage">Usage</a>
|
|
<a class="subnav-link" href="#responsive">Responsive</a>
|
|
<a class="subnav-link" href="#customizing">Customizing</a>
|
|
</div>
|
|
|
|
> If you're looking for Flexbox utilities, see the [Flexbox](/styles/flexbox) page.
|
|
|
|
The display utilities simply `display` property helpers.
|
|
|
|
```html
|
|
<!-- Using the utilities in HTML: -->
|
|
|
|
<div class="inline"></div>
|
|
<div class="block"></div>
|
|
<div class="inline-block"></div>
|
|
<div class="hidden"></div>
|
|
|
|
<div class="table">
|
|
<div class="table-row">
|
|
<div class="table-cell"></div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Responsive
|
|
|
|
The display utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
|
|
|
|
```html
|
|
<!-- Using the utilities in HTML: -->
|
|
|
|
<div class="block sm:inline-block md:block lg:hidden"></div>
|
|
```
|
|
|
|
```less
|
|
// Using the utilities in Less:
|
|
|
|
div {
|
|
.screen(lg, {
|
|
.inline-block;
|
|
});
|
|
}
|
|
```
|