mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
41 lines
846 B
PHP
41 lines
846 B
PHP
@extends('_layouts.master', ['title' => 'Display'])
|
|
|
|
@section('body')
|
|
|
|
<h1 class="title">Display</h1>
|
|
|
|
<p class="mt-6 mb-3 text-dark-soft">The display utilities simply <code>display</code> property helpers.</p>
|
|
|
|
<p class="mt-6 mb-3">Using the utilities in HTML:</p>
|
|
|
|
<pre class="language-html"><code>{{ '<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 example -->
|
|
<div class="lg:inline-block"></div>' }}</code></pre>
|
|
|
|
<p class="mt-6 mb-3">Using the utilities in Less:</p>
|
|
|
|
<pre class="language-less"><code>div {
|
|
.block;
|
|
.inline-block;
|
|
.table;
|
|
.table-row;
|
|
.table-cell;
|
|
.hidden;
|
|
|
|
// Responsive example
|
|
.screen(lg, {
|
|
.inline-block;
|
|
});
|
|
}</code></pre>
|
|
|
|
@endsection
|