mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Remove docs from main repo
This commit is contained in:
Adam Wathan
parent
3c78370341
commit
05fbe1a4be
@ -1,5 +1,4 @@
|
||||
/__tests__/
|
||||
/docs/
|
||||
/jest/
|
||||
/src/
|
||||
yarn-error.log
|
||||
|
||||
@ -10,7 +10,3 @@ cache:
|
||||
script:
|
||||
- yarn
|
||||
- yarn run test
|
||||
- cd $TRAVIS_BUILD_DIR/docs && composer self-update
|
||||
- cd $TRAVIS_BUILD_DIR/docs && composer install --prefer-dist --no-interaction
|
||||
- cd $TRAVIS_BUILD_DIR/docs && yarn
|
||||
- cd $TRAVIS_BUILD_DIR/docs && yarn run dev
|
||||
|
||||
9
docs/.gitignore
vendored
9
docs/.gitignore
vendored
@ -1,9 +0,0 @@
|
||||
/build_production/
|
||||
/build_local/
|
||||
/node_modules/
|
||||
/vendor/
|
||||
/source/css/
|
||||
/source/js/
|
||||
/source/mix-manifest.json
|
||||
/tailwind.json
|
||||
/_tmp
|
||||
@ -1,32 +0,0 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Str;
|
||||
use Illuminate\Support\HtmlString;
|
||||
|
||||
/** @var $container \Illuminate\Container\Container */
|
||||
/** @var $jigsaw \TightenCo\Jigsaw\Jigsaw */
|
||||
|
||||
function mix($path, $manifestDirectory = '')
|
||||
{
|
||||
static $manifests = [];
|
||||
if (! Str::startsWith($path, '/')) {
|
||||
$path = "/{$path}";
|
||||
}
|
||||
if ($manifestDirectory && ! Str::startsWith($manifestDirectory, '/')) {
|
||||
$manifestDirectory = "/{$manifestDirectory}";
|
||||
}
|
||||
|
||||
$manifestPath = public_path($manifestDirectory.'/mix-manifest.json');
|
||||
|
||||
if (! isset($manifests[$manifestPath])) {
|
||||
if (! file_exists($manifestPath)) {
|
||||
throw new Exception('The Mix manifest does not exist.');
|
||||
}
|
||||
$manifests[$manifestPath] = json_decode(file_get_contents($manifestPath), true);
|
||||
}
|
||||
$manifest = $manifests[$manifestPath];
|
||||
if (! isset($manifest[$path])) {
|
||||
throw new InvalidArgumentException("Unable to locate Mix file: {$path}.");
|
||||
}
|
||||
return new HtmlString($manifestDirectory.$manifest[$path]);
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"require": {
|
||||
"tightenco/jigsaw": "^1.0"
|
||||
}
|
||||
}
|
||||
1165
docs/composer.lock
generated
1165
docs/composer.lock
generated
File diff suppressed because it is too large
Load Diff
@ -1,23 +0,0 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'baseUrl' => '',
|
||||
'production' => false,
|
||||
'collections' => [],
|
||||
'config' => json_decode(file_get_contents(__DIR__ . '/tailwind.json'), true),
|
||||
'version' => json_decode(file_get_contents(__DIR__ . '/../package.json'), true)['version'],
|
||||
'colors' => ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink'],
|
||||
'active' => function ($page, $path) {
|
||||
$pages = collect(array_wrap($page));
|
||||
|
||||
return $pages->contains(function ($page) use ($path) {
|
||||
return str_contains($page->getPath(), $path);
|
||||
});
|
||||
},
|
||||
'anyChildrenActive' => function ($page, $children) {
|
||||
return $children->contains(function ($link) use ($page) {
|
||||
return $page->getPath() == '/docs/'. $link;
|
||||
});
|
||||
},
|
||||
'navigation' => require_once('navigation.php'),
|
||||
];
|
||||
@ -1,6 +0,0 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'baseUrl' => 'https://tailwindcss.com',
|
||||
'production' => true,
|
||||
];
|
||||
@ -1,90 +0,0 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'Introduction' => [
|
||||
'What is Tailwind?' => 'what-is-tailwind',
|
||||
],
|
||||
'Getting Started' => [
|
||||
'Installation' => 'installation',
|
||||
'Configuration' => 'configuration',
|
||||
'Colors' => 'colors',
|
||||
'Responsive Design' => 'responsive-design',
|
||||
'State Variants' => 'state-variants',
|
||||
'Adding New Utilities' => 'adding-new-utilities',
|
||||
'Extracting Components' => 'extracting-components',
|
||||
'Functions & Directives' => 'functions-and-directives',
|
||||
'Controlling File Size' => 'controlling-file-size',
|
||||
],
|
||||
'Styles' => [
|
||||
'Backgrounds' => [
|
||||
'Color' => 'background-color',
|
||||
'Position' => 'background-position',
|
||||
'Repeat' => 'background-repeat',
|
||||
'Size' => 'background-size',
|
||||
'Attachment' => 'background-attachment',
|
||||
],
|
||||
'Borders' => [
|
||||
'Width' => 'border-width',
|
||||
'Color' => 'border-color',
|
||||
'Style' => 'border-style',
|
||||
],
|
||||
'Border Radius' => 'border-radius',
|
||||
'Container' => 'container',
|
||||
'Display' => 'display',
|
||||
'Flexbox' => [
|
||||
'Display' => 'flexbox-display',
|
||||
'Direction' => 'flexbox-direction',
|
||||
'Wrapping' => 'flexbox-wrapping',
|
||||
'Justify Content' => 'flexbox-justify-content',
|
||||
'Align Items' => 'flexbox-align-items',
|
||||
'Align Content' => 'flexbox-align-content',
|
||||
'Align Self' => 'flexbox-align-self',
|
||||
'Flex, Grow, & Shrink' => 'flexbox-flex-grow-shrink',
|
||||
],
|
||||
'Floats' => 'floats',
|
||||
'Forms' => 'forms',
|
||||
'Interactivity' => [
|
||||
'Cursor' => 'cursor',
|
||||
'Resize' => 'resize',
|
||||
'Pointer Events' => 'pointer-events',
|
||||
'User Select' => 'user-select',
|
||||
],
|
||||
'Lists' => 'lists',
|
||||
'Opacity' => 'opacity',
|
||||
'Overflow' => 'overflow',
|
||||
'Positioning' => 'positioning',
|
||||
'Shadows' => 'shadows',
|
||||
'Sizing' => [
|
||||
'Width' => 'width',
|
||||
'Min-Width' => 'min-width',
|
||||
'Max-Width' => 'max-width',
|
||||
'Height' => 'height',
|
||||
'Min-Height' => 'min-height',
|
||||
'Max-Height' => 'max-height',
|
||||
],
|
||||
'Spacing' => 'spacing',
|
||||
'SVG' => 'svg',
|
||||
'Typography' => [
|
||||
'Fonts' => 'fonts',
|
||||
'Color' => 'text-color',
|
||||
'Sizing' => 'text-sizing',
|
||||
'Weight' => 'font-weight',
|
||||
'Alignment' => 'text-alignment',
|
||||
'Line Height' => 'line-height',
|
||||
'Letter Spacing' => 'letter-spacing',
|
||||
'Style & Decoration' => 'text-style',
|
||||
'Whitespace & Wrapping' => 'whitespace-and-wrapping',
|
||||
],
|
||||
'Vertical Alignment' => 'vertical-alignment',
|
||||
'Visibility' => 'visibility',
|
||||
'Z-Index' => 'z-index',
|
||||
],
|
||||
'Examples' => [
|
||||
'Alerts' => 'examples/alerts',
|
||||
'Buttons' => 'examples/buttons',
|
||||
'Cards' => 'examples/cards',
|
||||
'Forms' => 'examples/forms',
|
||||
'Grids' => 'examples/grids',
|
||||
'Navigation' => 'examples/navigation',
|
||||
],
|
||||
];
|
||||
@ -1,31 +0,0 @@
|
||||
{
|
||||
"scripts": {
|
||||
"development": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"production": "cross-env NODE_ENV=production webpack --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"dev": "npm run development",
|
||||
"prod": "npm run production",
|
||||
"watch": "npm run development -- --watch"
|
||||
},
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"anchor-js": "^4.1.0",
|
||||
"cross-env": "^3.2.3",
|
||||
"escape-html": "^1.0.3",
|
||||
"laravel-mix": "^1.5.1",
|
||||
"less": "^2.7.2",
|
||||
"less-loader": "^4.0.5",
|
||||
"lodash": "^4.17.4",
|
||||
"node-cmd": "^3.0.0",
|
||||
"normalize.css": "^7.0.0",
|
||||
"on-build-webpack": "^0.1.0",
|
||||
"postcss-cssnext": "^3.0.2",
|
||||
"prismjs": "^1.8.3",
|
||||
"stylefmt": "^6.0.0",
|
||||
"vue": "^2.5.2",
|
||||
"webpack-watch": "^0.2.0",
|
||||
"yargs": "^10.0.3"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%"
|
||||
]
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
@ -1,22 +0,0 @@
|
||||
const anchorJS = require('anchor-js')
|
||||
const Prism = require('./prism')
|
||||
const Mousetrap = require('mousetrap')
|
||||
|
||||
window.anchors = new anchorJS()
|
||||
window.Vue = require('vue')
|
||||
|
||||
Vue.component('responsive-code-sample', require('./components/ResponsiveCodeSample.vue'))
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app'
|
||||
})
|
||||
|
||||
Prism.highlightAll()
|
||||
anchors.options = { placement: 'left', class: 'text-grey-dark' }
|
||||
anchors.add()
|
||||
|
||||
// Add shortcut to search input when pressing the "/" key
|
||||
Mousetrap.bind('/', function (e) {
|
||||
e.preventDefault()
|
||||
document.getElementById('docsearch').focus()
|
||||
})
|
||||
@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-end justify-center mb-2 bg-white">
|
||||
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'none' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'none'" >
|
||||
<svg :width="0.857142857142857 * 10" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 10 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 8.5 28h-7A1.5 1.5 0 0 1 0 26.5v-13A1.5 1.5 0 0 1 1.5 12zM1 15v10h8V15H1zm4 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM4 13v1h2v-1H4z" fill-rule="evenodd"/></svg>
|
||||
<p class="text-xs">all</p>
|
||||
</span>
|
||||
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'sm' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'sm'" >
|
||||
<svg :width="0.857142857142857 * 14" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 14 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 6h11A1.5 1.5 0 0 1 14 7.5v19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 26.5v-19A1.5 1.5 0 0 1 1.5 6zM1 9v16h12V9H1zm6 18.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM7 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill-rule="evenodd"/></svg>
|
||||
<p class="text-xs">sm</p>
|
||||
</span>
|
||||
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'md' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'md'" >
|
||||
<svg :width="0.857142857142857 * 26" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 26 28" xmlns="http://www.w3.org/2000/svg"><path d="M26 26.5a1.5 1.5 0 0 1-1.5 1.5h-23A1.5 1.5 0 0 1 0 26.5v-14A1.5 1.5 0 0 1 1.5 11h23a1.5 1.5 0 0 1 1.5 1.5v14zm-3 .5V12H3v15h20zm1.5-6.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-23-.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill-rule="evenodd"/></svg>
|
||||
<p class="text-xs">md</p>
|
||||
</span>
|
||||
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'lg' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'lg'" >
|
||||
<svg :width="0.857142857142857 * 38" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 38 28" xmlns="http://www.w3.org/2000/svg"><path d="M34 26h4v1c-1.333.667-2.667 1-4 1H4c-1.333 0-2.667-.333-4-1v-1h4V7.5A1.5 1.5 0 0 1 5.5 6h27A1.5 1.5 0 0 1 34 7.5V26zM6 8v18h26V8H6z" fill-rule="evenodd"/></svg>
|
||||
<p class="text-xs">lg</p>
|
||||
</span>
|
||||
<span class="inline-block text-center cursor-pointer select-none" :class="activeScreen === 'xl' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'xl'" >
|
||||
<svg :width="0.857142857142857 * 36" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 36 28" xmlns="http://www.w3.org/2000/svg"><path d="M20.857 24l.857 3H24v1H12v-1h2.286l.857-3H1.5A1.5 1.5 0 0 1 0 22.5v-21A1.5 1.5 0 0 1 1.5 0h33A1.5 1.5 0 0 1 36 1.5v21a1.5 1.5 0 0 1-1.5 1.5H20.857zM2 2v18h32V2H2z"/></svg>
|
||||
<p class="text-xs">xl</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="rounded overflow-hidden border-2 border-grey-light mb-8">
|
||||
<div class="p-4 bg-grey-lightest border-b-2 border-grey-light">
|
||||
<div class="whitespace-pre font-mono text-grey text-sm overflow-x-scroll" v-html="highlightedCode"></div>
|
||||
</div>
|
||||
<div class="bg-white p-4">
|
||||
<slot v-if="activeScreen === 'none'" name="none"></slot>
|
||||
<slot v-if="activeScreen === 'sm'" name="sm"></slot>
|
||||
<slot v-if="activeScreen === 'md'" name="md"></slot>
|
||||
<slot v-if="activeScreen === 'lg'" name="lg"></slot>
|
||||
<slot v-if="activeScreen === 'xl'" name="xl"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import escape from 'escape-html'
|
||||
|
||||
export default {
|
||||
props: ['code'],
|
||||
data() {
|
||||
return {
|
||||
activeScreen: 'none',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
highlightedCode() {
|
||||
const regex = new RegExp(`(${this.activeScreen}\:[^\\s\\&]+)`, 'g')
|
||||
return escape(this.code).replace(regex, '<span class="text-purple">$1</span>').replace(/none:/g, '')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,89 +0,0 @@
|
||||
$.when($.ready).then(function() {
|
||||
window.history.replaceState({
|
||||
'href': window.location.href,
|
||||
'title': $(document).filter('title').text(),
|
||||
'nav': $(document).find('#nav').html(),
|
||||
'content': $(document).find('#content').html()
|
||||
}, '', window.location.href)
|
||||
|
||||
$('#nav').on('click', 'a', function (event) {
|
||||
|
||||
// Allow opening links in new tabs
|
||||
if (event.metaKey) {
|
||||
return
|
||||
}
|
||||
|
||||
// Prevent following link
|
||||
event.preventDefault()
|
||||
|
||||
// Get desired link
|
||||
var href = $(this).attr('href')
|
||||
|
||||
// Make Ajax request to get the page content
|
||||
$.ajax({
|
||||
method: 'GET',
|
||||
url: href,
|
||||
cache: false,
|
||||
dataType: 'html',
|
||||
}).done(function(html) {
|
||||
|
||||
// Parse the HTML response
|
||||
var title = $(html).filter('title').text()
|
||||
var nav = $(html).find('#nav').html()
|
||||
var content = $(html).find('#content').html()
|
||||
|
||||
$('#sidebar').addClass('hidden')
|
||||
$('#sidebar-close').addClass('hidden')
|
||||
|
||||
// Update the page
|
||||
$('title').text(title)
|
||||
$('#nav').html(nav)
|
||||
$('#content').html(content)
|
||||
|
||||
// Scroll to the top of the page
|
||||
$(document).scrollTop(0)
|
||||
|
||||
// Add page load to browser history
|
||||
window.history.pushState({
|
||||
'href': href,
|
||||
'title': title,
|
||||
'nav': $(html).find('#nav').html(),
|
||||
'content': $(html).find('#content').html()
|
||||
}, '', href)
|
||||
|
||||
// Track on Google Analytics
|
||||
if (typeof(ga) === 'function') {
|
||||
ga('set', 'page', href)
|
||||
ga('send', 'pageview')
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Load page history (for back/forward nav)
|
||||
window.onpopstate = function(e) {
|
||||
if(e.state){
|
||||
// Update the page
|
||||
$('title').text(e.state.title)
|
||||
$('#nav').html(e.state.nav)
|
||||
$('#content').html(e.state.content)
|
||||
|
||||
// Track on Google Analytics
|
||||
if (typeof(ga) === 'function') {
|
||||
ga('set', 'page', e.state.href)
|
||||
ga('send', 'pageview')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close sidebar (mobile)
|
||||
$('#sidebar-close').on('click', function () {
|
||||
$('#sidebar').addClass('hidden')
|
||||
$('#sidebar-close').addClass('hidden')
|
||||
})
|
||||
|
||||
// Show sidebar (mobile)
|
||||
$('#sidebar-open').on('click', function () {
|
||||
$('#sidebar').removeClass('hidden')
|
||||
$('#sidebar-close').removeClass('hidden')
|
||||
})
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
@ -1,37 +0,0 @@
|
||||
.algolia-autocomplete {
|
||||
width: 100% !important;
|
||||
|
||||
[class^="ds-dataset-"] {
|
||||
.algolia-docsearch-suggestion--text {
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
box-shadow: inset 0 -2px 0 0 rgba(68, 168, 179,.8);
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: config('colors.tailwind-teal');
|
||||
background: rgba(68, 168, 179, .1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: config('screens.md')) {
|
||||
.ds-dropdown-menu {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--content {
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,136 +0,0 @@
|
||||
.markdown {
|
||||
.subnav, .subnav& {
|
||||
@apply .flex;
|
||||
@apply .mt-6;
|
||||
@apply .mb-6;
|
||||
@apply .pb-2;
|
||||
@apply .border-b-2;
|
||||
@apply .border-grey-light;
|
||||
|
||||
.subnav-link, .subnav-link& {
|
||||
@apply .mr-6;
|
||||
@apply .leading-none;
|
||||
@apply .text-grey-darkest;
|
||||
@apply .text-sm;
|
||||
}
|
||||
}
|
||||
|
||||
> hr {
|
||||
@apply .my-12;
|
||||
@apply .border-t-0 .border-r-0 .border-l-0;
|
||||
@apply .border-b .border-grey-light;
|
||||
}
|
||||
|
||||
> a, > p a, a& {
|
||||
@apply .text-blue;
|
||||
&:hover {
|
||||
@apply .underline;
|
||||
}
|
||||
}
|
||||
|
||||
> p code, > ul li code, p& code& {
|
||||
@apply .inline-block;
|
||||
@apply .bg-grey-lightest;
|
||||
@apply .rounded-sm;
|
||||
@apply .text-sm;
|
||||
@apply .p-1;
|
||||
@apply .leading-none;
|
||||
@apply .whitespace-no-wrap;
|
||||
@apply .text-purple;
|
||||
@apply .font-mono;
|
||||
@apply .align-baseline;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
> pre, pre& {
|
||||
@apply .font-mono;
|
||||
@apply .border-2;
|
||||
@apply .border-grey-light;
|
||||
@apply .rounded;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
> blockquote, blockquote& {
|
||||
@apply .italic;
|
||||
@apply .text-grey-darkest;
|
||||
@apply .text-sm;
|
||||
}
|
||||
|
||||
> h1, h1& {
|
||||
@apply .mb-1;
|
||||
@apply .leading-none;
|
||||
@apply .text-black;
|
||||
@apply .font-semibold;
|
||||
@apply .text-4xl;
|
||||
}
|
||||
|
||||
> h2, h2& {
|
||||
@apply .mt-12;
|
||||
@apply .mb-4;
|
||||
@apply .text-black;
|
||||
@apply .leading-none;
|
||||
@apply .font-semibold;
|
||||
@apply .text-2xl;
|
||||
}
|
||||
|
||||
> h3, h3& {
|
||||
@apply .mt-12;
|
||||
@apply .mb-4;
|
||||
@apply .text-black;
|
||||
@apply .leading-none;
|
||||
@apply .font-semibold;
|
||||
@apply .text-xl;
|
||||
}
|
||||
|
||||
> h4, h4& {
|
||||
@apply .mt-8;
|
||||
@apply .mb-0;
|
||||
@apply .text-black;
|
||||
@apply .leading-none;
|
||||
@apply .font-semibold;
|
||||
@apply .text-base;
|
||||
}
|
||||
|
||||
> h1 + p {
|
||||
@apply .mt-8;
|
||||
}
|
||||
|
||||
> h1 > code,
|
||||
> h2 > code,
|
||||
> h3 > code,
|
||||
> h4 > code {
|
||||
@apply .font-mono;
|
||||
}
|
||||
|
||||
> p, p&, > blockquote > p {
|
||||
@apply .text-grey-darkest;
|
||||
@apply .mt-4;
|
||||
@apply .mb-4;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
> ul, > ol {
|
||||
@apply .text-grey-darkest;
|
||||
@apply .m-0;
|
||||
@apply .mb-4;
|
||||
}
|
||||
|
||||
> ul {
|
||||
list-style: disc inside;
|
||||
}
|
||||
|
||||
> ol {
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
> li {
|
||||
@apply .my-2;
|
||||
@apply .text-grey-darkest;
|
||||
}
|
||||
|
||||
> :not(pre):not(h1):not(h2):not(h3):not(h4) > code, > pre, pre& {
|
||||
@apply .bg-grey-lightest;
|
||||
@apply .text-sm;
|
||||
@apply .leading-normal;
|
||||
}
|
||||
}
|
||||
@ -1,154 +0,0 @@
|
||||
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
@apply .font-mono;
|
||||
@apply .text-grey-darkest;
|
||||
|
||||
background: none;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: transparent;
|
||||
@apply .text-sm;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
@apply .text-grey-dark;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
@apply .text-blue-dark;
|
||||
// color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
@apply .text-blue-dark;
|
||||
}
|
||||
|
||||
code.language-diff, pre.language-diff {
|
||||
@apply .text-grey-darker;
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
@apply .text-grey;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
@apply .text-blue-dark;
|
||||
}
|
||||
|
||||
// .token.selector,
|
||||
// .token.attr-name,
|
||||
// .token.char,
|
||||
// .token.builtin,
|
||||
// .token.inserted,
|
||||
.token.string {
|
||||
@apply .text-purple;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a67f59;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
@apply .text-purple;
|
||||
// color: #07a;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@ -1,140 +0,0 @@
|
||||
@extends('_layouts.master')
|
||||
|
||||
@section('meta')
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@tailwindcss">
|
||||
<meta name="twitter:title" content="{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }}">
|
||||
<meta name="twitter:description" content="{{ $page->description ? $page->description : 'Documentation for the Tailwind CSS framework.' }}">
|
||||
<meta name="twitter:image" content="https://tailwindcss.com/img/tailwind-square.png">
|
||||
<meta name="twitter:creator" content="@tailwindcss">
|
||||
<meta property="og:url" content="https://tailwindcss.com/" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:title" content="{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }}" />
|
||||
<meta property="og:description" content="{{ $page->description ? $page->description : 'Documentation for the Tailwind CSS framework.' }}" />
|
||||
<meta property="og:image" content="https://tailwindcss.com/img/twitter-card.png" />
|
||||
@endsection
|
||||
|
||||
@push('headScripts')
|
||||
<script src="{{ mix('/js/nav.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@section('body')
|
||||
<div class="min-h-screen">
|
||||
<div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll md:overflow-visible scrolling-touch md:scrolling-auto bg-grey-lighter w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-grey-light md:flex flex-col">
|
||||
<div class="border-b border-grey-light flex-none px-8 py-6">
|
||||
<div class="mb-4">
|
||||
<div class="hidden md:flex md:justify-center">
|
||||
<a href="/" class="flex justify-center">
|
||||
<svg class="w-16 h-16 mx-auto block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-center">
|
||||
<a href="https://github.com/tailwindcss/tailwindcss/releases" class="text-sm hover:text-grey-dark text-grey font-semibold">v{{ $page->version }}</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input id="docsearch" class="placeholder-grey-dark rounded bg-white border border-grey-light py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
|
||||
<div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
|
||||
<svg class="fill-current pointer-events-none text-grey-darker w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8 flex-1 overflow-y-scroll">
|
||||
<nav id="nav" class="text-base overflow-y-scroll">
|
||||
@foreach ($page->navigation as $sectionName => $sectionItems)
|
||||
<div class="mb-8">
|
||||
<p class="mb-4 text-grey-dark uppercase tracking-wide font-bold text-xs">{{ $sectionName }}</p>
|
||||
<ul>
|
||||
@foreach ($sectionItems as $name => $slugOrChildren)
|
||||
@if (is_string($slugOrChildren))
|
||||
<li class="mb-3"><a class="hover:underline {{ $page->active('/docs/' . $slugOrChildren) ? 'text-black font-bold' : 'text-grey-darkest' }}" href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren }}">{{ $name }}</a></li>
|
||||
@else
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren->first() }}" class="hover:underline block mb-2 {{ $page->anyChildrenActive($slugOrChildren) ? 'text-black font-bold' : 'text-grey-darkest' }}">{{ $name }}</a>
|
||||
<ul class="pl-4 {{ $page->anyChildrenActive($slugOrChildren) ? 'block' : 'hidden' }}">
|
||||
@foreach ($slugOrChildren as $title => $link)
|
||||
<li class="mb-3">
|
||||
<a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-black font-bold' : 'text-grey-darkest' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
|
||||
{{ $title }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endforeach
|
||||
</nav>
|
||||
</div>
|
||||
<div class="border-t border-grey-light px-8 py-4">
|
||||
<div class="flex justify-center text-grey">
|
||||
<a class="block flex items-center hover:text-grey-darker mr-16" href="https://github.com/tailwindcss/tailwindcss">
|
||||
<svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>GitHub</title><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"/></svg>
|
||||
</a>
|
||||
<a class="block flex items-center hover:text-grey-darker" href="https://twitter.com/tailwindcss">
|
||||
<svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Twitter</title><path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:ml-80">
|
||||
<div class="fixed w-full z-20">
|
||||
<div class="pin-t bg-white md:hidden relative border-b border-grey-light h-12 flex items-center">
|
||||
<div id="sidebar-open" class="absolute pin-l pin-y px-4 flex items-center">
|
||||
<svg class="fill-current w-4 h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
</div>
|
||||
<a href="/" class="mx-auto inline-flex items-center">
|
||||
<svg class="w-8 h-8" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg>
|
||||
</a>
|
||||
<div id="sidebar-close" class="hidden">
|
||||
<div class="flex items-center absolute pin-r pin-y px-4">
|
||||
<svg class="fill-current w-4 h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content" class="px-6 pb-8 pt-20 md:pt-16 w-full max-w-lg mx-auto">
|
||||
<div id="app" v-cloak>
|
||||
<div class="markdown">
|
||||
<h1>{{ $page->title }}</h1>
|
||||
@if ($page->description)
|
||||
<div class="text-xl text-grey-dark mb-4">
|
||||
{{ $page->description }}
|
||||
</div>
|
||||
@endif
|
||||
@if ($page->features)
|
||||
@include('_partials.feature-badges', $page->features->all())
|
||||
@endif
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/app.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg style="height: 0; width: 0; position: absolute; visibility: hidden;">
|
||||
<defs>
|
||||
<linearGradient x1="0%" y1="0%" y2="100%" id="logoGradient">
|
||||
<stop stop-color="#2383AE" offset="0%"></stop>
|
||||
<stop stop-color="#6DD7B9" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@if ($page->production)
|
||||
<!-- Algolia DocSearch -->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
docsearch({
|
||||
apiKey: '3df93446658cd9c4e314d4c02a052188',
|
||||
indexName: 'tailwindcss',
|
||||
inputSelector: '#docsearch',
|
||||
});
|
||||
</script>
|
||||
@endif
|
||||
@endpush
|
||||
@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="bg-white antialiased">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00b4b6">
|
||||
<title>{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }}</title>
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
@yield('meta')
|
||||
<link rel="stylesheet" href="https://use.typekit.net/iqy1okj.css">
|
||||
<link rel="stylesheet" href="{{ mix('/css/main.css') }}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
@stack('headScripts')
|
||||
</head>
|
||||
<body data-sidebar-visible="true" class="font-aktiv font-normal text-black leading-normal">
|
||||
|
||||
@yield('body')
|
||||
|
||||
@if ($page->production)
|
||||
<!-- Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109068504-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-109068504-1');
|
||||
</script>
|
||||
@endif
|
||||
|
||||
@stack('scripts')
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,32 +0,0 @@
|
||||
@php
|
||||
$scroll = isset($scroll) ? $scroll : true;
|
||||
$scroll = (count($rows) > 10 && ($scroll !== false));
|
||||
@endphp
|
||||
|
||||
<div class="border-t border-b border-grey-light overflow-hidden relative">
|
||||
<div class="{{ $scroll ? 'max-h-sm pb-10' : '' }} overflow-y-scroll">
|
||||
<table class="w-full text-left table-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
@foreach ($rows as $row)
|
||||
<tr>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-grey-light' : 'border-grey-lighter' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{!! $row[0] !!}</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-grey-light' : 'border-grey-lighter' }} font-mono text-xs text-blue-dark whitespace-pre">{!! $row[1] !!}</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-grey-light' : 'border-grey-lighter' }} text-sm text-grey-darker whitespace-no-wrap lg:whitespace-normal">{!! $row[2] !!}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@if ($scroll)
|
||||
<div class="bg-white opacity-50 text-center absolute pin-b pin-x py-2 flex justify-center shadow-md-light">
|
||||
<svg class="h-6 w-6 fill-current text-grey-dark" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@ -1,8 +0,0 @@
|
||||
<div class="rounded overflow-hidden border-2 border-grey-light mb-8 bg-white">
|
||||
<div class="border-b-2 border-grey-light p-4 {{ $class ?? '' }}">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
<div class="p-4 bg-grey-lightest">
|
||||
<pre class="language-{{ $lang ?? 'html' }}" style="margin: 0; padding: 0;"><code>{{ e($code ?? $slot) }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,21 +0,0 @@
|
||||
<div class="border-2 border-grey-light rounded mb-8">
|
||||
<div class="bg-grey-lightest p-4 font-mono text-sm">
|
||||
<div class="whitespace-pre text-grey-dark">{</div>
|
||||
<div class="whitespace-pre text-grey-light"> // ...</div>
|
||||
<div class="whitespace-pre text-grey-dark"><span class="text-purple-dark"> {{ $key }}</span>: {</div>
|
||||
<div>{!! collect(explode("\n", $slot))->map(function ($line) {
|
||||
if (starts_with($line, '+')) {
|
||||
return '<div class="text-blue-dark"><span class="text-blue-light">+</span> ' . e(trim(substr($line, 1))) . '</div>';
|
||||
}
|
||||
if (starts_with($line, '-')) {
|
||||
return '<div class="text-grey"><span class="text-grey">-</span> ' . e(trim(substr($line, 1))) . '</div>';
|
||||
}
|
||||
if (starts_with($line, '//')) {
|
||||
return '<div class="text-grey-light"> ' . e(trim($line)) . '</div>';
|
||||
}
|
||||
return '<div class="text-grey-darker"> ' . e(trim($line)) . '</div>';
|
||||
})->implode("\n") !!}</div>
|
||||
<div class="whitespace-pre text-grey-dark"> }</div>
|
||||
<div class="whitespace-pre text-grey-dark">}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,67 +0,0 @@
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-wrap -mb-2">
|
||||
@if ($responsive)
|
||||
<a href="#responsive" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
|
||||
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Responsive</span>
|
||||
</a>
|
||||
@else
|
||||
<span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-full bg-grey text-white mr-1">
|
||||
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Responsive</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($customizable)
|
||||
<a href="#customizing" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
|
||||
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Customizable</span>
|
||||
</a>
|
||||
@else
|
||||
<span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-full bg-grey text-white mr-1">
|
||||
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Customizable</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($hover)
|
||||
<a href="#hover" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
|
||||
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Hover</span>
|
||||
</a>
|
||||
@else
|
||||
<span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-full bg-grey text-white mr-1">
|
||||
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Hover</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($focus)
|
||||
<span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
|
||||
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Focus</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-full bg-grey text-white mr-1">
|
||||
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Focus</span>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@ -1,9 +0,0 @@
|
||||
<div class="mt-8 v-cloak-hidden">
|
||||
<responsive-code-sample code="{{ e($code) }}">
|
||||
<div slot="none">{{ $none }}</div>
|
||||
<div slot="sm">{{ $sm }}</div>
|
||||
<div slot="md">{{ $md }}</div>
|
||||
<div slot="lg">{{ $lg }}</div>
|
||||
<div slot="xl">{{ $xl }}</div>
|
||||
</responsive-code-sample>
|
||||
</div>
|
||||
@ -1,49 +0,0 @@
|
||||
@php
|
||||
$whichVariants = "only $variants[0]";
|
||||
for ($i = 1; $i < count($variants); $i++) {
|
||||
$whichVariants .= (($i == count($variants) - 1) ? ' and ' : ', ') . $variants[$i];
|
||||
}
|
||||
|
||||
$currentVariants = '\'' . collect($variants)->implode('\', \'') . '\'';
|
||||
|
||||
$extraVariants = collect([
|
||||
'responsive',
|
||||
'hover',
|
||||
'focus',
|
||||
'group-hover',
|
||||
])->diff($variants)
|
||||
->take(3 - count($variants))
|
||||
->implode(' and ');
|
||||
@endphp
|
||||
|
||||
<h3>Responsive, Hover, and Focus Variants</h3>
|
||||
|
||||
<p>By default, {{ $whichVariants }} variants are generated for {{ $utility['name'] }} utilities.</p>
|
||||
|
||||
<p>You can control which variants are generated for the {{ $utility['name'] }} utilities by modifying the <code>{{ $utility['property'] }}</code> property in the <code>modules</code> section of your Tailwind config file.</p>
|
||||
|
||||
<p>For example, this config will also generate {{ $extraVariants }} variants:</p>
|
||||
|
||||
@component('_partials.customized-config', ['key' => 'modules'])
|
||||
// ...
|
||||
- {{ $utility['property'] }}: [{{$currentVariants}}],
|
||||
+ {{ $utility['property'] }}: ['responsive', 'hover', 'focus'],
|
||||
@endcomponent
|
||||
|
||||
@isset($extraMessage)
|
||||
<p>{!! $extraMessage !!}</p>
|
||||
@endif
|
||||
|
||||
<h3>Disabling</h3>
|
||||
|
||||
<p>If you don't plan to use the {{ $utility['name'] }} utilities in your project, you can disable them entirely by setting the <code>{{ $utility['property'] }}</code> property to <code>false</code> in the <code>modules</code> section of your config file:</p>
|
||||
|
||||
@component('_partials.customized-config', ['key' => 'modules'])
|
||||
// ...
|
||||
- {{ $utility['property'] }}: [{{$currentVariants}}],
|
||||
+ {{ $utility['property'] }}: false,
|
||||
@endcomponent
|
||||
|
||||
@isset($extraMessage)
|
||||
<p>{!! $extraMessage !!}</p>
|
||||
@endif
|
||||
@ -1,13 +0,0 @@
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="fill-current h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed examples are coming soon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,11 +0,0 @@
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light text-blue-darkest px-4 py-3 mb-4">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="fill-current h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon, but in the meantime here's a quick class reference.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/mstile-150x150.png"/>
|
||||
<TileColor>#00aba9</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
@ -1,141 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Adding New Utilities"
|
||||
description: null
|
||||
---
|
||||
|
||||
Although Tailwind provides a pretty comprehensive set of utility classes out of the box, you're inevitably going to run into situations where you need to add a few of your own.
|
||||
|
||||
Deciding on the best way to extend a framework can be paralyzing, so here's some best practices and tools to help you add your own utilities "the Tailwind way."
|
||||
|
||||
## CSS Structure
|
||||
|
||||
A bare-bones Tailwind setup is a single CSS file that looks like this:
|
||||
|
||||
```less
|
||||
@@tailwind preflight;
|
||||
|
||||
@@tailwind utilities;
|
||||
```
|
||||
|
||||
In CSS, **the order of your rule definitions is extremely important**.
|
||||
|
||||
If two rules have the same [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity), the rule defined *last* is the rule that is applied.
|
||||
|
||||
For example, given the following CSS:
|
||||
|
||||
```less
|
||||
.bg-red {
|
||||
background: #ff0000;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #00ff00;
|
||||
}
|
||||
```
|
||||
|
||||
...and the following HTML:
|
||||
|
||||
```html
|
||||
<div class="bg-green bg-red"></div>
|
||||
```
|
||||
|
||||
...the `div` would be green, because `.bg-green` is defined *after* `.bg-red` in the CSS file.
|
||||
|
||||
For this reason, **we recommend defining any custom utility classes at the end of your stylesheet,** *after* you inject Tailwind's utility classes:
|
||||
|
||||
```less
|
||||
@@tailwind preflight;
|
||||
|
||||
@@tailwind utilities;
|
||||
|
||||
.bg-cover-image {
|
||||
background-image: url('/path/to/image.jpg');
|
||||
}
|
||||
```
|
||||
|
||||
This way your custom utilities can override Tailwind utilities if needed, although you should strive to avoid applying two utility classes to an element that target the same CSS property if at all possible.
|
||||
|
||||
If you're using a preprocessor like Less, Sass, or Stylus, consider keeping your utilities in a separate file and importing them:
|
||||
|
||||
```less
|
||||
@@tailwind preflight;
|
||||
|
||||
@@tailwind utilities;
|
||||
|
||||
@@import "custom-utilities";
|
||||
```
|
||||
|
||||
## Making custom utilities responsive
|
||||
|
||||
If you'd like to create responsive versions of your own utilities based on the breakpoints defined in your Tailwind config file, wrap your utilities in the `@responsive { ... }` directive:
|
||||
|
||||
```less
|
||||
@@tailwind preflight;
|
||||
|
||||
@@tailwind utilities;
|
||||
|
||||
@@responsive {
|
||||
.bg-cover-image {
|
||||
background-image: url('/path/to/image.jpg');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Tailwind will intelligently group the responsive versions into its existing media queries which are output at the very end of the stylesheet. This ensures that any responsive utilities will always take precedence over unprefixed utilities.
|
||||
|
||||
The above code would generate CSS that looks something like this:
|
||||
|
||||
```css
|
||||
/* Preflight styles rendered here... */
|
||||
html { ... }
|
||||
/* ... */
|
||||
|
||||
/* Tailwind utilities rendered here... */
|
||||
.bg-red { ... }
|
||||
/* ... */
|
||||
|
||||
.bg-cover-image {
|
||||
background-image: url('/path/to/image.jpg');
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
/* Tailwind utilities rendered here... */
|
||||
.sm\:bg-red { ... }
|
||||
/* ... */
|
||||
|
||||
.sm\:bg-cover-image {
|
||||
background-image: url('/path/to/image.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* Tailwind utilities rendered here... */
|
||||
.md\:bg-red { ... }
|
||||
/* ... */
|
||||
|
||||
.md\:bg-cover-image {
|
||||
background-image: url('/path/to/image.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
/* Tailwind utilities rendered here... */
|
||||
.lg\:bg-red { ... }
|
||||
/* ... */
|
||||
|
||||
.lg\:bg-cover-image {
|
||||
background-image: url('/path/to/image.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
/* Tailwind utilities rendered here... */
|
||||
.xl\:bg-red { ... }
|
||||
/* ... */
|
||||
|
||||
.xl\:bg-cover-image {
|
||||
background-image: url('/path/to/image.jpg');
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,44 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Background Attachment"
|
||||
description: "Utilities for controlling how a background image behaves when scrolling."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.bg-fixed',
|
||||
'background-attachment: fixed;',
|
||||
'Fix the background image relative to the viewport.',
|
||||
],
|
||||
[
|
||||
'.bg-local',
|
||||
'background-attachment: local;',
|
||||
'Scroll the background image with the container and the viewport.',
|
||||
],
|
||||
[
|
||||
'.bg-scroll',
|
||||
'background-attachment: scroll;',
|
||||
'Scroll the background image with the viewport but not with the container.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'background attachment',
|
||||
'property' => 'backgroundAttachment',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,55 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Background Color"
|
||||
description: "Utilities for controlling an element's background color."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: true
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => $page->config['colors']->map(function ($value, $name) {
|
||||
$class = ".bg-{$name}";
|
||||
$code = "background-color: {$value};";
|
||||
$color = implode(' ', array_reverse(explode('-', $name)));
|
||||
$description = "Set the background color of an element to {$color}.";
|
||||
return [
|
||||
$class,
|
||||
$code,
|
||||
$description,
|
||||
];
|
||||
})->values()->all()
|
||||
])
|
||||
|
||||
## Hover
|
||||
|
||||
In addition to the standard responsive variations, background colors also come in `hover:` variations that apply the given background color on hover.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="bg-blue hover:bg-purple text-center text-white font-semibold mx-auto px-4 py-2">
|
||||
Hover over this element
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
|
||||
|
||||
```html
|
||||
<button class="... md:bg-orange md:hover:bg-red ...">Button</button>
|
||||
```
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'background color',
|
||||
'property' => 'backgroundColors',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
'hover',
|
||||
],
|
||||
])
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Background Position"
|
||||
description: "Utilities for controlling the position of an element's background image."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.bg-bottom',
|
||||
'background-position: bottom;',
|
||||
'Place the background image on the bottom edge.',
|
||||
],
|
||||
[
|
||||
'.bg-center',
|
||||
'background-position: center;',
|
||||
'Place the background image in the center.',
|
||||
],
|
||||
[
|
||||
'.bg-left',
|
||||
'background-position: left;',
|
||||
'Place the background image on the left edge.',
|
||||
],
|
||||
[
|
||||
'.bg-left-bottom',
|
||||
'background-position: left bottom;',
|
||||
'Place the background image on the left bottom edge.',
|
||||
],
|
||||
[
|
||||
'.bg-left-top',
|
||||
'background-position: left top;',
|
||||
'Place the background image on the left top edge.',
|
||||
],
|
||||
[
|
||||
'.bg-right',
|
||||
'background-position: right;',
|
||||
'Place the background image on the right edge.',
|
||||
],
|
||||
[
|
||||
'.bg-right-bottom',
|
||||
'background-position: right bottom;',
|
||||
'Place the background image on the right bottom edge.',
|
||||
],
|
||||
[
|
||||
'.bg-right-top',
|
||||
'background-position: right top;',
|
||||
'Place the background image on the right top edge.',
|
||||
],
|
||||
[
|
||||
'.bg-top',
|
||||
'background-position: top;',
|
||||
'Place the background image on the top edge.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'background position',
|
||||
'property' => 'backgroundPosition',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Background Repeat"
|
||||
description: "Utilities for controlling the repetition of an element's background image."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.bg-repeat',
|
||||
'background-repeat: repeat;',
|
||||
'Repeat the background image both vertically and horizontally.',
|
||||
],
|
||||
[
|
||||
'.bg-no-repeat',
|
||||
'background-repeat: no-repeat;',
|
||||
'Don\'t repeat the background image.',
|
||||
],
|
||||
[
|
||||
'.bg-repeat-x',
|
||||
'background-repeat: repeat-x;',
|
||||
'Repeat the background image only horizontally.',
|
||||
],
|
||||
[
|
||||
'.bg-repeat-y',
|
||||
'background-repeat: repeat-y;',
|
||||
'Repeat the background image only vertically.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'background repeat',
|
||||
'property' => 'backgroundRepeat',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,39 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Background Size"
|
||||
description: "Utilities for controlling the background size of an element's background image."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.bg-cover',
|
||||
'background-size: cover;',
|
||||
"Scale the image until it fills the background layer.",
|
||||
],
|
||||
[
|
||||
'.bg-contain',
|
||||
'background-size: contain;',
|
||||
"Scale the image to the outer edges without cropping or stretching.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'background size',
|
||||
'property' => 'backgroundSize',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,55 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Color"
|
||||
description: "Utilities for controlling the color of an element's borders."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: true
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => $page->config['colors']->map(function ($value, $name) {
|
||||
$class = ".border-{$name}";
|
||||
$code = "border-color: {$value};";
|
||||
$color = implode(' ', array_reverse(explode('-', $name)));
|
||||
$description = "Set the border color of an element to {$color}.";
|
||||
return [
|
||||
$class,
|
||||
$code,
|
||||
$description,
|
||||
];
|
||||
})->values()->all()
|
||||
])
|
||||
|
||||
## Hover
|
||||
|
||||
In addition to the standard responsive variations, border colors also come in `hover:` variations that apply the given border color on hover.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'text-center'])
|
||||
<button class="border-2 border-blue hover:border-red bg-transparent text-blue-dark hover:text-red-dark py-2 px-4 font-semibold rounded">
|
||||
Button
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
|
||||
|
||||
```html
|
||||
<button class="... md:border-blue md:hover:border-red ...">Button</button>
|
||||
```
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'border color',
|
||||
'property' => 'borderColors',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
'hover',
|
||||
],
|
||||
])
|
||||
@ -1,378 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Radius"
|
||||
description: "Utilities for controlling the border radius of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.rounded-none',
|
||||
'border-radius: 0;',
|
||||
"Remove any border radius from all corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-sm',
|
||||
'border-radius: .125rem;',
|
||||
"Apply a small border radius to all corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded',
|
||||
'border-radius: .25rem;',
|
||||
"Apply the default border radius to all corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-lg',
|
||||
'border-radius: .5rem;',
|
||||
"Apply a large border radius to all corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-full',
|
||||
'border-radius: 9999px;',
|
||||
"Fully round all corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-t-none',
|
||||
"border-top-left-radius: 0;\nborder-top-right-radius: 0;",
|
||||
"Remove any border radius from the top corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-r-none',
|
||||
"border-top-right-radius: 0;\nborder-bottom-right-radius: 0;",
|
||||
"Remove any border radius from the right corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-b-none',
|
||||
"border-bottom-right-radius: 0;\nborder-bottom-left-radius: 0;",
|
||||
"Remove any border radius from the bottom corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-l-none',
|
||||
"border-top-left-radius: 0;\nborder-bottom-left-radius: 0;",
|
||||
"Remove any border radius from the left corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-t-sm',
|
||||
"border-top-left-radius: .125rem;\nborder-top-right-radius: .125rem;",
|
||||
"Apply a small border radius to the top corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-r-sm',
|
||||
"border-top-right-radius: .125rem;\nborder-bottom-right-radius: .125rem;",
|
||||
"Apply a small border radius to the right corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-b-sm',
|
||||
"border-bottom-right-radius: .125rem;\nborder-bottom-left-radius: .125rem;",
|
||||
"Apply a small border radius to the bottom corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-l-sm',
|
||||
"border-top-left-radius: .125rem;\nborder-bottom-left-radius: .125rem;",
|
||||
"Apply a small border radius to the left corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-t',
|
||||
"border-top-left-radius: .25rem;\nborder-top-right-radius: .25rem;",
|
||||
"Apply the default border radius to the top corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-r',
|
||||
"border-top-right-radius: .25rem;\nborder-bottom-right-radius: .25rem;",
|
||||
"Apply the default border radius to the right corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-b',
|
||||
"border-bottom-right-radius: .25rem;\nborder-bottom-left-radius: .25rem;",
|
||||
"Apply the default border radius to the bottom corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-l',
|
||||
"border-top-left-radius: .25rem;\nborder-bottom-left-radius: .25rem;",
|
||||
"Apply the default border radius to the left corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-t-lg',
|
||||
"border-top-left-radius: .5rem;\nborder-top-right-radius: .5rem;",
|
||||
"Apply a large border radius to the top corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-r-lg',
|
||||
"border-top-right-radius: .5rem;\nborder-bottom-right-radius: .5rem;",
|
||||
"Apply a large border radius to the right corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-b-lg',
|
||||
"border-bottom-right-radius: .5rem;\nborder-bottom-left-radius: .5rem;",
|
||||
"Apply a large border radius to the bottom corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-l-lg',
|
||||
"border-top-left-radius: .5rem;\nborder-bottom-left-radius: .5rem;",
|
||||
"Apply a large border radius to the left corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-t-full',
|
||||
"border-top-left-radius: 9999px;\nborder-top-right-radius: 9999px;",
|
||||
"Fully round the top corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-r-full',
|
||||
"border-top-right-radius: 9999px;\nborder-bottom-right-radius: 9999px;",
|
||||
"Fully round the right corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-b-full',
|
||||
"border-bottom-right-radius: 9999px;\nborder-bottom-left-radius: 9999px;",
|
||||
"Fully round the bottom corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-l-full',
|
||||
"border-top-left-radius: 9999px;\nborder-bottom-left-radius: 9999px;",
|
||||
"Fully round the left corners of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-tl-none',
|
||||
'border-top-left-radius: 0;',
|
||||
"Remove any border radius from the top left corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-tr-none',
|
||||
'border-top-right-radius: 0;',
|
||||
"Remove any border radius from the top right corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-br-none',
|
||||
'border-bottom-right-radius: 0;',
|
||||
"Remove any border radius from the bottom right corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-bl-none',
|
||||
'border-bottom-left-radius: 0;',
|
||||
"Remove any border radius from the bottom left corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-tl-sm',
|
||||
'border-top-left-radius: .125rem;',
|
||||
"Apply a small border radius to the top left corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-tr-sm',
|
||||
'border-top-right-radius: .125rem;',
|
||||
"Apply a small border radius to the top right corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-br-sm',
|
||||
'border-bottom-right-radius: .125rem;',
|
||||
"Apply a small border radius to the bottom right corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-bl-sm',
|
||||
'border-bottom-left-radius: .125rem;',
|
||||
"Apply a small border radius to the bottom left corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-tl',
|
||||
'border-top-left-radius: .25rem;',
|
||||
"Apply the default border radius to the top left corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-tr',
|
||||
'border-top-right-radius: .25rem;',
|
||||
"Apply the default border radius to the top right corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-br',
|
||||
'border-bottom-right-radius: .25rem;',
|
||||
"Apply the default border radius to the bottom right corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-bl',
|
||||
'border-bottom-left-radius: .25rem;',
|
||||
"Apply the default border radius to the bottom left corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-tl-lg',
|
||||
'border-top-left-radius: .5rem;',
|
||||
"Apply a large border radius to the top left corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-tr-lg',
|
||||
'border-top-right-radius: .5rem;',
|
||||
"Apply a large border radius to the top right corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-br-lg',
|
||||
'border-bottom-right-radius: .5rem;',
|
||||
"Apply a large border radius to the bottom right corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-bl-lg',
|
||||
'border-bottom-left-radius: .5rem;',
|
||||
"Apply a large border radius to the bottom left corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-tl-full',
|
||||
'border-top-left-radius: 9999px;',
|
||||
"Fully round the top left corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-tr-full',
|
||||
'border-top-right-radius: 9999px;',
|
||||
"Fully round the top right corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-br-full',
|
||||
'border-bottom-right-radius: 9999px;',
|
||||
"Fully round the bottom right corner of an element.",
|
||||
],
|
||||
[
|
||||
'.rounded-bl-full',
|
||||
'border-bottom-left-radius: 9999px;',
|
||||
"Fully round the bottom left corner of an element.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Rounded corners
|
||||
|
||||
Use the `.rounded-sm`, `.rounded`, or `.rounded-lg` utilities to apply different border radius sizes to an element.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-sm">.rounded-sm</div>
|
||||
<div class="bg-grey-light mr-3 p-4 rounded">.rounded</div>
|
||||
<div class="bg-grey-light p-4 rounded-lg">.rounded-lg</div>
|
||||
@slot('code')
|
||||
<div class="rounded-sm"></div>
|
||||
<div class="rounded"></div>
|
||||
<div class="rounded-lg"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Pills and circles
|
||||
|
||||
Use the `.rounded-full` utility to create pills and circles.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex items-center justify-around text-sm'])
|
||||
<div class="bg-grey-light mr-3 py-2 px-4 rounded-full">Pill shape</div>
|
||||
<div class="bg-grey-light h-16 w-16 rounded-full flex items-center justify-center">Circle</div>
|
||||
@slot('code')
|
||||
<div class="rounded-full py-2 px-4">Pill shape</div>
|
||||
<div class="rounded-full h-16 w-16 flex items-center justify-center">Circle</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## No rounding
|
||||
|
||||
Use `.rounded-none` to remove an existing border radius from an element.
|
||||
|
||||
This is most commonly used to remove a border radius that was applied at a smaller breakpoint.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
|
||||
<div class="p-4 rounded-none bg-grey-light">.rounded-none</div>
|
||||
@slot('code')
|
||||
<div class="rounded-none"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Rounding sides separately
|
||||
|
||||
Use `.rounded-{t|r|b|l}{-size?}` to only round one side an element.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-t-lg">.rounded-t-lg</div>
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-r-lg">.rounded-r-lg</div>
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-b-lg">.rounded-b-lg</div>
|
||||
<div class="bg-grey-light p-4 rounded-l-lg">.rounded-l-lg</div>
|
||||
@slot('code')
|
||||
<div class="rounded-t-lg"></div>
|
||||
<div class="rounded-r-lg"></div>
|
||||
<div class="rounded-b-lg"></div>
|
||||
<div class="rounded-l-lg"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Rounding corners separately
|
||||
|
||||
Use `.rounded-{tl|tr|br|bl}{-size?}` to only round one corner an element.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-tl-lg">.rounded-tl-lg</div>
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-tr-lg">.rounded-tr-lg</div>
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-br-lg">.rounded-br-lg</div>
|
||||
<div class="bg-grey-light p-4 rounded-bl-lg">.rounded-bl-lg</div>
|
||||
@slot('code')
|
||||
<div class="rounded-tl-lg"></div>
|
||||
<div class="rounded-tr-lg"></div>
|
||||
<div class="rounded-br-lg"></div>
|
||||
<div class="rounded-bl-lg"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control the border radius of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border radius utility. For example, use `md:rounded-lg` to apply the `rounded-lg` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-grey w-12 h-12 rounded"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-grey w-12 h-12 rounded-t"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-grey w-12 h-12 rounded-b-lg"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-grey w-12 h-12 rounded-none"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-grey w-12 h-12 rounded-r"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:rounded sm:rounded-t md:rounded-b-lg lg:rounded-none xl:rounded-r ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
By default Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `borderRadius` section of your Tailwind config.
|
||||
|
||||
@component('_partials.customized-config', ['key' => 'borderRadius'])
|
||||
'none': '0',
|
||||
- 'sm': '.125rem',
|
||||
- default: '.25rem',
|
||||
+ default: '4px',
|
||||
- 'lg': '.5rem',
|
||||
- 'full': '9999px',
|
||||
+ 'large': '12px',
|
||||
@endcomponent
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'border radius',
|
||||
'property' => 'borderRadius',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,50 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Style"
|
||||
description: "Utilities for controlling the style of an element's borders."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.border-solid',
|
||||
'border-style: solid;',
|
||||
"Sets the border style on an element to solid.",
|
||||
],
|
||||
[
|
||||
'.border-dashed',
|
||||
'border-style: dashed;',
|
||||
"Sets the border style on an element to dashed.",
|
||||
],
|
||||
[
|
||||
'.border-dotted',
|
||||
'border-style: dotted;',
|
||||
"Sets the border style on an element to dotted.",
|
||||
],
|
||||
[
|
||||
'.border-none',
|
||||
'border-style: none;',
|
||||
"Disables the border on an element.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'border style',
|
||||
'property' => 'borderStyle',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,51 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Width"
|
||||
description: "Utilities for controlling the width an element's borders."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
Add borders to any element using the `.border{-side?}{-width?}` syntax.
|
||||
|
||||
For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm leading-none">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-grey-darker uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">border</code></div>
|
||||
</div>
|
||||
<div class="pl-12 pr-12 border-l">
|
||||
<div class="mb-3 text-grey-darker"><span class="uppercase">Side</span> <span class="text-grey-dark text-xs">(optional)</span></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter"> </code> All <em class="text-xs text-grey-dark">(default)</em></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
|
||||
</div>
|
||||
<div class="pl-12 border-l">
|
||||
<div class="mb-3 text-grey-darker"><span class="uppercase">Width</span> <span class="text-grey-dark text-xs">(optional)</span></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0px</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter"> </code> 1px <em class="text-xs text-grey-dark">(default)</em></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 2px</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 4px</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'border width',
|
||||
'property' => 'borderWidths',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,458 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Colors"
|
||||
description: null
|
||||
---
|
||||
|
||||
Developing an organized, consistent and beautiful color palette is critical to the design success of a project. Tailwind provides a fantastic color system that makes this very easy to accomplish.
|
||||
|
||||
## Default color palette
|
||||
|
||||
To get you started, we've provided a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your color palette. That said, don't hesitate to [customize](#customizing) them for your project.
|
||||
|
||||
<div class="flex flex-wrap -mx-4">
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-black bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="uppercase mb-6">Grey</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-black bg-white px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>White</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['white']) }}</span>
|
||||
</div>
|
||||
<div class="text-black bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lightest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-black bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lighter</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-black bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Light</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-black bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-grey-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Dark</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-grey-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darker</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-grey-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darkest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-darkest']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-black px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Black</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['black']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4">
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-white bg-red px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="uppercase mb-6">Red</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-red-darkest bg-red-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lightest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-red-darkest bg-red-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lighter</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-red-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Light</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-red px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-red-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Dark</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-red-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darker</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-red-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darkest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red-darkest']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-white bg-orange px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="uppercase mb-6">Orange</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-orange-darkest bg-orange-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lightest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-orange-darkest bg-orange-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lighter</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-orange-darkest bg-orange-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Light</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-orange px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-orange-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Dark</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-orange-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darker</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-orange-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darkest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange-darkest']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-yellow-darkest bg-yellow px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="uppercase mb-6">Yellow</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-yellow-darkest bg-yellow-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lightest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-yellow-darkest bg-yellow-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lighter</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-yellow-darkest bg-yellow-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Light</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-yellow-darkest bg-yellow px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow']) }}</span>
|
||||
</div>
|
||||
<div class="text-yellow-darkest bg-yellow-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Dark</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-yellow-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darker</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-yellow-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darkest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow-darkest']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-white bg-green px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="uppercase mb-6">Green</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-green-darkest bg-green-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lightest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-green-darkest bg-green-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lighter</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-green-darkest bg-green-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Light</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-green px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-green-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Dark</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-green-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darker</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-green-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darkest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green-darkest']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-white bg-teal px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="uppercase mb-6">Teal</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-teal-darkest bg-teal-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lightest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-teal-darkest bg-teal-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lighter</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-teal-darkest bg-teal-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Light</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-teal px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-teal-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Dark</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-teal-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darker</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-teal-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darkest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal-darkest']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-white bg-blue px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="uppercase mb-6">Blue</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-blue-darkest bg-blue-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lightest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-blue-darkest bg-blue-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lighter</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-blue-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Light</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-blue px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-blue-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Dark</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-blue-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darker</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-blue-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darkest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue-darkest']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-white bg-indigo px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="uppercase mb-6">Indigo</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-indigo-darkest bg-indigo-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lightest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-indigo-darkest bg-indigo-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lighter</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-indigo-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Light</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-indigo px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-indigo-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Dark</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-indigo-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darker</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-indigo-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darkest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo-darkest']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-white bg-purple px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="uppercase mb-6">Purple</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-purple-darkest bg-purple-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lightest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-purple-darkest bg-purple-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lighter</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-purple-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Light</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-purple px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-purple-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Dark</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-purple-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darker</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-purple-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darkest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple-darkest']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-white bg-pink px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="uppercase mb-6">Pink</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-pink-darkest bg-pink-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lightest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-pink-darkest bg-pink-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Lighter</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-pink-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Light</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-pink px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Base</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-pink-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Dark</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-pink-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darker</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-pink-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span>Darkest</span>
|
||||
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink-darkest']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Customizing
|
||||
|
||||
Tailwind makes it a breeze to modify the default color palette for you project. Remember, you own these colors and nothing will break if you change everything about them.
|
||||
|
||||
By default Tailwind defines the entire color palette in a `colors` object at the top of your Tailwind config file. These colors are then assigned to `textColors`, `backgroundColors` and `borderColors`. This approach works well since it provides a consistent naming system across all the utilities. However, you're welcome to modify them independently of one-another as well.
|
||||
|
||||
```js
|
||||
var colors = {
|
||||
'transparent': 'transparent',
|
||||
|
||||
'black': '#222b2f',
|
||||
'grey-darkest': '#364349',
|
||||
'grey-darker': '#596a73',
|
||||
'grey-dark': '#70818a',
|
||||
'grey': '#9babb4',
|
||||
|
||||
// ...
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
colors: colors,
|
||||
textColors: colors,
|
||||
backgroundColors: colors,
|
||||
borderColors: Object.assign({ default: colors['grey-light'] }, colors),
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
You'll notice above that the color palette is also assigned to the `colors` key of your Tailwind config. This makes it easy to access them in your custom CSS using the `config()` function. For example:
|
||||
|
||||
```css
|
||||
.error { color: config('colors.grey-darker') }
|
||||
```
|
||||
|
||||
## Naming
|
||||
|
||||
In the default color palette we've used literal color names, like `red`, `green` and `blue`. Another common approach to naming colors is choosing functional names based on how the colors are used, such as `primary`, `secondary`, and `brand`.
|
||||
|
||||
You can also choose different approaches to how you name your color variants. In the default color palette we've again used literal variants, like `light`, `dark`, and `darker`. Another common approach here is to use a numeric scale, like `100`, `200` and `300`.
|
||||
|
||||
You should feel free to choose whatever color naming approach makes the most sense to you.
|
||||
@ -1,342 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Configuration"
|
||||
description: "A guide to configuring and customizing your Tailwind installation."
|
||||
---
|
||||
|
||||
At the heart of every Tailwind project is a JavaScript configuration file that serves as the home for your project's design system.
|
||||
|
||||
It's where you define your color palette, font stacks, type scale, border sizes, breakpoints, opacity scale, you name it. Your config file is like an executable style guide for your project.
|
||||
|
||||
We provide a sensible default configuration with a very generous set of values to get you started, but you own this file; you're encouraged to change it as much as you need to fit the goals of your design.
|
||||
|
||||
It's important to understand that unlike other CSS frameworks you might have used, **none of the settings in this file are coupled to each other**. Nothing bad will happen even if you completely delete all of the values for a given module.
|
||||
|
||||
## Generating your configuration file
|
||||
|
||||
Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package:
|
||||
|
||||
<div class="bg-grey-lightest font-mono text-sm p-4">
|
||||
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-grey-dark">[filename]</span></div>
|
||||
</div>
|
||||
|
||||
By default, `tailwind init` will generate a `tailwind.js` config file at the root of your project, but feel free to name this file differently or store it in a different location if you prefer.
|
||||
|
||||
### Default configuration
|
||||
|
||||
Your generated configuration file contains all of Tailwind's default configuration values, ready for you to customize.
|
||||
|
||||
<pre class="h-128 overflow-y-scroll language-javascript"><code>{!! str_replace('// var defaultConfig', 'var defaultConfig', file_get_contents(dirname(dirname(__DIR__)).'/defaultConfig.stub.js')) !!}</code></pre>
|
||||
|
||||
## Configuration Sections
|
||||
|
||||
### Colors
|
||||
|
||||
The `colors` property doesn't actually affect your generated CSS on its own, but it's the perfect place to centralize your color palette so you can refer to it in your own CSS using Tailwind's [`config()`](/docs/functions-and-directives#config) function.
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
var colors = {
|
||||
'transparent': 'transparent',
|
||||
// ...
|
||||
'pink-lightest': '#ffebef',
|
||||
}
|
||||
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
colors: colors,
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
By default, the `colors` property simply references a `colors` variable defined earlier in the file. Using a separate variable for your color palette like this makes it easy to re-use those colors when defining the color palette for individual utilities, like background colors, text colors, or border colors.
|
||||
|
||||
Learn more about defining colors in Tailwind in the [Colors](/docs/colors) documentation.
|
||||
|
||||
### Screens
|
||||
|
||||
The `screens` property is where you define your project's breakpoints, and will be used to generate responsive versions of Tailwind's utility classes.
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
screens: {
|
||||
'sm': '576px',
|
||||
'md': '768px',
|
||||
'lg': '992px',
|
||||
'xl': '1200px',
|
||||
},
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
We provide a familiar set of breakpoints that you might recognize from [Bootstrap](http://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) to get you started, but you're free to change these as needed to suit your project.
|
||||
|
||||
Learn more about customizing screens in the [Responsive Design](/docs/responsive-design#customizing-screens) documentation.
|
||||
|
||||
### Styles
|
||||
|
||||
The next set of properties define all of the values you'd like to use for utilities that are dynamically generated.
|
||||
|
||||
This includes things like:
|
||||
|
||||
- Background colors
|
||||
- Border widths
|
||||
- Font families
|
||||
- Font weights
|
||||
- Text sizes
|
||||
- Padding, margin, and negative margin scales
|
||||
- Width and height scales
|
||||
|
||||
...and many others.
|
||||
|
||||
For example, here's the section used to customize which border radius utilities will be generated:
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Border radius https://tailwindcss.com/docs/border-radius
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your border radius values. If a `default` radius
|
||||
| is provided, it will be made available as the non-suffixed `.rounded`
|
||||
| utility.
|
||||
|
|
||||
| If your scale includes a `0` value to reset already rounded corners, it's
|
||||
| a good idea to put it first so other values are able to override it.
|
||||
|
|
||||
| Class name: .rounded{-side?}{-size?}
|
||||
|
|
||||
*/
|
||||
|
||||
borderRadius: {
|
||||
'none': '0',
|
||||
'sm': '.125rem',
|
||||
default: '.25rem',
|
||||
'lg': '.5rem',
|
||||
'full': '9999px',
|
||||
},
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
Read through the generated config file or visit the "customizing" documentation for each module to learn more.
|
||||
|
||||
### Modules
|
||||
|
||||
The `modules` property is where you control which modules are generated, and what state variants to generate for each module.
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
|
||||
modules: {
|
||||
appearance: ['responsive'],
|
||||
backgroundAttachment: ['responsive'],
|
||||
backgroundColors: ['responsive', 'hover'],
|
||||
backgroundPosition: ['responsive'],
|
||||
backgroundRepeat: ['responsive'],
|
||||
// ...
|
||||
},
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
Each property is a module name pointing to an array of state variants to generate for that module.
|
||||
|
||||
The available state variants are:
|
||||
|
||||
- `responsive`, for generating breakpoint-specific versions of those utilities
|
||||
- `hover`, for generating versions of those utilities that only take effect on hover
|
||||
- `focus`, for generating versions of those utilities that only take effect on focus
|
||||
- `group-hover`, for generating versions of those utilities that only take effect when a marked parent element is hovered
|
||||
|
||||
Learn more about state variants in the ["State Variants" documentation](/docs/state-variants).
|
||||
|
||||
To include a module but not generate any state variants, use an empty array:
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
|
||||
modules: {
|
||||
|
||||
// Include the `appearance` utilities, but not responsive,
|
||||
// focus, hover, etc. versions.
|
||||
appearance: [],
|
||||
// ...
|
||||
},
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
To completely disable a module, set it to `false`:
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
|
||||
modules: {
|
||||
|
||||
// Don't include this module at all.
|
||||
appearance: false,
|
||||
// ...
|
||||
},
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
If a module is missing from your configuration file, the default configuration for that module will be used.
|
||||
|
||||
### Options
|
||||
|
||||
#### Prefix
|
||||
|
||||
The `prefix` option allows you to add a custom prefix to all of Tailwind's generated utility classes.
|
||||
|
||||
This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts.
|
||||
|
||||
For example, you could add a `tw-` prefix by setting the `prefix` option like so:
|
||||
|
||||
```js
|
||||
{
|
||||
// ...
|
||||
options: {
|
||||
prefix: 'tw-',
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
It's important to understand that this prefix is added to the beginning of each *utility* name, not to the entire class name.
|
||||
|
||||
That means that classes with responsive or state prefixes like `sm:` or `hover:` will still have the responsive or state prefix *first*, with your custom prefix appearing after the colon:
|
||||
|
||||
```html
|
||||
<div class="tw-text-lg md:tw-text-xl tw-bg-red hover:tw-bg-blue">
|
||||
<!-- -->
|
||||
</div>
|
||||
```
|
||||
|
||||
Prefixes are only added to standard Tailwind utilities; **no prefix will be added to your own custom utilities.**
|
||||
|
||||
That means if you add your own responsive utility like this:
|
||||
|
||||
```css
|
||||
@responsive {
|
||||
.bg-brand-gradient { ... }
|
||||
}
|
||||
```
|
||||
|
||||
...the generated responsive classes will not have your configured prefix:
|
||||
|
||||
```css
|
||||
.bg-brand-gradient { ... }
|
||||
@media (min-width: 576px) {
|
||||
.sm\:bg-brand-gradient { ... }
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.md\:bg-brand-gradient { ... }
|
||||
}
|
||||
@media (min-width: 992) {
|
||||
.lg\:bg-brand-gradient { ... }
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.xl\:bg-brand-gradient { ... }
|
||||
}
|
||||
```
|
||||
|
||||
If you'd like to prefix your own utilities as well, just add the prefix to the class definition:
|
||||
|
||||
```css
|
||||
@responsive {
|
||||
.tw-bg-brand-gradient { ... }
|
||||
}
|
||||
```
|
||||
|
||||
#### Important
|
||||
|
||||
The `important` option lets you control whether or not Tailwind's utilities should be marked with `!important`.
|
||||
|
||||
This can be really useful when using Tailwind with existing CSS that has high specificity selectors.
|
||||
|
||||
To generate utilities as `!important`, set the `important` key in your configuration options to `true`:
|
||||
|
||||
```js
|
||||
{
|
||||
// ...
|
||||
options: {
|
||||
important: true,
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now all of Tailwind's utility classes will be generated as `!important`:
|
||||
|
||||
```css
|
||||
.leading-none {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
.leading-tight {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
.leading-normal {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
.leading-loose {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
```
|
||||
|
||||
Note that any of your own custom utilities **will not** be marked as `!important` just by enabling this option.
|
||||
|
||||
If you'd like to make your own utilities `!important`, just add `!important` to the end of each declaration yourself:
|
||||
|
||||
```css
|
||||
@responsive {
|
||||
.bg-brand-gradient {
|
||||
background-image: linear-gradient(#3490dc, #6574cd) !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Separator
|
||||
|
||||
The `separator` option lets you customize what character or string should be used to separate state variant prefixes (screen sizes, `hover`, `focus`, etc.) from utility names (`text-center`, `items-end`, etc.).
|
||||
|
||||
We use a colon by default (`:`), but it can be useful to change this if you're using a templating language like [Pug](https://pugjs.org) that doesn't support special characters in class names.
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
|
||||
options: {
|
||||
// ...
|
||||
separator: '_',
|
||||
},
|
||||
|
||||
}
|
||||
```
|
||||
@ -1,67 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Container"
|
||||
description: "A component for fixing an element's width to the current breakpoint."
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left table-collapse">
|
||||
<colgroup>
|
||||
<col class="w-1/4">
|
||||
<col class="w-1/4">
|
||||
<col class="w-1/2">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Breakpoint</th>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-purple-dark" rowspan="5">.container</td>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-grey-dark"><span class="italic">None</span></td>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">width: 100%;</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">sm <span class="text-grey-dark italic">(576px)</span></td>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 576px;</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">md <span class="text-grey-dark italic">(768px)</span></td>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 768px;</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">lg <span class="text-grey-dark italic">(992px)</span></td>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 992px;</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">xl <span class="text-grey-dark italic">(1200px)</span></td>
|
||||
<td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 1200px;</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Tailwind's `.container` class sets the `max-width` of an element to match the `min-width` of the current breakpoint.
|
||||
|
||||
Note that unlike containers you might have used in other frameworks, **Tailwind's container does not center itself automatically and does not contain any built-in horizontal padding.**
|
||||
|
||||
To center a container, use the `.mx-auto` utility:
|
||||
|
||||
```html
|
||||
<div class="container mx-auto">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
```
|
||||
|
||||
To add horizontal padding, use the `.px-{size}` utilities:
|
||||
|
||||
```html
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
```
|
||||
@ -1,209 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Controlling File Size"
|
||||
description: "Strategies for keeping your generated CSS small and performant."
|
||||
---
|
||||
|
||||
Using the default configuration, Tailwind CSS comes in at **36.4kb minified and gzipped.**
|
||||
|
||||
Here's a few other popular frameworks for comparison:
|
||||
|
||||
- Bootstrap: 22.1kb
|
||||
- Bulma: 22.0kb
|
||||
- Foundation: 16.7kb
|
||||
- Tachyons: 13.6kb
|
||||
|
||||
By comparison Tailwind seems really heavy *(over 1.5x larger than Bootstrap!)*, but it turns out that this comparison isn't totally fair.
|
||||
|
||||
Tailwind is not a pre-packaged set of styles like a traditional CSS framework. Instead, Tailwind is a tool for generating CSS based on the style guide you define for your own project.
|
||||
|
||||
Because of this, **the generated file size will vary wildly from project to project** depending on your configuration file.
|
||||
|
||||
The default configuration file provides a **very generous** set of colors, breakpoints, sizes, margins, etc. by design. When you pull Tailwind down to prototype something, create a CodePen demo, or just try out the workflow, we want the experience to be as enjoyable and fluid as possible.
|
||||
|
||||
We don't want you to have to go and write new CSS because we didn't provide enough padding helpers out of the box, or because you wanted to use an orange color scheme for your demo and we only gave you blue.
|
||||
|
||||
This comes with a trade-off though: The default Tailwind build is significantly heavier than it would be on a real project with a purpose-built configuration file.
|
||||
|
||||
That said, here are a few strategies you can use to keep your generated CSS small and performant.
|
||||
|
||||
## Limiting your color palette
|
||||
|
||||
The default color palette includes a whopping [73 colors](/docs/colors) to make sure that if you're pulling Tailwind in for a prototype or demo, the color you're looking for is already there.
|
||||
|
||||
These colors are used for background colors, border colors, and text colors, all of which also have `hover:` variants, all of which have responsive variants at the five default screen sizes.
|
||||
|
||||
This means that by default, **there are 2190 classes generated** from this color palette, out of a total 4732 classes in the entire default build.
|
||||
|
||||
Here's how using a smaller color palette affects the overall file size:
|
||||
|
||||
- 73 colors *(default)*: 36.4kb
|
||||
- 50 colors: 30.4kb
|
||||
- 25 colors: 18.3kb
|
||||
|
||||
Not only can colors be removed globally, you can also remove them for a specific module.
|
||||
|
||||
For example, maybe you need 25 background colors but only 15 text colors. Instead of assigning your entire `colors` variable to the `textColors` property in your config, assign only the colors you need:
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
|
||||
textColors: {
|
||||
'black': colors['black'],
|
||||
'grey-darker': colors['grey-darker'],
|
||||
'grey-dark': colors['grey-dark'],
|
||||
'red-dark': colors['red-dark'],
|
||||
'red': colors['red'],
|
||||
'blue-dark': colors['blue-dark'],
|
||||
'blue': colors['blue'],
|
||||
// ...
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Since your config file is just JavaScript, you could even use a function like [`lodash#pick`](https://lodash.com/docs/4.17.4#pick) to make this a little less monotonous:
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
|
||||
textColors: _.pick(colors, [
|
||||
'black',
|
||||
'grey-darker',
|
||||
'grey-dark',
|
||||
'red-dark',
|
||||
'red',
|
||||
'blue-dark',
|
||||
'blue',
|
||||
]),
|
||||
}
|
||||
```
|
||||
|
||||
## Removing unused breakpoints
|
||||
|
||||
Since every Tailwind utility is copied for every screen size, using fewer screen sizes can have a huge impact on overall file size.
|
||||
|
||||
Here's how defining fewer screens affects the output:
|
||||
|
||||
- 5 screen sizes *(default)*: 36.4kb
|
||||
- 4 screen sizes: 29.4kb
|
||||
- 3 screen sizes: 22.4kb
|
||||
- 2 screen sizes: 15.4kb
|
||||
- 1 screen size: 8.4kb
|
||||
|
||||
If you only need 3 screen sizes and 35 colors, you're down to 13.4kb without changing anything else.
|
||||
|
||||
## Disabling unused modules and variants
|
||||
|
||||
If you don't expect to need a module at all in your project, you can completely disable it by setting it to `false` in your config file:
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
|
||||
modules: {
|
||||
// ...
|
||||
float: false,
|
||||
// ...
|
||||
},
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
If you need a module but don't need the responsive versions, set it to an empty array:
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
|
||||
modules: {
|
||||
// ...
|
||||
appearance: [],
|
||||
// ...
|
||||
},
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
These are mostly small wins compared to limiting your color palette or using fewer breakpoints, but they can still add up.
|
||||
|
||||
## Removing unused CSS with PurgeCSS
|
||||
|
||||
[PurgeCSS](https://github.com/FullHuman/purgecss) is a tool for removing unused CSS from your project. It works by building a list of all of the class names used in your templates, then comparing that against your CSS and removing any CSS rules that you aren't using.
|
||||
|
||||
**Combining it with Tailwind is a match made in heaven.**
|
||||
|
||||
You can have as many colors and breakpoints as you like, generate responsive, hover, and focus variants for every module, and your generated CSS file will never be bigger than absolutely necessary.
|
||||
|
||||
With PurgeCSS, **you'll have a hard time generating CSS that *isn't* under 10kb minified and gzipped.**
|
||||
|
||||
Here's an example of what it might look like to setup with Laravel Mix:
|
||||
|
||||
```js
|
||||
// Based on https://medium.com/@AndrewDelPrete/using-purifycss-to-remove-unused-tailwind-css-classes-173b3ee8ee01
|
||||
|
||||
let mix = require("laravel-mix");
|
||||
let tailwindcss = require("tailwindcss");
|
||||
let glob = require("glob-all");
|
||||
let PurgecssPlugin = require("purgecss-webpack-plugin");
|
||||
|
||||
// Custom PurgeCSS extractor for Tailwind that allows special characters in
|
||||
// class names.
|
||||
//
|
||||
// https://github.com/FullHuman/purgecss#extractor
|
||||
class TailwindExtractor {
|
||||
static extract(content) {
|
||||
return content.match(/[A-z0-9-:\/]+/g) || [];
|
||||
}
|
||||
}
|
||||
|
||||
mix.postCss("./src/styles.css", "public/css", [tailwindcss("./tailwind.js")]);
|
||||
|
||||
// Only run PurgeCSS during production builds for faster development builds
|
||||
// and so you still have the full set of utilities available during
|
||||
// development.
|
||||
if (mix.inProduction()) {
|
||||
mix.webpackConfig({
|
||||
plugins: [
|
||||
new PurgecssPlugin({
|
||||
|
||||
// Specify the locations of any files you want to scan for class names.
|
||||
paths: glob.sync([
|
||||
path.join(__dirname, "resources/views/**/*.blade.php"),
|
||||
path.join(__dirname, "resources/assets/js/**/*.vue")
|
||||
]),
|
||||
extractors: [
|
||||
{
|
||||
extractor: TailwindExtractor,
|
||||
|
||||
// Specify the file extensions to include when scanning for
|
||||
// class names.
|
||||
extensions: ["html", "js", "php", "vue"]
|
||||
}
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
For more information on working with PurgeCSS, [visit the PurgeCSS documentation](https://github.com/FullHuman/purgecss).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Cursor"
|
||||
description: "Utilities for controlling the cursor style when hovering over an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.cursor-auto',
|
||||
'cursor: auto;',
|
||||
"Set the mouse cursor to the default browser behavior.",
|
||||
],
|
||||
[
|
||||
'.cursor-pointer',
|
||||
'cursor: pointer;',
|
||||
"Set the mouse cursor to a pointer and indicate a link.",
|
||||
],
|
||||
[
|
||||
'.cursor-not-allowed',
|
||||
'cursor: not-allowed;',
|
||||
"Set the mouse cursor to indicate that the action will not be executed.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'cursor',
|
||||
'property' => 'cursor',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Display"
|
||||
description: "Utilities for controlling the display box type of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.block',
|
||||
'display: block;',
|
||||
"Set the box type of the element to <code>block</code>.",
|
||||
],
|
||||
[
|
||||
'.inline-block',
|
||||
'display: inline-block;',
|
||||
"Set the box type of the element to <code>inline-block</code>.",
|
||||
],
|
||||
[
|
||||
'.inline',
|
||||
'display: inline;',
|
||||
"Set the box type of the element to <code>inline</code>.",
|
||||
],
|
||||
[
|
||||
'.table',
|
||||
'display: table;',
|
||||
"Set the box type of the element to <code>table</code>.",
|
||||
],
|
||||
[
|
||||
'.table-row',
|
||||
'display: table-row;',
|
||||
"Set the box type of the element to <code>table-row</code>.",
|
||||
],
|
||||
[
|
||||
'.table-cell',
|
||||
'display: table-cell;',
|
||||
"Set the box type of the element to <code>table-cell</code>.",
|
||||
],
|
||||
[
|
||||
'.hidden',
|
||||
'display: none;',
|
||||
"Set the box type of the element to <code>none</code>.",
|
||||
],
|
||||
[
|
||||
'.flex',
|
||||
'display: flex;',
|
||||
"Set the box type of the element to <code>flex</code>.",
|
||||
],
|
||||
[
|
||||
'.inline-flex',
|
||||
'display: inline-flex;',
|
||||
"Set the box type of the element to <code>inline-flex</code>.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'display',
|
||||
'property' => 'display',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,85 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Alerts"
|
||||
description: Examples of building alert components with Tailwind CSS.
|
||||
---
|
||||
|
||||
Tailwind doesn't include pre-designed alert components out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
### Traditional
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative" role="alert">
|
||||
<strong class="font-bold">Holy smokes!</strong>
|
||||
<span class="block sm:inline">Something seriously bad happened.</span>
|
||||
<span class="absolute pin-t pin-b pin-r px-4 py-3">
|
||||
<svg class="fill-current h-6 w-6 text-red" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Modern with Badge
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'px-0 py-0'])
|
||||
<div class="bg-indigo-darkest text-center py-4 lg:px-4">
|
||||
<div class="p-2 bg-indigo-darker items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex" role="alert">
|
||||
<span class="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
|
||||
<span class="font-semibold mr-2 text-left flex-auto">Get the coolest t-shirts from our brand new store</span>
|
||||
<svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Left Accent Border
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4" role="alert">
|
||||
<p class="font-bold">Be Warned</p>
|
||||
<p>Something not ideal might be happening.</p>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Titled
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div role="alert">
|
||||
<div class="bg-red text-white font-bold rounded-t px-4 py-2">
|
||||
Danger
|
||||
</div>
|
||||
<div class="border border-t-0 border-red-light rounded-b bg-red-lightest px-4 py-3 text-red-dark">
|
||||
<p>Something not ideal might be happening.</p>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Solid
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3" role="alert">
|
||||
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
|
||||
<p>Something happened that you should know about.</p>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Top Accent Border
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md" role="alert">
|
||||
<div class="flex">
|
||||
<div class="py-1"><svg class="fill-current h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
|
||||
<div>
|
||||
<p class="font-bold">Our privacy policy has changed</p>
|
||||
<p class="text-sm">Make sure you know how these changes affect you.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Banner
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3" role="alert">
|
||||
<p class="font-bold">Informational message</p>
|
||||
<p class="text-sm">Some additional text to explain said message.</p>
|
||||
</div>
|
||||
@endcomponent
|
||||
@ -1,109 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Buttons"
|
||||
description: Examples of building buttons with Tailwind CSS.
|
||||
---
|
||||
|
||||
Tailwind doesn't include pre-designed button styles out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
### Simple
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
|
||||
@slot('code')
|
||||
<!-- Using utilities: -->
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<!-- Extracting component classes: -->
|
||||
<button class="btn btn-blue">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.btn {
|
||||
@apply .font-bold .py-2 .px-4 .rounded;
|
||||
}
|
||||
.btn-blue {
|
||||
@apply .bg-blue .text-white;
|
||||
}
|
||||
.btn-blue:hover {
|
||||
@apply .bg-blue-dark;
|
||||
}
|
||||
</style>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Pill
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded-full">
|
||||
Button
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
### Outline
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-transparent hover:bg-blue text-blue-dark font-semibold hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
|
||||
Button
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
### Bordered
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 border border-blue-darker rounded">
|
||||
Button
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
### Disabled
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
|
||||
Button
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
### 3D
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue hover:bg-blue-light text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue rounded">
|
||||
Button
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
### Elevated
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
|
||||
Button
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
### Groups
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<div class="inline-flex">
|
||||
<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded-l">
|
||||
Prev
|
||||
</button>
|
||||
<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded-r">
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Icons
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded inline-flex items-center">
|
||||
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Download</span>
|
||||
</button>
|
||||
@endcomponent
|
||||
@ -1,54 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Cards"
|
||||
description: Examples of building card components with Tailwind CSS.
|
||||
---
|
||||
|
||||
Tailwind doesn't include pre-designed card components out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
### Stacked
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
|
||||
<div class="max-w-sm rounded overflow-hidden shadow-lg">
|
||||
<img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg" alt="Sunset in the mountains">
|
||||
<div class="px-6 py-4">
|
||||
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
|
||||
<p class="text-grey-darker text-base">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-6 py-4">
|
||||
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
|
||||
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
|
||||
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Horizontal
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
|
||||
<div class="max-w-md w-full lg:flex">
|
||||
<div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('{{ $page->baseUrl }}/img/card-left.jpg')" title="Woman holding a mug">
|
||||
</div>
|
||||
<div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
|
||||
<div class="mb-8">
|
||||
<p class="text-sm text-grey-dark flex items-center">
|
||||
<svg class="fill-current text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
|
||||
</svg>
|
||||
Members only
|
||||
</p>
|
||||
<div class="text-black font-bold text-xl mb-2">Can coffee make you a better developer?</div>
|
||||
<p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
|
||||
<div class="text-sm">
|
||||
<p class="text-black leading-none">Jonathan Reinink</p>
|
||||
<p class="text-grey-dark">Aug 18</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
@ -1,160 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Forms"
|
||||
description: Examples of building forms with Tailwind CSS.
|
||||
---
|
||||
|
||||
Tailwind doesn't include purpose-built form control classes out of the box, but form controls are easy to style using existing utilities.
|
||||
|
||||
### Login Form
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'px-3 py-10 bg-grey-lighter flex justify-center'])
|
||||
<div class="w-full max-w-xs">
|
||||
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||
<div class="mb-4">
|
||||
<label class="block text-grey-darker text-sm font-bold mb-2" for="username">
|
||||
Username
|
||||
</label>
|
||||
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" id="username" type="text" placeholder="Username">
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label class="block text-grey-darker text-sm font-bold mb-2" for="password">
|
||||
Password
|
||||
</label>
|
||||
<input class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3" id="password" type="password" placeholder="******************">
|
||||
<p class="text-red text-xs italic">Please choose a password.</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" type="button">
|
||||
Sign In
|
||||
</button>
|
||||
<a class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker" href="#">
|
||||
Forgot Password?
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
<p class="text-center text-grey text-xs">
|
||||
©{{ date('Y') }} Acme Corp. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Inline Form
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
|
||||
<form class="w-full max-w-xs">
|
||||
<div class="md:flex md:items-center mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">
|
||||
Full Name
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-2/3">
|
||||
<input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-full py-2 px-4 text-grey-darker" id="inline-full-name" type="text" value="Jane Doe">
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:flex md:items-center mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-username">
|
||||
Password
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-2/3">
|
||||
<input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-full py-2 px-4 text-grey-darker" id="inline-username" type="password" placeholder="******************">
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:flex md:items-center mb-6">
|
||||
<div class="md:w-1/3"></div>
|
||||
<label class="md:w-2/3 block text-grey font-bold">
|
||||
<input class="mr-2" type="checkbox">
|
||||
<span class="text-sm">
|
||||
Send me your newsletter!
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:flex md:items-center">
|
||||
<div class="md:w-1/3"></div>
|
||||
<div class="md:w-2/3">
|
||||
<button class="shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 rounded" type="button">
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@endcomponent
|
||||
|
||||
### Form Grid
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
|
||||
<form class="w-full max-w-md">
|
||||
<div class="flex flex-wrap -mx-3 mb-6">
|
||||
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
|
||||
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
|
||||
First Name
|
||||
</label>
|
||||
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3" id="grid-first-name" type="text" placeholder="Jane">
|
||||
<p class="text-red text-xs italic">Please fill out this field.</p>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 px-3">
|
||||
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
|
||||
Last Name
|
||||
</label>
|
||||
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-last-name" type="text" placeholder="Doe">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap -mx-3 mb-6">
|
||||
<div class="w-full px-3">
|
||||
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
|
||||
Password
|
||||
</label>
|
||||
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3" id="grid-password" type="password" placeholder="******************">
|
||||
<p class="text-grey-dark text-xs italic">Make it as long and as crazy as you'd like</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap -mx-3 mb-2">
|
||||
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
|
||||
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-city">
|
||||
City
|
||||
</label>
|
||||
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
|
||||
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
|
||||
State
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" id="grid-state">
|
||||
<option>New Mexico</option>
|
||||
<option>Missouri</option>
|
||||
<option>Texas</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
|
||||
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
|
||||
Zip
|
||||
</label>
|
||||
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-zip" type="text" placeholder="90210">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@endcomponent
|
||||
|
||||
### Underline Form
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
|
||||
<form class="w-full max-w-sm">
|
||||
<div class="flex items-center border-b border-b-2 border-teal py-2">
|
||||
<input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" type="text" placeholder="Jane Doe" aria-label="Full name">
|
||||
<button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 rounded" type="button">
|
||||
Sign Up
|
||||
</button>
|
||||
<button class="flex-no-shrink border-transparent border-4 text-teal hover:text-teal-darker text-sm py-1 px-2 rounded" type="button">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@endcomponent
|
||||
@ -1,248 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Grids"
|
||||
description: Examples of building grid layouts with Tailwind CSS.
|
||||
---
|
||||
|
||||
Tailwind doesn't include purpose-built grid classes out of the box, but grid layouts are simple to build using the existing [Flexbox](/docs/flexbox-display) and [width](/docs/width) utilities.
|
||||
|
||||
### Basic Grids
|
||||
|
||||
Use the existing [Flexbox](/docs/flexbox-display) and [percentage width](/docs/width) utilities to construct basic grids.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<!-- Full width column -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-full bg-grey h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Two columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-1/2 bg-grey-light h-12"></div>
|
||||
<div class="w-1/2 bg-grey h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Three columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-1/3 bg-grey-light h-12"></div>
|
||||
<div class="w-1/3 bg-grey h-12"></div>
|
||||
<div class="w-1/3 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Four columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-1/4 bg-grey h-12"></div>
|
||||
<div class="w-1/4 bg-grey-light h-12"></div>
|
||||
<div class="w-1/4 bg-grey h-12"></div>
|
||||
<div class="w-1/4 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Five columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-1/5 bg-grey h-12"></div>
|
||||
<div class="w-1/5 bg-grey-light h-12"></div>
|
||||
<div class="w-1/5 bg-grey h-12"></div>
|
||||
<div class="w-1/5 bg-grey-light h-12"></div>
|
||||
<div class="w-1/5 bg-grey h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Six columns -->
|
||||
<div class="flex">
|
||||
<div class="w-1/6 bg-grey-light h-12"></div>
|
||||
<div class="w-1/6 bg-grey h-12"></div>
|
||||
<div class="w-1/6 bg-grey-light h-12"></div>
|
||||
<div class="w-1/6 bg-grey h-12"></div>
|
||||
<div class="w-1/6 bg-grey-light h-12"></div>
|
||||
<div class="w-1/6 bg-grey h-12"></div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Responsive Grids
|
||||
|
||||
Use the responsive variants of the width utilities to build responsive grid layouts.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="h-12 w-full mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-full mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-full mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-full mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-full mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-full mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="h-12 w-1/4 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/4 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/4 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/4 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey-light"></div>
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey-light"></div>
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Mixed Column Sizes
|
||||
|
||||
Mix different percentage width utilities to build mixed size grids.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<!-- Narrower side column -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-3/4 bg-grey h-12"></div>
|
||||
<div class="w-1/4 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Wide center column -->
|
||||
<div class="flex">
|
||||
<div class="w-1/5 bg-grey h-12"></div>
|
||||
<div class="w-3/5 bg-grey-light h-12"></div>
|
||||
<div class="w-1/5 bg-grey h-12"></div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Wrapping Columns
|
||||
|
||||
Add `flex-wrap` to your column container to allow columns to wrap when they run out of room.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="flex flex-wrap -mb-4">
|
||||
<div class="w-1/3 mb-4 bg-grey-light h-12"></div>
|
||||
<div class="w-1/3 mb-4 bg-grey h-12"></div>
|
||||
<div class="w-1/3 mb-4 bg-grey-light h-12"></div>
|
||||
<div class="w-1/3 mb-4 bg-grey h-12"></div>
|
||||
<div class="w-1/3 mb-4 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Column Spacing
|
||||
|
||||
Add a negative horizontal margin like `-mx-2` to your column container and an equal horizontal padding like `px-2` to each column to add gutters.
|
||||
|
||||
To prevent horizontal scrolling in full width layouts, add `overflow-hidden` to another parent container, or compensate for the negative margin with matching horizontal padding.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="px-2">
|
||||
<div class="flex -mx-2">
|
||||
<div class="w-1/3 px-2">
|
||||
<div class="bg-grey-light h-12"></div>
|
||||
</div>
|
||||
<div class="w-1/3 px-2">
|
||||
<div class="bg-grey h-12"></div>
|
||||
</div>
|
||||
<div class="w-1/3 px-2">
|
||||
<div class="bg-grey-light h-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Automatic Column Widths
|
||||
|
||||
Use `flex-1` instead of an explicit width on your columns to have them size automatically to fill the row.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<!-- Full width column -->
|
||||
<div class="flex mb-4">
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Five columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Seven columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Eleven columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Column Order
|
||||
|
||||
Use `flex-row-reverse` to reverse column order. Useful for two-column responsive layouts where the column on right should appear first on smaller screens.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="flex md:flex-row-reverse flex-wrap">
|
||||
<div class="w-full md:w-3/4 bg-grey p-4 text-center text-grey-lighter">1</div>
|
||||
<div class="w-full md:w-1/4 bg-grey-light p-4 text-center text-grey-darker">2</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Simple Offsets
|
||||
|
||||
Use auto margin utilities like `ml-auto` and `mr-auto` to offset columns in a row.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/3 ml-auto bg-grey h-12"></div>
|
||||
<div class="w-1/3 mr-auto bg-grey-light h-12"></div>
|
||||
</div>
|
||||
@endcomponent
|
||||
@ -1,191 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Navigation"
|
||||
description: Examples of building navigation components with Tailwind CSS.
|
||||
---
|
||||
|
||||
Tailwind doesn't include pre-designed navigation components out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
### Simple
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
<li class="mr-6">
|
||||
<a class="text-blue hover:text-blue-darker" href="#">Active</a>
|
||||
</li>
|
||||
<li class="mr-6">
|
||||
<a class="text-blue hover:text-blue-darker" href="#">Link</a>
|
||||
</li>
|
||||
<li class="mr-6">
|
||||
<a class="text-blue hover:text-blue-darker" href="#">Link</a>
|
||||
</li>
|
||||
<li class="mr-6">
|
||||
<a class="text-grey-light cursor-not-allowed" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
### Responsive Header
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="mb-6 lg:hidden">
|
||||
<p class="text-sm text-grey-dark mb-1">Collapsed</p>
|
||||
<nav class="flex items-center justify-between flex-wrap bg-teal p-6">
|
||||
<div class="flex items-center flex-no-shrink text-white mr-6">
|
||||
<svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
|
||||
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
|
||||
</div>
|
||||
<div class="block lg:hidden">
|
||||
<button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
|
||||
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-full hidden flex-grow lg:flex lg:items-center lg:w-auto">
|
||||
<div class="text-sm lg:flex-grow">
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
|
||||
Examples
|
||||
</a>
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white">
|
||||
Blog
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm text-grey-dark mb-1 lg:hidden">Expanded</p>
|
||||
<nav class="flex items-center justify-between flex-wrap bg-teal p-6">
|
||||
<div class="flex items-center flex-no-shrink text-white mr-6">
|
||||
<svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
|
||||
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
|
||||
</div>
|
||||
<div class="block lg:hidden">
|
||||
<button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
|
||||
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
|
||||
<div class="text-sm lg:flex-grow">
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
|
||||
Examples
|
||||
</a>
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white">
|
||||
Blog
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@slot('code')
|
||||
<nav class="flex items-center justify-between flex-wrap bg-teal p-6">
|
||||
<div class="flex items-center flex-no-shrink text-white mr-6">
|
||||
<svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
|
||||
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
|
||||
</div>
|
||||
<div class="block lg:hidden">
|
||||
<button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
|
||||
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
|
||||
<div class="text-sm lg:flex-grow">
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
|
||||
Examples
|
||||
</a>
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white">
|
||||
Blog
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Tabs
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex border-b">
|
||||
<li class="-mb-px mr-1">
|
||||
<a class="bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a class="bg-white inline-block py-2 px-4 text-grey-light font-semibold" href="#">Tab</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
### Pills
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
<li class="mr-3">
|
||||
<a class="inline-block border border-blue rounded py-1 px-3 bg-blue text-white" href="#">Active Pill</a>
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-1 px-3" href="#">Pill</a>
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<a class="inline-block py-1 px-3 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
### Stretched
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
<li class="flex-1 mr-2">
|
||||
<a class="text-center block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Item</a>
|
||||
</li>
|
||||
<li class="flex-1 mr-2">
|
||||
<a class="text-center block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Nav Item</a>
|
||||
</li>
|
||||
<li class="text-center flex-1">
|
||||
<a class="block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Item</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
### Justified
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex justify-between">
|
||||
<li class="mr-3">
|
||||
<a class="inline-block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Pill</a>
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Pill</a>
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<a class="inline-block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endcomponent
|
||||
@ -1,198 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Extracting Components"
|
||||
description: null
|
||||
---
|
||||
|
||||
Tailwind encourages a "utility-first" workflow, where new designs are initially implemented using only utility classes to avoid premature abstraction.
|
||||
|
||||
While we strongly believe you can get a lot further with just utilities than you might initially expect, **we don't believe that a dogmatic utility*-only* approach is the best way to write CSS.**
|
||||
|
||||
For example, using a utility-first approach, implementing a button style early in a project might look something like this:
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
|
||||
@slot('code')
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
If this is the only button in your project, creating a custom component class for it would be premature abstraction; you'd be writing new CSS for no measurable benefit.
|
||||
|
||||
If on the other hand you were reusing this button style in several places, keeping that long list of utility classes in sync across every button instance could become a real maintenance burden.
|
||||
|
||||
## Extracting utility patterns with `@apply`
|
||||
|
||||
When you start to notice repeating patterns of utilities in your markup, it might be worth extracting a component class.
|
||||
|
||||
To make this as easy as possible, Tailwind provides the `@apply` directive for applying the styles of existing utilities to new component classes.
|
||||
|
||||
Here's what a `.btn-blue` class might look like using `@apply` to compose it from existing utilities:
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
|
||||
@slot('code')
|
||||
<button class="btn-blue">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.btn-blue {
|
||||
@@apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
|
||||
}
|
||||
.btn-blue:hover {
|
||||
@@apply .bg-blue-dark;
|
||||
}
|
||||
</style>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
Note that `hover:`, `focus:`, and `{screen}:` utility variants can't be mixed in directly. Instead, apply the plain version of the utility you need to the appropriate pseudo-selector or in a new media query.
|
||||
|
||||
## Keeping things composable
|
||||
|
||||
Say you have these two buttons:
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded mr-4">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
|
||||
@slot('code')
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
It might be tempting to implement component classes for these buttons like this:
|
||||
|
||||
```less
|
||||
.btn-blue {
|
||||
@@apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
|
||||
}
|
||||
.btn-blue:hover {
|
||||
@@apply .bg-blue-dark;
|
||||
}
|
||||
|
||||
.btn-grey {
|
||||
@@apply .bg-grey-light .text-grey-darkest .font-bold .py-2 .px-4 .rounded;
|
||||
}
|
||||
.btn-grey:hover {
|
||||
@@apply .bg-grey;
|
||||
}
|
||||
```
|
||||
|
||||
The issue with this approach is that **you still have potentially painful duplication.**
|
||||
|
||||
If you wanted to change the padding, font weight, or border radius of all the buttons on your site, you'd need to update every button class.
|
||||
|
||||
A better approach is to extract the parts that are the same into a separate class:
|
||||
|
||||
```less
|
||||
.btn {
|
||||
@@apply .font-bold .py-2 .px-4 .rounded;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@@apply .bg-blue .text-white;
|
||||
}
|
||||
.btn-blue:hover {
|
||||
@@apply .bg-blue-dark;
|
||||
}
|
||||
|
||||
.btn-grey {
|
||||
@@apply .bg-grey-light .text-grey-darkest;
|
||||
}
|
||||
.btn-grey:hover {
|
||||
@@apply .bg-grey;
|
||||
}
|
||||
```
|
||||
|
||||
Now you'd apply two classes any time you needed to style a button:
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded mr-4">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
|
||||
@slot('code')
|
||||
<button class="btn btn-blue">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<button class="btn btn-grey">
|
||||
Button
|
||||
</button>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
This makes it easy to change the shared styles in one place by just editing the `.btn` class.
|
||||
|
||||
It also allows you to add new one-off button styles without being forced to create a new component class or duplicated the shared styles:
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-green hover:bg-green-light text-white font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
|
||||
@slot('code')
|
||||
<button class="btn bg-green hover:bg-green-light text-white">
|
||||
Button
|
||||
</button>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## CSS Structure
|
||||
|
||||
Since Tailwind's utility classes don't rely on `!important` to defeat other styles, it's important that you add your component classes *before* any utility classes in your CSS.
|
||||
|
||||
Here's an example:
|
||||
|
||||
```less
|
||||
@@tailwind preflight;
|
||||
|
||||
.btn {
|
||||
@@apply .font-bold .py-2 .px-4 .rounded;
|
||||
}
|
||||
.btn-blue {
|
||||
@@apply .bg-blue .text-white;
|
||||
}
|
||||
.btn-blue:hover {
|
||||
@@apply .bg-blue-dark;
|
||||
}
|
||||
|
||||
@@tailwind utilities;
|
||||
```
|
||||
|
||||
If you're using a preprocessor like Less or Sass, consider keeping your components in separate files and importing them:
|
||||
|
||||
```less
|
||||
@@tailwind preflight;
|
||||
|
||||
@@import "components/buttons";
|
||||
@@import "components/forms";
|
||||
/* Etc. */
|
||||
|
||||
@@tailwind utilities;
|
||||
```
|
||||
@ -1,282 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Align Content"
|
||||
description: "Utilities for controlling how lines are positioned in multi-line flex containers."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.content-start',
|
||||
'align-content: flex-start;',
|
||||
"Pack lines against the start of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.content-center',
|
||||
'align-content: center;',
|
||||
"Pack lines in the center of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.content-end',
|
||||
'align-content: flex-end;',
|
||||
"Pack lines against the end of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.content-between',
|
||||
'align-content: space-between;',
|
||||
"Distribute lines along the cross axis by adding an equal amount of space between each line.",
|
||||
],
|
||||
[
|
||||
'.content-around',
|
||||
'align-content: space-around;',
|
||||
"Distribute lines along the cross axis by adding an equal amount of space around each line.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Start <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
Use `.content-start` to pack lines in a flex container against the start of the cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex content-start flex-wrap bg-grey-lighter h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Center
|
||||
|
||||
Use `.content-center` to pack lines in a flex container in the center of the cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex content-center flex-wrap bg-grey-lighter h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### End
|
||||
|
||||
Use `.content-end` to pack lines in a flex container against the end of the cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex content-end flex-wrap bg-grey-lighter h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Space between
|
||||
|
||||
Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex content-between flex-wrap bg-grey-lighter h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Space around
|
||||
|
||||
Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex content-around flex-wrap bg-grey-lighter h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control the alignment of flex content at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex content-start flex-wrap bg-grey-lighter h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex content-end flex-wrap bg-grey-lighter h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex content-center flex-wrap bg-grey-lighter h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex content-between flex-wrap bg-grey-lighter h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex content-around flex-wrap bg-grey-lighter h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:content-start sm:content-end md:content-center lg:content-between xl:content-around ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'align-content',
|
||||
'property' => 'flexbox',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect which variants are generated for <em>all</em> Flexbox utilities, not just the align-content utilities.'
|
||||
])
|
||||
@ -1,162 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Align Items"
|
||||
description: "Utilities for controlling how flex items are positioned along a container's cross axis."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.items-stretch',
|
||||
'align-items: stretch;',
|
||||
"Stretch items to fill the cross axis.",
|
||||
],
|
||||
[
|
||||
'.items-start',
|
||||
'align-items: flex-start;',
|
||||
"Align items against the start of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.items-center',
|
||||
'align-items: center;',
|
||||
"Align items along the center of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.items-end',
|
||||
'align-items: flex-end;',
|
||||
"Align items against the end of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.items-baseline',
|
||||
'align-items: baseline;',
|
||||
"Align the baselines of each item.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Stretch <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
Use `.items-stretch` to stretch items to fill the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Start
|
||||
|
||||
Use `.items-start` to align items to the start of the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex items-start bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Center
|
||||
|
||||
Use `.items-center` to align items along the center of the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex items-center bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### End
|
||||
|
||||
Use `.items-end` to align items to the end of the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex items-end bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Baseline
|
||||
|
||||
Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex items-baseline bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control the alignment of flex items at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:items-center` to apply the `items-center` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex items-start bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex items-center bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex items-end bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex items-baseline bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:items-stretch sm:items-start md:items-center lg:items-end xl:items-baseline ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'align-items',
|
||||
'property' => 'flexbox',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect which variants are generated for <em>all</em> Flexbox utilities, not just the align-items utilities.'
|
||||
])
|
||||
@ -1,164 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Align Self"
|
||||
description: "Utilities for controlling how an individual flex item is positioned along its container's cross axis."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.self-auto',
|
||||
'align-self: auto;',
|
||||
"Align item based on the container's <code>align-items</code> property.",
|
||||
],
|
||||
[
|
||||
'.self-start',
|
||||
'align-self: flex-start;',
|
||||
"Align item against the start of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.self-center',
|
||||
'align-self: center;',
|
||||
"Align item along the center of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.self-end',
|
||||
'align-self: flex-end;',
|
||||
"Align item against the end of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.self-stretch',
|
||||
'align-self: stretch;',
|
||||
"Stretch item to fill the cross axis.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Auto <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
Use `.self-auto` to align an item based on the value of the flex container's `align-items` property:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="self-auto flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Start
|
||||
|
||||
Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="self-start flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Center
|
||||
|
||||
Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="self-center flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### End
|
||||
|
||||
Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="self-end flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Stretch
|
||||
|
||||
Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex items-start bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="self-stretch flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control the alignment of a flex item at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:self-end` to apply the `self-end` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="self-auto flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="self-start flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="self-end flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="self-center flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex items-stretch bg-grey-lighter h-24">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="self-stretch flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="items-stretch ...">
|
||||
<!-- ... -->
|
||||
<div class="none:self-auto sm:self-start md:self-end lg:self-center xl:self-stretch ...">2</div>
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'align-self',
|
||||
'property' => 'flexbox',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect which variants are generated for <em>all</em> Flexbox utilities, not just the align-self utilities.'
|
||||
])
|
||||
@ -1,145 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex Direction"
|
||||
description: "Utilities for controlling the direction of flex items."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.flex-row',
|
||||
'flex-direction: row;',
|
||||
"Position flex items in the normal horizontal direction.",
|
||||
],
|
||||
[
|
||||
'.flex-row-reverse',
|
||||
'flex-direction: row-reverse;',
|
||||
"Position flex items in the reverse horizontal direction.",
|
||||
],
|
||||
[
|
||||
'.flex-col',
|
||||
'flex-direction: column;',
|
||||
"Position flex items vertically.",
|
||||
],
|
||||
[
|
||||
'.flex-col-reverse',
|
||||
'flex-direction: column-reverse;',
|
||||
"Position flex items vertically in the reverse direction.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Row <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
Use `.flex-row` to position flex items horizontally in the same direction as text:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-row bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Row reversed
|
||||
|
||||
Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-row-reverse bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Column
|
||||
|
||||
Use `.flex-col` to position flex items vertically:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-col bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Column reversed
|
||||
|
||||
Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-col-reverse bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To apply a flex direction utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:flex-row` to an element would apply the `flex-row` utility at medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex flex-row bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex flex-col bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex flex-row-reverse bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex flex-col-reverse bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex flex-row bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:flex-row sm:flex-col md:flex-row-reverse lg:flex-col-reverse xl:flex-row ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'flex-direction',
|
||||
'property' => 'flexbox',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect which variants are generated for <em>all</em> Flexbox utilities, not just the flex-direction utilities.'
|
||||
])
|
||||
@ -1,111 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex Display"
|
||||
description: "Utilities for creating flex containers."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.flex',
|
||||
'display: flex;',
|
||||
"Create a block-level flex container.",
|
||||
],
|
||||
[
|
||||
'.inline-flex',
|
||||
'display: inline-flex;',
|
||||
"Create an inline flex container.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Flex
|
||||
|
||||
Use `.flex` to create a block-level flex container:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Inline flex
|
||||
|
||||
Use `.inline-flex` to create an inline flex container:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="inline-flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
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 `inline-flex` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="inline-flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="block bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="hidden bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:flex sm:inline-flex md:block lg:hidden xl:flex ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'flex display',
|
||||
'property' => 'flexbox',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect which variants are generated for <em>all</em> Flexbox utilities, not just the display utilities.'
|
||||
])
|
||||
@ -1,383 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex, Grow, & Shrink"
|
||||
description: "Utilities for controlling how flex items grow and shrink."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.flex-initial',
|
||||
'flex: initial;',
|
||||
"Allow a flex item to shrink but not grow, taking into account its initial size.",
|
||||
],
|
||||
[
|
||||
'.flex-1',
|
||||
'flex: 1;',
|
||||
"Allow a flex item to grow and shrink as needed, ignoring its initial size.",
|
||||
],
|
||||
[
|
||||
'.flex-auto',
|
||||
'flex: auto;',
|
||||
"Allow a flex item to grow and shrink, taking into account its initial size.",
|
||||
],
|
||||
[
|
||||
'.flex-none',
|
||||
'flex: none;',
|
||||
"Prevent a flex item from growing or shrinking.",
|
||||
],
|
||||
[
|
||||
'.flex-grow',
|
||||
'flex-grow: 1;',
|
||||
"Allow a flex item to grow to fill any available space.",
|
||||
],
|
||||
[
|
||||
'.flex-shrink',
|
||||
'flex-shrink: 1;',
|
||||
"Allow a flex item to shrink if needed.",
|
||||
],
|
||||
[
|
||||
'.flex-no-grow',
|
||||
'flex-grow: 0;',
|
||||
"Prevent a flex item from growing.",
|
||||
],
|
||||
[
|
||||
'.flex-no-shrink',
|
||||
'flex-shrink: 0;',
|
||||
"Prevent a flex item from shrinking.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Initial <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<p class="text-sm text-grey-dark mb-1">Items don't grow when there's extra space</p>
|
||||
<div class="flex bg-grey-lighter mb-6">
|
||||
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-grey-dark mb-1">Items shrink if possible when needed</p>
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Flex 1
|
||||
|
||||
Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<p class="text-sm text-grey-dark mb-1">Default behavior</p>
|
||||
<div class="flex bg-grey-lighter mb-6">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-grey-dark mb-1">With <code>.flex-1</code></p>
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Auto
|
||||
|
||||
Use `.flex-auto` to allow a flex item to grow and shrink, taking into account its initial size:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<p class="text-sm text-grey-dark mb-1">Default behavior</p>
|
||||
<div class="flex bg-grey-lighter mb-6">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-grey-dark mb-1">With <code>.flex-auto</code></p>
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### None
|
||||
|
||||
Use `.flex-none` to prevent a flex item from growing or shrinking:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
<div class="flex-none text-grey-darkest text-center bg-grey px-4 py-2 m-2">
|
||||
Item that cannot grow or shrink
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Grow
|
||||
|
||||
Use `.flex-grow` to allow a flex item to grow to fill any available space:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Content that cannot flex
|
||||
</div>
|
||||
<div class="flex-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
|
||||
Item that will grow
|
||||
</div>
|
||||
<div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Content that cannot flex
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Don't grow
|
||||
|
||||
Use `.flex-no-grow` to prevent a flex item from growing:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-grow text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Will grow
|
||||
</div>
|
||||
<div class="flex-no-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
|
||||
Will not grow
|
||||
</div>
|
||||
<div class="flex-grow text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Will grow
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Shrink
|
||||
|
||||
Use `.flex-shrink` to allow a flex item to shrink if needed:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Longer content that cannot flex
|
||||
</div>
|
||||
<div class="flex-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
|
||||
Item that will shrink even if it causes the content to wrap
|
||||
</div>
|
||||
<div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Longer content that cannot flex
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Don't shrink
|
||||
|
||||
Use `.flex-no-shrink` to prevent a flex item from shrinking:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-shrink text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can shrink if needed
|
||||
</div>
|
||||
<div class="flex-no-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
|
||||
Item that cannot shrink below its initial size
|
||||
</div>
|
||||
<div class="flex-shrink text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can shrink if needed
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control how a flex item grows or shrinks at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:flex-no-shrink` to apply the `flex-no-shrink` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
<div class="flex-none text-grey-darkest text-center bg-grey px-4 py-2 m-2">
|
||||
Responsive flex item
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
<div class="flex-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
|
||||
Responsive flex item
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
<div class="flex-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
|
||||
Responsive flex item
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">
|
||||
Responsive flex item
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex bg-grey-lighter">
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
<div class="flex-initial text-grey-darkest text-center bg-grey px-4 py-2 m-2">
|
||||
Responsive flex item
|
||||
</div>
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
|
||||
Item that can grow or shrink if needed
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="flex ...">
|
||||
<!-- ... -->
|
||||
<div class="none:flex-none sm:flex-grow md:flex-shrink lg:flex-1 xl:flex-auto ...">
|
||||
Responsive flex item
|
||||
</div>
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'flex, grow, and shrink',
|
||||
'property' => 'flexbox',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect which variants are generated for <em>all</em> Flexbox utilities, not just the flex, grow, and shrink utilities.'
|
||||
])
|
||||
@ -1,162 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Justify Content"
|
||||
description: "Utilities for controlling flex items are positioned along a container's main axis."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.justify-start',
|
||||
'justify-content: flex-start;',
|
||||
"Justify items against the start of the container.",
|
||||
],
|
||||
[
|
||||
'.justify-center',
|
||||
'justify-content: center;',
|
||||
"Justify items in the center of the container.",
|
||||
],
|
||||
[
|
||||
'.justify-end',
|
||||
'justify-content: flex-end;',
|
||||
"Justify items against the end of the container.",
|
||||
],
|
||||
[
|
||||
'.justify-between',
|
||||
'justify-content: space-between;',
|
||||
"Justify items by adding an equal amount of space between each one.",
|
||||
],
|
||||
[
|
||||
'.justify-around',
|
||||
'justify-content: space-around;',
|
||||
"Justify items by adding an equal amount of space around each one.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Start <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
Use `.justify-start` to justify items against the start of the flex container's main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-start bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Center
|
||||
|
||||
Use `.justify-center` to justify items along the center of the flex container's main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-center bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### End
|
||||
|
||||
Use `.justify-end` to justify items against the end of the flex container's main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-end bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Space between
|
||||
|
||||
Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-between bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Space around
|
||||
|
||||
Use `.justify-around` to justify items along the flex container's main axis such that there is an equal amount of space around each item:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-around bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To justify flex items at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:justify-between` to apply the `justify-between` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex justify-start bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex justify-center bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex justify-end bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex justify-between bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex justify-around bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'justify-content',
|
||||
'property' => 'flexbox',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect which variants are generated for <em>all</em> Flexbox utilities, not just the justify-content utilities.'
|
||||
])
|
||||
@ -1,176 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex Wrapping"
|
||||
description: "Utilities for controlling how flex items wrap."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.flex-no-wrap',
|
||||
'flex-wrap: nowrap;',
|
||||
"Don't allow flex items to wrap.",
|
||||
],
|
||||
[
|
||||
'.flex-wrap',
|
||||
'flex-wrap: wrap;',
|
||||
"Allow flex items to wrap in the normal direction.",
|
||||
],
|
||||
[
|
||||
'.flex-wrap-reverse',
|
||||
'flex-wrap: wrap-reverse;',
|
||||
"Allow flex items to wrap in the reverse direction.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Don't wrap <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-no-wrap bg-grey-lighter">
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Wrap normally
|
||||
|
||||
Use `.flex-wrap` to allow flex items to wrap:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-wrap bg-grey-lighter">
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Wrap reversed
|
||||
|
||||
Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-wrap-reverse bg-grey-lighter">
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control how flex items wrap at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:flex-wrap-reverse` to apply the `flex-wrap-reverse` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex flex-no-wrap bg-grey-lighter">
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex flex-wrap bg-grey-lighter">
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex flex-wrap-reverse bg-grey-lighter">
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex flex-no-wrap bg-grey-lighter">
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex flex-wrap bg-grey-lighter">
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:flex-no-wrap sm:flex-wrap md:flex-wrap-reverse lg:flex-no-wrap xl:flex-wrap ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'flex-wrap',
|
||||
'property' => 'flexbox',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect which variants are generated for <em>all</em> Flexbox utilities, not just the flex-wrap utilities.'
|
||||
])
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Floats"
|
||||
description: "Utilities for controlling the wrapping of content around an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.float-right',
|
||||
'float: right;',
|
||||
"Moves the element to the right side of its container.",
|
||||
],
|
||||
[
|
||||
'.float-left',
|
||||
'float: left;',
|
||||
"Moves the element to the left side of its container.",
|
||||
],
|
||||
[
|
||||
'.float-none',
|
||||
'float: none;',
|
||||
"Removes any previously defined float value.",
|
||||
],
|
||||
[
|
||||
'.clearfix',
|
||||
"&::after {\n content: \"\";\n display: table;\n clear: both;\n}",
|
||||
"Clear any floats within an element.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'float',
|
||||
'property' => 'float',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,91 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Font Weight"
|
||||
description: "Utilities for controlling the font weight of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: true
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.font-hairline',
|
||||
'font-weight: 100;',
|
||||
'Set the font weight of an element to hairline.',
|
||||
],
|
||||
[
|
||||
'.font-thin',
|
||||
'font-weight: 200;',
|
||||
'Set the font weight of an element to thin.',
|
||||
],
|
||||
[
|
||||
'.font-light',
|
||||
'font-weight: 300;',
|
||||
'Set the font weight of an element to light.',
|
||||
],
|
||||
[
|
||||
'.font-normal',
|
||||
'font-weight: 400;',
|
||||
'Set the font weight of an element to normal.',
|
||||
],
|
||||
[
|
||||
'.font-medium',
|
||||
'font-weight: 500;',
|
||||
'Set the font weight of an element to medium.',
|
||||
],
|
||||
[
|
||||
'.font-semibold',
|
||||
'font-weight: 600;',
|
||||
'Set the font weight of an element to semibold.',
|
||||
],
|
||||
[
|
||||
'.font-bold',
|
||||
'font-weight: 700;',
|
||||
'Set the font weight of an element to bold.',
|
||||
],
|
||||
[
|
||||
'.font-extrabold',
|
||||
'font-weight: 800;',
|
||||
'Set the font weight of an element to extrabold.',
|
||||
],
|
||||
[
|
||||
'.font-black',
|
||||
'font-weight: 900;',
|
||||
'Set the font weight of an element to black.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Hover
|
||||
|
||||
In addition to the standard responsive variations, font weight utilities also come in `hover:` variations that apply the given font weight on hover.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="text-center text-blue-dark">
|
||||
<a href="#" class="font-normal hover:font-bold">Hover over this link</a>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
|
||||
|
||||
```html
|
||||
<a href="#" class="... md:font-normal md:hover:font-bold ...">Link</a>
|
||||
```
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'font weight',
|
||||
'property' => 'fontWeights',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
'hover',
|
||||
],
|
||||
])
|
||||
@ -1,110 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Font Families"
|
||||
description: "Utilities for controlling the font family of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.font-sans',
|
||||
"font-family:\n system-ui,\n BlinkMacSystemFont,\n -apple-system,\n Segoe UI,\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n Fira Sans,\n Droid Sans,\n Helvetica Neue,\n sans-serif;",
|
||||
'Set the font family to the sans font stack.',
|
||||
],
|
||||
[
|
||||
'.font-serif',
|
||||
"font-family:\n Constantia,\n Lucida Bright,\n Lucidabright,\n Lucida Serif,\n Lucida,\n DejaVu Serif,\n Bitstream Vera Serif,\n Liberation Serif,\n Georgia,\n serif;",
|
||||
'Set the font family to the serif font stack.',
|
||||
],
|
||||
[
|
||||
'.font-mono',
|
||||
"font-family:\n Menlo,\n Monaco,\n Consolas,\n Liberation Mono,\n Courier New,\n monospace;",
|
||||
'Set the font family to the mono font stack.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Sans-serif
|
||||
|
||||
Use `.font-sans` to apply a web safe sans-serif font family:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<p class="font-sans text-lg text-grey-darkest text-center">
|
||||
I'm a sans-serif paragraph.
|
||||
</p>
|
||||
@endcomponent
|
||||
|
||||
### Serif
|
||||
|
||||
Use `.font-serif` to apply a web safe serif font family:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<p class="font-serif text-lg text-grey-darkest text-center">
|
||||
I'm a serif paragraph.
|
||||
</p>
|
||||
@endcomponent
|
||||
|
||||
### Monospaced
|
||||
|
||||
Use `.font-mono` to apply a web safe monospaced font family:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<p class="font-mono text-lg text-grey-darkest text-center">
|
||||
I'm a monospaced paragraph.
|
||||
</p>
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
By default Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the `fonts` section of your Tailwind config.
|
||||
|
||||
@component('_partials.customized-config', ['key' => 'fonts'])
|
||||
- 'sans': ['system-ui', 'BlinkMacSystemFont', ...],
|
||||
- 'serif': ['Constantia', 'Lucida Bright', ...],
|
||||
- 'mono': ['Menlo', 'Monaco', ...],
|
||||
+ 'display': ['Oswald', ...],
|
||||
+ 'body': ['Open Sans', ...],
|
||||
@endcomponent
|
||||
|
||||
Font families can be specified as an array or as a simple comma-delimited string:
|
||||
|
||||
```js
|
||||
{
|
||||
// Array format:
|
||||
'sans': ['Helvetica', 'Arial', 'sans-serif'],
|
||||
|
||||
// Comma-delimited format:
|
||||
'sans': 'Helvetica, Arial, sans-serif',
|
||||
}
|
||||
```
|
||||
|
||||
Note that **Tailwind does not automatically escape font names** for you. If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
|
||||
|
||||
```js
|
||||
{
|
||||
// Won't work:
|
||||
'sans': ['Exo 2', ...],
|
||||
|
||||
// Add quotes:
|
||||
'sans': ['"Exo 2"', ...],
|
||||
|
||||
// ...or escape the space:
|
||||
'sans': ['Exo\\ 2', ...],
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'font',
|
||||
'property' => 'fonts',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,51 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Forms"
|
||||
description: "Utilities for styling form controls."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.appearance-none',
|
||||
'appearance: none;',
|
||||
"Remove any special styling applied to an element by the browser.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Custom Select
|
||||
|
||||
Form controls are great candidates for component classes, but just for fun, here's how you can build a fully custom select menu with just utility classes:
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<div class="inline-block relative w-64">
|
||||
<select class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded shadow">
|
||||
<option>Really long option that will likely overlap the chevron</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'appearance',
|
||||
'property' => 'appearance',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,280 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Functions & Directives"
|
||||
description: null
|
||||
---
|
||||
|
||||
Tailwind exposes a few custom CSS functions and directives that can be used in your actual CSS files.
|
||||
|
||||
### `@@tailwind`
|
||||
|
||||
Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and `screens` styles into your CSS. Here's a full example of how you might do this:
|
||||
|
||||
```less
|
||||
/**
|
||||
* This injects Tailwind's base styles, which is a combination of
|
||||
* Normalize.css and some additional base styles.
|
||||
*
|
||||
* You can see the styles here:
|
||||
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
|
||||
*/
|
||||
@@tailwind preflight;
|
||||
|
||||
/**
|
||||
* This injects all of Tailwind's utility classes, generated based on your
|
||||
* config file.
|
||||
*/
|
||||
@@tailwind utilities;
|
||||
|
||||
/**
|
||||
* Use this directive to control where Tailwind injects the responsive
|
||||
* variations of each utility.
|
||||
*
|
||||
* If omitted, Tailwind will append these classes to the very end of
|
||||
* your stylesheet by default.
|
||||
*/
|
||||
@@tailwind screens;
|
||||
```
|
||||
|
||||
### `@@apply`
|
||||
|
||||
Use `@@apply` to mixin the contents of existing classes into your custom CSS.
|
||||
|
||||
This is extremely useful when you find a common utility pattern in your HTML that you'd like to extract to a new component.
|
||||
|
||||
```less
|
||||
.btn {
|
||||
@@apply .font-bold .py-2 .px-4 .rounded;
|
||||
}
|
||||
.btn-blue {
|
||||
@@apply .bg-blue .text-white;
|
||||
}
|
||||
.btn-blue:hover {
|
||||
@@apply .bg-blue-dark;
|
||||
}
|
||||
```
|
||||
|
||||
Rules can listed on a single line or with multiple calls to `@@apply`:
|
||||
|
||||
```less
|
||||
.btn {
|
||||
@@apply .font-bold;
|
||||
@@apply .py-2;
|
||||
@@apply .px-4;
|
||||
@@apply .rounded;
|
||||
}
|
||||
```
|
||||
|
||||
You can mix `@@apply` declarations with normal CSS declarations too of course:
|
||||
|
||||
```less
|
||||
.btn:hover {
|
||||
@@apply .bg-blue-dark;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
```
|
||||
|
||||
Any rules mixed in with `@@apply` will have `!important` **removed** by default to avoid specificity issues:
|
||||
|
||||
```less
|
||||
// Input
|
||||
.foo {
|
||||
@@apply .bar;
|
||||
}
|
||||
|
||||
.bar {
|
||||
color: blue !important;
|
||||
}
|
||||
|
||||
// Output
|
||||
.foo {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.bar {
|
||||
color: blue !important;
|
||||
}
|
||||
```
|
||||
|
||||
If you'd like to `@@apply` an existing class and make it `!important`, simply add `!important` to the end of the declaration:
|
||||
|
||||
|
||||
```less
|
||||
// Input
|
||||
.btn {
|
||||
@@apply .font-bold .py-2 .px-4 .rounded !important;
|
||||
}
|
||||
|
||||
// Output
|
||||
.btn {
|
||||
font-weight: 700 !important;
|
||||
padding-top: .5rem !important;
|
||||
padding-bottom: .5rem !important;
|
||||
padding-right: 1rem !important;
|
||||
padding-left: 1rem !important;
|
||||
border-radius: .25rem !important;
|
||||
}
|
||||
```
|
||||
|
||||
Note that `@@apply` **will not work** for mixing in hover, focus, or responsive variants of another utility. Instead, mix in the plain version of that utility into the appropriate pseudo-selector or a new media query:
|
||||
|
||||
```less
|
||||
// Won't work:
|
||||
.btn {
|
||||
@@apply .block .bg-red;
|
||||
@@apply .md:inline-block;
|
||||
@@apply .hover:bg-blue;
|
||||
}
|
||||
|
||||
// Do this instead:
|
||||
.btn {
|
||||
@@apply .block .bg-red;
|
||||
}
|
||||
.btn:hover {
|
||||
@@apply .bg-blue;
|
||||
}
|
||||
@@screen md {
|
||||
.btn {
|
||||
@@apply .inline-block;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### `@variants`
|
||||
|
||||
You can generate `responsive`, `hover`, `focus`, and `group-hover` versions of your own utilities by wrapping their definitions in the `@variants` directive
|
||||
|
||||
```less
|
||||
@@variants hover, focus {
|
||||
.banana {
|
||||
color: yellow;
|
||||
}
|
||||
.chocolate {
|
||||
color: brown;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This will generate the following CSS:
|
||||
|
||||
```less
|
||||
.banana {
|
||||
color: yellow;
|
||||
}
|
||||
.chocolate {
|
||||
color: brown;
|
||||
}
|
||||
.focus\:banana:focus {
|
||||
color: yellow;
|
||||
}
|
||||
.focus\:chocolate:focus {
|
||||
color: brown;
|
||||
}
|
||||
.hover\:banana:hover {
|
||||
color: yellow;
|
||||
}
|
||||
.hover\:chocolate:hover {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
The `@variants` at-rule supports all of the values that are supported in the `modules` section of your config file:
|
||||
|
||||
- `responsive`
|
||||
- `hover`
|
||||
- `focus`
|
||||
- `group-hover`
|
||||
|
||||
### `@@responsive`
|
||||
|
||||
You can generate responsive versions of your own classes by wrapping their definitions in the `@responsive` directive:
|
||||
|
||||
```less
|
||||
@@responsive {
|
||||
.bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Using the default breakpoints, this would generate these classes:
|
||||
|
||||
```less
|
||||
.bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
|
||||
// ...
|
||||
|
||||
@@media (min-width: 576px) {
|
||||
.sm\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
@@media (min-width: 768px) {
|
||||
.md\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
@@media (min-width: 992px) {
|
||||
.lg\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
@@media (min-width: 1200px) {
|
||||
.xl\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
The responsive versions will be added to Tailwind's existing media queries **at the end of your stylesheet.** This makes sure that classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property.
|
||||
|
||||
### `@@screen`
|
||||
|
||||
The `@@screen` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.
|
||||
|
||||
For example, say you have a `sm` breakpoint at `576px` and you need to write some custom CSS that references this breakpoint.
|
||||
|
||||
Instead of writing a raw media query that duplicates that value like this:
|
||||
|
||||
```less
|
||||
{{ '@media (min-width: 576px) {' }}
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
...you can use the `@@screen` directive and reference the breakpoint by name:
|
||||
|
||||
```less
|
||||
@@screen sm {
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
### `config()`
|
||||
|
||||
While it's recommended to use the `@@apply` directive to compose custom CSS out of existing utility classes whenever possible, sometimes you need direct access to your Tailwind config values.
|
||||
|
||||
Use the `config()` function to access your Tailwind config values using dot notation:
|
||||
|
||||
```less
|
||||
// Source
|
||||
.error {
|
||||
font-size: config('textSizes.xs');
|
||||
color: config('colors.red-darker');
|
||||
}
|
||||
|
||||
// Output
|
||||
.error {
|
||||
font-size: .75rem;
|
||||
color: #a61611;
|
||||
}
|
||||
```
|
||||
@ -1,115 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Height"
|
||||
description: "Utilities for setting the height of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'scroll' => false,
|
||||
'rows' => [
|
||||
[
|
||||
'.h-1',
|
||||
'height: 0.25rem;',
|
||||
"Set the element's height to 0.25rem.",
|
||||
],
|
||||
[
|
||||
'.h-2',
|
||||
'height: 0.5rem;',
|
||||
"Set the element's height to 0.5rem.",
|
||||
],
|
||||
[
|
||||
'.h-3',
|
||||
'height: 0.75rem;',
|
||||
"Set the element's height to 0.75rem.",
|
||||
],
|
||||
[
|
||||
'.h-4',
|
||||
'height: 1rem;',
|
||||
"Set the element's height to 1rem.",
|
||||
],
|
||||
[
|
||||
'.h-6',
|
||||
'height: 1.5rem;',
|
||||
"Set the element's height to 1.5rem.",
|
||||
],
|
||||
[
|
||||
'.h-8',
|
||||
'height: 2rem;',
|
||||
"Set the element's height to 2rem.",
|
||||
],
|
||||
[
|
||||
'.h-10',
|
||||
'height: 2.5rem;',
|
||||
"Set the element's height to 2.5rem.",
|
||||
],
|
||||
[
|
||||
'.h-12',
|
||||
'height: 3rem;',
|
||||
"Set the element's height to 3rem.",
|
||||
],
|
||||
[
|
||||
'.h-16',
|
||||
'height: 4rem;',
|
||||
"Set the element's height to 4rem.",
|
||||
],
|
||||
[
|
||||
'.h-24',
|
||||
'height: 6rem;',
|
||||
"Set the element's height to 6rem.",
|
||||
],
|
||||
[
|
||||
'.h-32',
|
||||
'height: 8rem;',
|
||||
"Set the element's height to 8rem.",
|
||||
],
|
||||
[
|
||||
'.h-48',
|
||||
'height: 12rem;',
|
||||
"Set the element's height to 12rem.",
|
||||
],
|
||||
[
|
||||
'.h-64',
|
||||
'height: 16rem;',
|
||||
"Set the element's height to 16rem.",
|
||||
],
|
||||
[
|
||||
'.h-auto',
|
||||
'height: auto;',
|
||||
"Set the element's height to auto.",
|
||||
],
|
||||
[
|
||||
'.h-px',
|
||||
'height: 1px;',
|
||||
"Set the element's height to 1px.",
|
||||
],
|
||||
[
|
||||
'.h-full',
|
||||
'height: 100%;',
|
||||
"Set the element's height to 100%.",
|
||||
],
|
||||
[
|
||||
'.h-screen',
|
||||
'height: 100vh;',
|
||||
"Set the element's height to 100vh.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'height',
|
||||
'property' => 'height',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,211 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Installation"
|
||||
description: "Quick start guide for installing and configuring Tailwind CSS."
|
||||
---
|
||||
|
||||
## CDN
|
||||
|
||||
Before getting started please note, **many of the features that make Tailwind CSS great are not available using the CDN builds.** To take full advantage of Tailwind's features, [install Tailwind via npm](#npm).
|
||||
|
||||
To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:
|
||||
|
||||
```html
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||
```
|
||||
|
||||
Or if you'd like to pull in the base styles separate from the utility classes:
|
||||
|
||||
```html
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Any of your own CSS would go here -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/utilities.min.css" rel="stylesheet">
|
||||
```
|
||||
|
||||
## NPM
|
||||
|
||||
For most projects (and to take advantage of Tailwind's customization features), you'll want to install Tailwind via npm.
|
||||
|
||||
### 1. Install Tailwind via npm
|
||||
|
||||
Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
|
||||
|
||||
<div class="rounded bg-grey-lightest border-2 border-grey-light font-mono text-sm p-4">
|
||||
<div class="text-grey-dark"># Using npm</div>
|
||||
<div class="text-purple-dark">npm install <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--save-dev</span></div>
|
||||
<div class="text-grey-dark mt-6"># Using Yarn</div>
|
||||
<div class="text-purple-dark">yarn add <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--dev</span></div>
|
||||
</div>
|
||||
|
||||
### 2. Create a Tailwind config file
|
||||
|
||||
Tailwind is configured almost entirely in plain JavaScript. To do this you'll need to generate a Tailwind config file for your project. We recommend creating a `tailwind.js` file in your project's root.
|
||||
|
||||
We've provided a CLI utility to do this easily:
|
||||
|
||||
<div class="rounded bg-grey-lightest border-2 border-grey-light font-mono text-sm p-4">
|
||||
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-grey-dark">[filename]</span></div>
|
||||
</div>
|
||||
|
||||
### 3. Use Tailwind in your CSS
|
||||
|
||||
Use the `@@tailwind` directive to inject Tailwind's `preflight` and `utilities` styles into your CSS.
|
||||
|
||||
To avoid specificity issues, we highly recommend structuring your main stylesheet like this:
|
||||
|
||||
```less
|
||||
/**
|
||||
* This injects Tailwind's base styles, which is a combination of
|
||||
* Normalize.css and some additional base styles.
|
||||
*
|
||||
* You can see the styles here:
|
||||
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
|
||||
*
|
||||
* If using `postcss-import`, you should import this line from it's own file:
|
||||
*
|
||||
* @@import "./tailwind-preflight.css";
|
||||
*
|
||||
* See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
|
||||
*/
|
||||
@@tailwind preflight;
|
||||
|
||||
/**
|
||||
* Here you would add any of your custom component classes; stuff that you'd
|
||||
* want loaded *before* the utilities so that the utilities could still
|
||||
* override them.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* .btn { ... }
|
||||
* .form-input { ... }
|
||||
*
|
||||
* Or if using a preprocessor or `postcss-import`:
|
||||
*
|
||||
* @@import "components/buttons";
|
||||
* @@import "components/forms";
|
||||
*/
|
||||
|
||||
/**
|
||||
* This injects all of Tailwind's utility classes, generated based on your
|
||||
* config file.
|
||||
*
|
||||
* If using `postcss-import`, you should import this line from it's own file:
|
||||
*
|
||||
* @@import "./tailwind-utilities.css";
|
||||
*
|
||||
* See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
|
||||
*/
|
||||
@@tailwind utilities;
|
||||
|
||||
/**
|
||||
* Here you would add any custom utilities you need that don't come out of the
|
||||
* box with Tailwind.
|
||||
*
|
||||
* Example :
|
||||
*
|
||||
* .bg-pattern-graph-paper { ... }
|
||||
* .skew-45 { ... }
|
||||
*
|
||||
* Or if using a preprocessor or `postcss-import`:
|
||||
*
|
||||
* @@import "utilities/background-patterns";
|
||||
* @@import "utilities/skew-transforms";
|
||||
*/
|
||||
```
|
||||
|
||||
### 4. Process your CSS with Tailwind
|
||||
|
||||
#### Using Tailwind CLI
|
||||
|
||||
For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:
|
||||
|
||||
<div class="bg-grey-lightest font-mono text-sm p-4">
|
||||
<div class="text-purple-dark">./node_modules/.bin/tailwind build <span class="text-blue-dark">styles.css</span> <span class="text-grey-dark">[-c ./tailwind.js] [-o ./output.css]</span></div>
|
||||
</div>
|
||||
|
||||
#### Using Tailwind with PostCSS
|
||||
|
||||
For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain.
|
||||
|
||||
We've included the Tailwind-specific instructions for a few popular tools below, but for instructions on getting started with PostCSS in general, see the [PostCSS documentation](https://github.com/postcss/postcss#usage).
|
||||
|
||||
#### Webpack
|
||||
|
||||
Add `tailwindcss` as a plugin in your `postcss.config.js` file, passing the path to your config file:
|
||||
|
||||
```js
|
||||
var tailwindcss = require('tailwindcss');
|
||||
module.exports = {
|
||||
plugins: [
|
||||
// ...
|
||||
tailwindcss('./path/to/your/tailwind-config.js'),
|
||||
require('autoprefixer'),
|
||||
// ...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
For a complete example, check out our [webpack-starter](https://github.com/tailwindcss/webpack-starter) template.
|
||||
|
||||
#### Gulp
|
||||
|
||||
Add `tailwindcss` to the list of plugins you pass to [gulp-postcss](https://github.com/postcss/gulp-postcss), passing the path to your config file:
|
||||
|
||||
```js
|
||||
gulp.task('css', function () {
|
||||
var postcss = require('gulp-postcss');
|
||||
var tailwindcss = require('tailwindcss');
|
||||
|
||||
return gulp.src('src/styles.css')
|
||||
// ...
|
||||
.pipe(postcss([
|
||||
// ...
|
||||
tailwindcss('./path/to/your/tailwind-config.js'),
|
||||
require('autoprefixer'),
|
||||
// ...
|
||||
]))
|
||||
// ...
|
||||
.pipe(gulp.dest('build/'));
|
||||
});
|
||||
```
|
||||
|
||||
#### Laravel Mix
|
||||
|
||||
If you're writing your project in plain CSS, use Mix's `postCss` method to process your CSS. Include `tailwindcss` as a plugin and pass the path to your config file:
|
||||
|
||||
```js
|
||||
var tailwindcss = require('tailwindcss');
|
||||
|
||||
mix.postCss('resources/assets/css/main.css', 'public/css', [
|
||||
tailwindcss('./path/to/your/tailwind-config.js'),
|
||||
]);
|
||||
```
|
||||
|
||||
If you're using a preprocessor, use the `options` method to add `tailwindcss` as a PostCSS plugin:
|
||||
|
||||
```js
|
||||
var tailwindcss = require('tailwindcss');
|
||||
|
||||
mix.less('resources/assets/less/app.less', 'public/css')
|
||||
.options({
|
||||
postCss: [
|
||||
tailwindcss('./path/to/your/tailwind-config.js'),
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
**Note for Sass users:** Due to [an unresolved issue](https://github.com/bholloway/resolve-url-loader/issues/28) with one of Mix's dependencies, to use Sass with Tailwind you'll need to disable `processCssUrls`:
|
||||
|
||||
```js
|
||||
var tailwindcss = require('tailwindcss');
|
||||
|
||||
mix.sass('resources/assets/sass/app.scss', 'public/css')
|
||||
.options({
|
||||
processCssUrls: false,
|
||||
postCss: [ tailwindcss('./path/to/your/tailwind-config.js') ],
|
||||
});
|
||||
```
|
||||
|
||||
For more information on what this feature does and the implications of disabling it, [see the Laravel Mix documentation](https://github.com/JeffreyWay/laravel-mix/blob/master/docs/css-preprocessors.md#css-url-rewriting).
|
||||
@ -1,44 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Letter Spacing"
|
||||
description: "Utilities for controlling the tracking (letter spacing) of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.tracking-tight',
|
||||
'letter-spacing: -0.05em;',
|
||||
'Set the letter spacing of an element to <code>-0.05em</code>.',
|
||||
],
|
||||
[
|
||||
'.tracking-normal',
|
||||
'letter-spacing: 0;',
|
||||
'Set the letter spacing of an element to <code>0</code>.',
|
||||
],
|
||||
[
|
||||
'.tracking-wide',
|
||||
'letter-spacing: 0.05em;',
|
||||
'Set the letter spacing of an element to <code>0.05em</code>.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'tracking',
|
||||
'property' => 'tracking',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Line Height"
|
||||
description: "Utilities for controlling the leading (line height) of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.leading-none',
|
||||
'line-height: 1;',
|
||||
'Set the line height of an element to <code>1</code>.',
|
||||
],
|
||||
[
|
||||
'.leading-tight',
|
||||
'line-height: 1.25;',
|
||||
'Set the line height of an element to <code>1.25</code>.',
|
||||
],
|
||||
[
|
||||
'.leading-normal',
|
||||
'line-height: 1.5;',
|
||||
'Set the line height of an element to <code>1.5</code>.',
|
||||
],
|
||||
[
|
||||
'.leading-loose',
|
||||
'line-height: 2;',
|
||||
'Set the line height of an element to <code>2</code>.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'leading',
|
||||
'property' => 'leading',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,34 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Lists"
|
||||
description: "Utilities for controlling list styles."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.list-reset',
|
||||
"list-style: none;\npadding: 0;",
|
||||
"Disable default browser styling for lists and list items.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'list',
|
||||
'property' => 'lists',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,40 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Max-Height"
|
||||
description: "Utilities for setting the maximum height of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'scroll' => false,
|
||||
'rows' => [
|
||||
[
|
||||
'.max-h-full',
|
||||
'max-height: 100%;',
|
||||
"Set the element's maximum height to 100%.",
|
||||
],
|
||||
[
|
||||
'.max-h-screen',
|
||||
'max-height: 100vh;',
|
||||
"Set the element's maximum height to 100vh.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'max-height',
|
||||
'property' => 'maxHeight',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,80 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Max-Width"
|
||||
description: "Utilities for setting the maximum width of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'scroll' => false,
|
||||
'rows' => [
|
||||
[
|
||||
'.max-w-xs',
|
||||
'max-width: 20rem;',
|
||||
"Set the element's maximum width to 20rem.",
|
||||
],
|
||||
[
|
||||
'.max-w-sm',
|
||||
'max-width: 30rem;',
|
||||
"Set the element's maximum width to 30rem.",
|
||||
],
|
||||
[
|
||||
'.max-w-md',
|
||||
'max-width: 40rem;',
|
||||
"Set the element's maximum width to 40rem.",
|
||||
],
|
||||
[
|
||||
'.max-w-lg',
|
||||
'max-width: 50rem;',
|
||||
"Set the element's maximum width to 50rem.",
|
||||
],
|
||||
[
|
||||
'.max-w-xl',
|
||||
'max-width: 60rem;',
|
||||
"Set the element's maximum width to 60rem.",
|
||||
],
|
||||
[
|
||||
'.max-w-2xl',
|
||||
'max-width: 70rem;',
|
||||
"Set the element's maximum width to 70rem.",
|
||||
],
|
||||
[
|
||||
'.max-w-3xl',
|
||||
'max-width: 80rem;',
|
||||
"Set the element's maximum width to 80rem.",
|
||||
],
|
||||
[
|
||||
'.max-w-4xl',
|
||||
'max-width: 90rem;',
|
||||
"Set the element's maximum width to 90rem.",
|
||||
],
|
||||
[
|
||||
'.max-w-5xl',
|
||||
'max-width: 100rem;',
|
||||
"Set the element's maximum width to 100rem.",
|
||||
],
|
||||
[
|
||||
'.max-w-full',
|
||||
'max-width: 100%;',
|
||||
"Set the element's maximum width to 100%.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'max-width',
|
||||
'property' => 'maxWidth',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,45 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Min-Height"
|
||||
description: "Utilities for setting the minimum height of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'scroll' => false,
|
||||
'rows' => [
|
||||
[
|
||||
'.min-h-0',
|
||||
'min-height: 0;',
|
||||
"Set the element's minimum height to 0.",
|
||||
],
|
||||
[
|
||||
'.min-h-full',
|
||||
'min-height: 100%;',
|
||||
"Set the element's minimum height to 100%.",
|
||||
],
|
||||
[
|
||||
'.min-h-screen',
|
||||
'min-height: 100vh;',
|
||||
"Set the element's minimum height to 100vh.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'min-height',
|
||||
'property' => 'minHeight',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,40 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Min-Width"
|
||||
description: "Utilities for setting the minimum width of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'scroll' => false,
|
||||
'rows' => [
|
||||
[
|
||||
'.min-w-0',
|
||||
'min-width: 0;',
|
||||
"Set the element's minimum width to 0.",
|
||||
],
|
||||
[
|
||||
'.min-w-full',
|
||||
'min-width: 100%;',
|
||||
"Set the element's minimum width to 100%.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'min-width',
|
||||
'property' => 'minWidth',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,125 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Opacity"
|
||||
description: "Utilities for controlling the opacity of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.opacity-100',
|
||||
'opacity: 1;',
|
||||
"Set the opacity of an element to 100%.",
|
||||
],
|
||||
[
|
||||
'.opacity-75',
|
||||
'opacity: .75;',
|
||||
"Set the opacity of an element to 75%.",
|
||||
],
|
||||
[
|
||||
'.opacity-50',
|
||||
'opacity: .5;',
|
||||
"Set the opacity of an element to 50%.",
|
||||
],
|
||||
[
|
||||
'.opacity-25',
|
||||
'opacity: .25;',
|
||||
"Set the opacity of an element to 25%.",
|
||||
],
|
||||
[
|
||||
'.opacity-0',
|
||||
'opacity: 0;',
|
||||
"Set the opacity of an element to 0%.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Example
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex -mx-2">
|
||||
@foreach ($page->config['opacity']->reverse() as $name => $value)
|
||||
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 mx-2 opacity-{{ $name }}">.opacity-{{ $name }}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@slot('code')
|
||||
@foreach ($page->config['opacity']->reverse() as $name => $value)
|
||||
<div class="opacity-{{ $name }}">.opacity-{{ $name }}</div>
|
||||
@endforeach
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control the opacity of an element at a specific breakpoint, add a `{screen}:` prefix to any existing opacity utility. For example, use `md:opacity-50` to apply the `opacity-50` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="text-center">
|
||||
<div class="px-4 py-2 bg-grey-light opacity-100 w-24 h-24 rounded-full inline-block"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="text-center">
|
||||
<div class="px-4 py-2 bg-grey-light opacity-75 w-24 h-24 rounded-full inline-block"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="text-center">
|
||||
<div class="px-4 py-2 bg-grey-light opacity-50 w-24 h-24 rounded-full inline-block"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="text-center">
|
||||
<div class="px-4 py-2 bg-grey-light opacity-25 w-24 h-24 rounded-full inline-block"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="text-center">
|
||||
<div class="px-4 py-2 bg-grey-light opacity-0 w-24 h-24 rounded-full inline-block"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:opacity-100 sm:opacity-75 md:opacity-50 lg:opacity-25 xl:opacity-0 ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
By default Tailwind provides five opacity utilities based on a simple numeric scale. You change, add, or remove these by editing the `opacity` section of your Tailwind config.
|
||||
|
||||
@component('_partials.customized-config', ['key' => 'opacity'])
|
||||
'0': '0',
|
||||
- '25': '.25',
|
||||
- '50': '.5',
|
||||
- '75': '.75',
|
||||
+ '10': '.1',
|
||||
+ '20': '.2',
|
||||
+ '30': '.3',
|
||||
+ '40': '.4',
|
||||
+ '50': '.5',
|
||||
+ '60': '.6',
|
||||
+ '70': '.7',
|
||||
+ '80': '.8',
|
||||
+ '90': '.9',
|
||||
'100': '1',
|
||||
@endcomponent
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'opacity',
|
||||
'property' => 'opacity',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,233 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Overflow"
|
||||
description: "Utilities for controlling how an element handles content that is too large for the container."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.overflow-visible',
|
||||
'overflow: visible;',
|
||||
"Don't clip content that overflows the element.",
|
||||
],
|
||||
[
|
||||
'.overflow-auto',
|
||||
'overflow: auto;',
|
||||
"Add scrollbars to an element if needed.",
|
||||
],
|
||||
[
|
||||
'.overflow-hidden',
|
||||
'overflow: hidden;',
|
||||
"Clip any content that overflows the element.",
|
||||
],
|
||||
[
|
||||
'.overflow-x-scroll',
|
||||
'overflow-x: auto;',
|
||||
"Allow horizontal scrolling if needed.",
|
||||
],
|
||||
[
|
||||
'.overflow-y-scroll',
|
||||
'overflow-y: auto;',
|
||||
"Allow vertical scrolling if needed.",
|
||||
],
|
||||
[
|
||||
'.overflow-scroll',
|
||||
'overflow: scroll;',
|
||||
"Add scrollbars to an element.",
|
||||
],
|
||||
[
|
||||
'.scrolling-touch',
|
||||
'-webkit-overflow-scrolling: touch;',
|
||||
"Use momentum-based scrolling on touch devices.",
|
||||
],
|
||||
[
|
||||
'.scrolling-auto',
|
||||
'-webkit-overflow-scrolling: auto;',
|
||||
"Use \"regular\" scrolling on touch devices.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Visible <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
Use `.overflow-visible` to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="overflow-hidden h-24">
|
||||
<div class="overflow-visible h-32 bg-grey-light text-grey-darker p-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
|
||||
</div>
|
||||
</div>
|
||||
@slot('code')
|
||||
<div class="overflow-visible h-32 ...">Lorem ipsum dolor sit amet...</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Auto
|
||||
|
||||
Use `.overflow-auto` to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike `.overflow-scroll`, which always show scrollbars, this utility will only show them if scrolling is necessary.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
|
||||
</div>
|
||||
@slot('code')
|
||||
<div class="overflow-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Hidden
|
||||
|
||||
Use `.overflow-hidden` to clip any content within an element that overflows the bounds of that element.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="overflow-hidden h-32 bg-grey-light text-grey-darker p-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
|
||||
</div>
|
||||
@slot('code')
|
||||
<div class="overflow-hidden h-32 ...">Lorem ipsum dolor sit amet...</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Scroll horizontally
|
||||
|
||||
Use `.overflow-x-scroll` to allow horizontal scrolling if needed.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="overflow-scroll bg-grey-light text-grey-darker p-2">
|
||||
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="overflow-x-scroll ...">QrLmmW69vMQD...</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Scroll vertically
|
||||
|
||||
Use `.overflow-y-scroll` to allow vertical scrolling if needed.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="overflow-y-scroll h-32 bg-grey-light text-grey-darker p-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="overflow-y-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Scroll in all directions
|
||||
|
||||
Use `.overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems, like MacOS, hide unnecessary scrollbars regardless of this setting.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<p class="text-sm text-grey-dark mb-1">Scroll horizontally when content can't wrap</p>
|
||||
<div class="overflow-scroll bg-grey-light text-grey-darker p-2 mb-6">
|
||||
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-grey-dark mb-1">Scroll vertically when content can wrap</p>
|
||||
<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2 mb-6">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-grey-dark mb-1">Scroll both horizontally and vertically when some content can't wrap</p>
|
||||
<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2">
|
||||
Loremipsumdolorsitamet,consecteturadipiscingelit.Mauriseleifendrutrumauctor.Phasellusconvallissagittisaugueutornare.Donecexlorem,auctoreurutrumin,blanditiddolor.Nullamolestiearcuturpis.Inidfelisvulputate,tempormassaeget,malesuadamauris.Quisquefringillaconsequatmetus,luctusscelerisqueleofringillavel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel. Ullam repudiandae omnis tempora soluta non, sed corporis vel reiciendis reprehenderit vitae nobis dolorum maiores eaque eos nemo mollitia animi, adipisci, molestias? Nam quo odio, similique iure, molestias ullam! Temporibus vel ab, fuga, ut nihil fugiat quaerat tenetur veniam, excepturi natus hic dolorum fugit. Ab sint molestiae nihil ex, minima facere sit adipisci. Totam quos eveniet, quibusdam qui quis aperiam aut nihil perferendis earum in error. Autem porro deleniti molestiae odio delectus alias dolorem nihil voluptates a, quam corrupti sapiente, nulla ea omnis quas ipsam rerum atque excepturi! Corporis culpa asperiores sint voluptatum, quos, cupiditate iste similique illum quas libero, temporibus laborum quisquam esse veritatis eligendi qui odit quo repellat!
|
||||
</div>
|
||||
@slot('code')
|
||||
<div class="overflow-scroll ...">QrLmmW69vMQD...</div>
|
||||
<div class="overflow-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>
|
||||
<div class="overflow-scroll h-32 ...">Loremipsumdolorsitamet...</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Momentum-based scrolling on touch devices
|
||||
|
||||
Use `.scrolling-touch` to use momentum-based scrolling (where supported) on touch devices.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="scrolling-touch overflow-auto h-32 bg-grey-light text-grey-darker p-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
|
||||
</div>
|
||||
@slot('code')
|
||||
<div class="scrolling-touch overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
Use `.scrolling-auto` to use normal non-momentum-based scrolling on touch devices.
|
||||
|
||||
This is mostly useful for undoing `.scrolling-touch` at larger screen sizes.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="scrolling-auto overflow-auto h-32 bg-grey-light text-grey-darker p-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
|
||||
</div>
|
||||
@slot('code')
|
||||
<div class="scrolling-auto overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To apply an overflow utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:overflow-scroll` to an element would apply the `overflow-scroll` utility at medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="overflow-auto h-32 bg-grey-light text-grey-darker p-2">
|
||||
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="overflow-visible h-32 bg-grey-light text-grey-darker p-2">
|
||||
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="overflow-hidden h-32 bg-grey-light text-grey-darker p-2">
|
||||
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="overflow-x-scroll h-32 bg-grey-light text-grey-darker p-2">
|
||||
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="overflow-y-scroll h-32 bg-grey-light text-grey-darker p-2">
|
||||
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:overflow-auto sm:overflow-visible md:overflow-hidden lg:overflow-x-scroll xl:overflow-y-scroll ...">
|
||||
Lorem ipsum dolor sit amet...
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'overflow',
|
||||
'property' => 'overflow',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,39 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Pointer Events"
|
||||
description: "Utilities for controlling whether an element responds to pointer events."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.pointer-events-none',
|
||||
'pointer-events: none;',
|
||||
"Make element not react to pointer events, like <code>:hover</code> or <code>click</code>.",
|
||||
],
|
||||
[
|
||||
'.pointer-events-auto',
|
||||
'pointer-events: auto;',
|
||||
"Make element react to pointer events, like <code>:hover</code> or <code>click</code>.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'pointer event',
|
||||
'property' => 'pointerEvents',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,423 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Positioning"
|
||||
descriptioj: "Utilities for controlling how an element is positioned in the DOM."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.static',
|
||||
"position: static;",
|
||||
"Position an element according to the normal flow of the document.",
|
||||
],
|
||||
[
|
||||
'.fixed',
|
||||
"position: fixed;",
|
||||
"Position an element relative to the browser window.",
|
||||
],
|
||||
[
|
||||
'.absolute',
|
||||
"position: absolute;",
|
||||
"Position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.",
|
||||
],
|
||||
[
|
||||
'.relative',
|
||||
"position: relative;",
|
||||
"Position an element according to the normal flow of the document.",
|
||||
],
|
||||
[
|
||||
'.pin-t',
|
||||
"top: 0;",
|
||||
"Anchor absolutely positioned element to the top edge of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-r',
|
||||
"right: 0;",
|
||||
"Anchor absolutely positioned element to the right edge of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-b',
|
||||
"bottom: 0;",
|
||||
"Anchor absolutely positioned element to the bottom edge of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-l',
|
||||
"left: 0;",
|
||||
"Anchor absolutely positioned element to the left edge of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-y',
|
||||
"top: 0;\nbottom: 0;",
|
||||
"Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-x',
|
||||
"right: 0;\nleft: 0;",
|
||||
"Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin',
|
||||
"top: 0;\nright: 0;\nbottom: 0;\nleft: 0;",
|
||||
"Anchor absolutely positioned element to all the edges of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-none',
|
||||
"top: auto;\nright: auto;\nbottom: auto;\nleft: auto;",
|
||||
"Reset absolutely positioned element to all the edges from a given breakpoint onwards.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Static <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
Use `.static` to position an element according to the normal flow of the document.
|
||||
|
||||
Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="relative bg-grey-light p-4">
|
||||
<div class="static h-32 bg-grey-dark p-4 text-black">
|
||||
<p>Static parent</p>
|
||||
<div class="absolute pin-b pin-l bg-grey-darkest p-4 text-grey-light">
|
||||
<p>Absolute child</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="static bg-grey-dark">
|
||||
Static parent
|
||||
<div class="absolute pin-b pin-l bg-grey-darkest">
|
||||
Absolute child
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Relative
|
||||
|
||||
Use `.relative` to position an element according to the normal flow of the document.
|
||||
|
||||
Offsets are calculated relative to the element's normal position and the element *will* act as a position reference for absolutely positioned children.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="relative bg-grey-light p-4">
|
||||
<div class="relative h-32 bg-grey-dark p-4 text-black">
|
||||
<p>Relative parent</p>
|
||||
<div class="absolute pin-b pin-l bg-grey-darkest p-4 text-grey-light">
|
||||
<p>Absolute child</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="relative bg-grey-dark">
|
||||
Relative parent
|
||||
<div class="absolute pin-b pin-l bg-grey-darkest">
|
||||
Absolute child
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Absolute
|
||||
|
||||
Use `.absolute` to position an element *outside* of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.
|
||||
|
||||
Offsets are calculated relative to the nearest parent that has a position other than `static`, and the element *will* act as a position reference for other absolutely positioned children.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
|
||||
<p class="text-sm text-grey-dark mb-1">With static positioning</p>
|
||||
<div class="relative bg-grey-light px-4 pt-2 pb-4 mb-6">
|
||||
<p class="mb-2 text-grey-darker">Relative parent</p>
|
||||
<div class="static bg-grey p-4 text-grey-darker">
|
||||
<p class="mb-2">Static parent</p>
|
||||
<div class="static pin-b pin-l bg-grey-darkest p-4 text-grey-light inline-block">
|
||||
<p>Static child</p>
|
||||
</div>
|
||||
<div class="bg-grey-light p-4 text-grey-darker inline-block">
|
||||
<p>Static sibling</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-grey-dark mb-1">With absolute positioning</p>
|
||||
<div class="relative bg-grey-light px-4 pt-2 pb-4">
|
||||
<p class="mb-2 text-grey-darker">Relative parent</p>
|
||||
<div class="static bg-grey p-4 text-grey-darker">
|
||||
<p class="mb-2">Static parent</p>
|
||||
<div class="absolute pin-t pin-r bg-grey-darkest p-4 text-grey-light inline-block">
|
||||
<p>Absolute child</p>
|
||||
</div>
|
||||
<div class="bg-grey-light p-4 text-grey-darker inline-block">
|
||||
<p>Static sibling</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="relative bg-grey-light">
|
||||
Relative parent
|
||||
<div class="static bg-grey-dark">
|
||||
Static parent
|
||||
<div class="absolute pin-t pin-r bg-grey-darkest">
|
||||
Absolute child
|
||||
</div>
|
||||
<div class="bg-grey-light inline-block">
|
||||
Static sibling
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Fixed
|
||||
|
||||
Use `.fixed` to position an element relative to the browser window.
|
||||
|
||||
Offsets are calculated relative to the viewport and the element *will* act as a position reference for absolutely positioned children.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="rounded-b overflow-hidden max-w-md mx-auto mt-4 mb-4">
|
||||
<div class="rounded-t border-t border-l border-r border-grey-light bg-grey-lighter flex px-4 py-3">
|
||||
<div class="mr-6">
|
||||
<span class="inline-block rounded-full bg-grey h-3 w-3 mr-1"></span>
|
||||
<span class="inline-block rounded-full bg-grey h-3 w-3 mr-1"></span>
|
||||
<span class="inline-block rounded-full bg-grey h-3 w-3"></span>
|
||||
</div>
|
||||
<div class="flex-1 bg-white border border-grey-light rounded mr-4"></div>
|
||||
</div>
|
||||
<div class="relative bg-grey-light h-64">
|
||||
|
||||
<!-- Hey fellow nerd! Yes, we're using position absolute instead of position fixed in the demo; it's the best way we could come up with to demonstrate how position fixed works without totally jacking up the layout of the entire documentation site. Forgive us! 😄 -->
|
||||
|
||||
<div class="absolute pin-l pin-r pin-t bg-grey-darkest text-grey-light z-10 px-4 py-3">
|
||||
Fixed child
|
||||
<div class="absolute pin-t pin-b pin-r px-4 py-3 bg-grey text-grey-darkest">
|
||||
Absolute child
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute pin overflow-auto pt-16 px-4 pb-4">
|
||||
<p class="mb-4">Scroll me!</p>
|
||||
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
|
||||
<p class="mb-4">Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
|
||||
<p class="mb-4">Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>
|
||||
<p class="mb-4">Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
|
||||
<p class="mb-4">Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. </p>
|
||||
<p class="mb-4">Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. </p>
|
||||
<p class="mb-4">Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
|
||||
<p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="bg-grey-light pt-16">
|
||||
<div class="fixed bg-grey-dark">
|
||||
Fixed child
|
||||
<div class="absolute pin-t pin-r bg-grey-darkest">
|
||||
Absolute child
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Scroll me!
|
||||
|
||||
Lorem ipsum...
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Pinning edges
|
||||
|
||||
Use the `.pin{-edge?}` utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent.
|
||||
|
||||
Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably find that these are all you need to precisely control absolutely positioned elements.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm leading-none mb-8">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-grey-darker uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pin</code></div>
|
||||
</div>
|
||||
<div class="pl-12 pr-12 border-l">
|
||||
<div class="mb-3 text-grey-darker"><span class="uppercase">Edge</span> <span class="text-grey-dark text-xs">(optional)</span></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter"> </code> All <em class="text-xs text-grey-dark">(default)</em></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Top and Bottom</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Left and Right</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-around mb-8">
|
||||
<div>
|
||||
<p class="text-center text-sm text-grey-dark mb-1">.pin-x.pin-t</p>
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-x pin-t h-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-center text-sm text-grey-dark mb-1">.pin-y.pin-r</p>
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-y pin-r w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-center text-sm text-grey-dark mb-1">.pin-x.pin-b</p>
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-x pin-b h-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-center text-sm text-grey-dark mb-1">.pin-y.pin-l</p>
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-y pin-l w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-center text-sm text-grey-dark mb-1">.pin</p>
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin bg-grey-darker"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-around">
|
||||
<div>
|
||||
<p class="text-center text-sm text-grey-dark mb-1">.pin-l.pin-t</p>
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-l pin-t h-8 w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-center text-sm text-grey-dark mb-1">.pin-t.pin-r</p>
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-t pin-r h-8 w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-center text-sm text-grey-dark mb-1">.pin-r.pin-b</p>
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-r pin-b h-8 w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-center text-sm text-grey-dark mb-1">.pin-b.pin-l</p>
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-b pin-l h-8 w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-24 w-24 opacity-0"></div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<!-- Span top edge -->
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-x pin-t h-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
|
||||
<!-- Span right edge -->
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-y pin-r w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
|
||||
<!-- Span bottom edge -->
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-x pin-b h-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
|
||||
<!-- Span left edge -->
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-y pin-l bg-grey-darker"></div>
|
||||
</div>
|
||||
|
||||
<!-- Fill entire parent -->
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin bg-grey-darker"></div>
|
||||
</div>
|
||||
|
||||
<!-- Pin to top left corner -->
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-l pin-t h-8 w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
|
||||
<!-- Pin to top right corner -->
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-t pin-r h-8 w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
|
||||
<!-- Pin to bottom right corner -->
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-b pin-r h-8 w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
|
||||
<!-- Pin to bottom left corner -->
|
||||
<div class="relative h-24 w-24 bg-grey-light">
|
||||
<div class="absolute pin-b pin-l h-8 w-8 bg-grey-darker"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To position an element only at a specific breakpoint, add a `{screen}:` prefix to any existing positioning utility. For example, adding the class `md:absolute` to an element would apply the `absolute` utility at medium screen sizes and above, and adding `lg:pin-y` would apply `pin-y` at large screens and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="relative h-32 bg-grey-light p-4">
|
||||
<div class="relative bg-grey-darkest p-4 text-grey">Responsive element</div>
|
||||
</div>
|
||||
@endslot
|
||||
|
||||
@slot('sm')
|
||||
<div class="relative h-32 bg-grey-light p-4">
|
||||
<div class="absolute pin-b pin-l bg-grey-darkest p-4 text-grey">Responsive element</div>
|
||||
</div>
|
||||
@endslot
|
||||
|
||||
@slot('md')
|
||||
<div class="relative h-32 bg-grey-light p-4">
|
||||
<div class="absolute pin-t pin-x bg-grey-darkest p-4 text-grey">Responsive element</div>
|
||||
</div>
|
||||
@endslot
|
||||
|
||||
@slot('lg')
|
||||
<div class="relative h-32 bg-grey-light p-4">
|
||||
<div class="absolute pin-r pin-y bg-grey-darkest p-4 text-grey">Responsive element</div>
|
||||
</div>
|
||||
@endslot
|
||||
|
||||
@slot('xl')
|
||||
<div class="relative h-32 bg-grey-light p-4">
|
||||
<div class="absolute pin-b pin-x bg-grey-darkest p-4 text-grey">Responsive element</div>
|
||||
</div>
|
||||
@endslot
|
||||
|
||||
@slot('code')
|
||||
<div class="relative h-32 bg-grey-light p-4">
|
||||
<div class="none:relative sm:absolute sm:pin-b sm:pin-l md:pin-t md:pin-x lg:pin-r lg:pin-y xl:pin-b xl:pin-x"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'positioning',
|
||||
'property' => 'position',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,50 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Resize"
|
||||
description: "Utilities for controlling how an element can be resized."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.resize-none',
|
||||
'resize: none;',
|
||||
"Make an element not resizable.",
|
||||
],
|
||||
[
|
||||
'.resize',
|
||||
'resize: both;',
|
||||
"Make an element resizable along both axes.",
|
||||
],
|
||||
[
|
||||
'.resize-y',
|
||||
'resize: vertical;',
|
||||
"Make an element resizable vertically.",
|
||||
],
|
||||
[
|
||||
'.resize-x',
|
||||
'resize: horizontal;',
|
||||
"Make an element resizable horizontally.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'resizing',
|
||||
'property' => 'resize',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,145 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Responsive Design"
|
||||
description: null
|
||||
---
|
||||
|
||||
Tailwind allows you to build responsive designs in the same way you build the rest of your design — using utility classes. Every utility in Tailwind is also available in screen-size specific variations. For example, the `.font-bold` utility can be used on small screen sizes using the `.sm:font-bold` class, on medium screen sizes using the `.md:font-bold` class, on large screen sizes using the `.lg:font-bold` class and on extra large screen sizes using the `.xl:font-bold` class.
|
||||
|
||||
This is done using predefined screen sizes (media query breakpoints), each of which are given a unique name like `sm`, `md`, `lg` and `xl`. By default Tailwind takes a "mobile first" approach, where each screen size represents a minimum viewport width. Any classes you apply at smaller screen sizes are also applied to larger sizes, unless of course you override them, which is the whole point! This approach, while simple, is actually very powerful and can be used to build complex, beautiful, responsive designs.
|
||||
|
||||
## Responsive example
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-purple text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-green text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-blue text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-red text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-orange text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:bg-purple none:text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
|
||||
...
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing screens
|
||||
|
||||
You define your project's screen sizes in your Tailwind config under the `screens` key. Screens in Tailwind are essentially CSS media queries. If you provide a single value for a screen, Tailwind will treat this as the minimum screen size value for that screen breakpoint.
|
||||
|
||||
Here are the default screen sizes:
|
||||
|
||||
```js
|
||||
screens: {
|
||||
'sm': '576px',
|
||||
// => @media (min-width: 576px) { ... }
|
||||
|
||||
'md': '768px',
|
||||
// => @media (min-width: 768px) { ... }
|
||||
|
||||
'lg': '992px',
|
||||
// => @media (min-width: 992px) { ... }
|
||||
|
||||
'xl': '1200px',
|
||||
// => @media (min-width: 1200px) { ... }
|
||||
},
|
||||
```
|
||||
|
||||
Feel free to have as few or as many screens as you want, naming them in whatever way you'd prefer for your project.
|
||||
|
||||
For example, you could use device names instead of sizes:
|
||||
|
||||
```js
|
||||
screens: {
|
||||
'tablet': '576px',
|
||||
// => @media (min-width: 576px) { ... }
|
||||
|
||||
'laptop': '992px',
|
||||
// => @media (min-width: 992px) { ... }
|
||||
|
||||
'desktop': '1200px',
|
||||
// => @media (min-width: 1200px) { ... }
|
||||
},
|
||||
```
|
||||
|
||||
These screen names will be reflected in your utilities, so your `.bg-red` utilities would now look like this:
|
||||
|
||||
```css
|
||||
.bg-red { background-color: config('colors.red'); }
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.tablet\:bg-red { background-color: config('colors.red'); }
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.laptop\:bg-red { background-color: config('colors.red'); }
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.desktop\:bg-red { background-color: config('colors.red'); }
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced screens
|
||||
|
||||
Tailwind also allows for more complex screen definitions, which can be useful in certain situations. For example, if you wanted to define both the minimum and maximum size for your screens, you could do that like this:
|
||||
|
||||
```js
|
||||
screens: {
|
||||
'sm': {'min': '576px', 'max': '767px'},
|
||||
'md': {'min': '768px', 'max': '991px'},
|
||||
'lg': {'min': '992px', 'max': '1999px'},
|
||||
'xl': {'min': '1200px'},
|
||||
},
|
||||
```
|
||||
|
||||
You can also provide multiple ranges per screen. This is useful in situations where you have a sidebar navigation and want to maintain consistent content breakpoints, regardless of the navigation being visible or not. Here's an example:
|
||||
|
||||
```js
|
||||
screens: {
|
||||
'sm': '500px',
|
||||
'md': [
|
||||
// Sidebar appears at 768px, so revert to `sm:` styles between 768px
|
||||
// and 868px, after which the main content area is wide enough again to
|
||||
// apply the `md:` styles.
|
||||
{'min': '668px', 'max': '767px'},
|
||||
{'min': '868px'}
|
||||
],
|
||||
'lg': '1100px',
|
||||
'xl': '1400px',
|
||||
},
|
||||
```
|
||||
|
||||
## Print screens
|
||||
|
||||
As mentioned earlier, screens in Tailwind are essentially just CSS media queries. So while you normally define your screensizes in pixels, it's possible to also define non-regular screens using the `raw` key. Here is an example of how you could use this to create a print-only screen size.
|
||||
|
||||
```js
|
||||
screens: {
|
||||
'sm': '576px',
|
||||
'md': '768px',
|
||||
'lg': '992px',
|
||||
'xl': '1200px',
|
||||
'print': {'raw': 'print'}
|
||||
},
|
||||
```
|
||||
@ -1,147 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Shadows"
|
||||
description: "Utilities for controlling the box shadow of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.shadow',
|
||||
"box-shadow:\n 0 2px 4px 0 rgba(0,0,0,0.10);",
|
||||
"Apply a small box shadow to an element.",
|
||||
],
|
||||
[
|
||||
'.shadow-md',
|
||||
"box-shadow:\n 0 4px 8px 0 rgba(0,0,0,0.12),\n 0 2px 4px 0 rgba(0,0,0,0.08);",
|
||||
"Apply a medium box shadow to an element.",
|
||||
],
|
||||
[
|
||||
'.shadow-lg',
|
||||
"box-shadow:\n 0 15px 30px 0 rgba(0,0,0,0.11),\n 0 5px 15px 0 rgba(0,0,0,0.08);",
|
||||
"Apply a large box shadow to an element.",
|
||||
],
|
||||
[
|
||||
'.shadow-inner',
|
||||
"box-shadow:\n inset 0 2px 4px 0 rgba(0,0,0,0.06);",
|
||||
"Apply a small inner box shadow to an element.",
|
||||
],
|
||||
[
|
||||
'.shadow-none',
|
||||
"box-shadow: none;",
|
||||
"Remove a box shadow from an element.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Outer shadow
|
||||
|
||||
Use the `.shadow`, `.shadow-md`, or `.shadow-lg` utilities to apply different sized outer box shadows to an element.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
|
||||
<div class="mr-3 p-4 shadow">.shadow</div>
|
||||
<div class="mr-3 p-4 shadow-md">.shadow-md</div>
|
||||
<div class="p-4 shadow-lg">.shadow-lg</div>
|
||||
@slot('code')
|
||||
<div class="shadow"></div>
|
||||
<div class="shadow-md"></div>
|
||||
<div class="shadow-lg"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Inner shadow
|
||||
|
||||
Use the `.shadow-inner` utility to apply a subtle inset box shadow to an element.
|
||||
|
||||
This can be useful for things like form controls or wells.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
|
||||
<div class="p-4 bg-grey-lightest shadow-inner">.shadow-inner</div>
|
||||
@slot('code')
|
||||
<div class="shadow-inner"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## No shadow
|
||||
|
||||
Use `.shadow-none` to remove an existing box shadow from an element.
|
||||
|
||||
This is most commonly used to remove a shadow that was applied at a smaller breakpoint.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
|
||||
<div class="p-4 shadow-none bg-grey-light">.shadow-none</div>
|
||||
@slot('code')
|
||||
<div class="shadow-none"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control the shadow of an element at a specific breakpoint, add a `{screen}:` prefix to any existing shadow utility. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex justify-center">
|
||||
<div class="shadow px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex justify-center">
|
||||
<div class="shadow-md px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex justify-center">
|
||||
<div class="shadow-lg px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex justify-center">
|
||||
<div class="shadow-inner px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex justify-center">
|
||||
<div class="shadow-none px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:shadow sm:shadow-md md:shadow-lg lg:shadow-inner xl:shadow-none ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the `shadows` section of your Tailwind config.
|
||||
|
||||
If a `default` shadow is provided, it will be used for the non-suffixed `.shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.shadow-2` utility.
|
||||
|
||||
@component('_partials.customized-config', ['key' => 'shadows'])
|
||||
- default: '0 2px 4px 0 rgba(0,0,0,0.10)',
|
||||
- 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
|
||||
- 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
|
||||
- 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
|
||||
+ '1': '0 2px 4px rgba(0,0,0,0.05)',
|
||||
+ '2': '0 4px 8px rgba(0,0,0,0.1)',
|
||||
+ '3': '0 8px 16px rgba(0,0,0,0.15)',
|
||||
'none': 'none',
|
||||
@endcomponent
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'shadow',
|
||||
'property' => 'shadows',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,85 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Spacing"
|
||||
description: "Utilities for controlling an element's padding and margin."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
Control an element's padding and margin using the `.p{side?}-{size}`, `.m{side?}-{size}`, and `.-m{side?}-{size}` utilities.
|
||||
|
||||
For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.mx-0` would make the horizontal margin zero, and `.-mb-6` would add a `1.5rem` negative margin to the bottom of an element.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-grey-darker uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">-m</code> Negative Margin</div>
|
||||
</div>
|
||||
<div class="pl-12 pr-12 border-l">
|
||||
<div class="mb-3 text-grey-darker"><span class="uppercase">Side</span> <span class="text-grey-dark text-xs">(optional)</span></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter"> </code> All <em class="text-xs text-grey-dark">(default)</em></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
|
||||
</div>
|
||||
<div class="pl-12 border-l">
|
||||
<div class="mb-3 text-grey-darker uppercase">Space</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">px</code> 1px</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">auto</code> auto <span class="text-grey-dark text-xs">(margins only)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Customizing
|
||||
|
||||
### Responsive, Hover, and Focus Variants
|
||||
|
||||
By default, only responsive variants are generated for margin, negative margin and padding utilities.
|
||||
|
||||
You can control which variants are generated for the list utilities by modifying the `margin`, `negativeMargin` and `padding` property in the `modules` section of your Tailwind config file.
|
||||
|
||||
For example, this config will _also_ generate hover and focus variants of the margin utilities, hover variants of the negative margin utilities, and focus variants of the padding utilities:
|
||||
|
||||
```js
|
||||
{
|
||||
// ...
|
||||
modules: {
|
||||
// ...
|
||||
margin: ['responsive', 'hover', 'focus'],
|
||||
negativeMargin: ['responsive', 'hover'],
|
||||
padding: ['responsive', 'focus'],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Disabling
|
||||
|
||||
If you aren't using the margin, the negative margin, or padding utilities in your project, you can disable them entirely by setting the `margin`, `negativeMargin` and `padding` property to `false` in the `modules` section of your config file:
|
||||
|
||||
```js
|
||||
{
|
||||
// ...
|
||||
modules: {
|
||||
// ...
|
||||
margin: false,
|
||||
negativeMargin: false,
|
||||
padding: false,
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,132 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "State Variants"
|
||||
description: "Using utilities to style elements on hover, focus, and more."
|
||||
---
|
||||
|
||||
Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it easy to style elements on hover, focus, and more using *state* prefixes.
|
||||
|
||||
## Hover
|
||||
|
||||
Add the `hover:` prefix to only apply a utility on hover.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-transparent hover:bg-blue text-blue-dark font-semibold hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
|
||||
Hover me
|
||||
</button>
|
||||
|
||||
|
||||
@slot('code')
|
||||
<button class="bg-transparent hover:bg-blue text-blue-dark hover:text-white...">
|
||||
Hover me
|
||||
</button>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
<div class="bg-blue-light text-white font-semibold px-4 py-3 mb-4 -mt-2">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="fill-current h-6 w-6 text-white opacity-75 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2"><strong>By default, hover variants are only generated for background color, border color, font weight, text color, and text style utilities.</strong></p>
|
||||
<p>You can customize this in the <a href="/docs/configuration#modules" class="underline">modules section</a> of your configuration file.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
## Focus
|
||||
|
||||
Add the `focus:` prefix to only apply a utility on focus.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="max-w-xs w-full mx-auto">
|
||||
<input class="bg-white focus:bg-grey-dark text-black focus:text-white appearance-none inline-block w-full text-black border rounded py-3 px-4" placeholder="Focus me">
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<input class="bg-white focus:bg-grey-dark text-black focus:text-white ..." placeholder="Focus me">
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
<div class="bg-blue-light text-white font-semibold px-4 py-3 mb-4 -mt-2">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="fill-current h-6 w-6 text-white opacity-75 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2"><strong>By default, focus variants are not generated for any utilities.</strong></p>
|
||||
<p>You can customize this in the <a href="/docs/configuration#modules" class="underline">modules section</a> of your configuration file.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
## Group Hover
|
||||
|
||||
If you need to style a child element when hovering over a specific parent element, add the `.group` class to the parent element and add the `group-hover:` prefix to the utility on the child element.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'bg-grey-lighter p-8'])
|
||||
<div class="group hover:bg-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto">
|
||||
<p class="font-semibold text-lg mb-1 text-black group-hover:text-white">New Project</p>
|
||||
<p class="text-grey-darker group-hover:text-white mb-2">Create a new project from a variety of starting templates.</p>
|
||||
</div>
|
||||
|
||||
|
||||
@slot('code')
|
||||
<div class="group bg-white hover:bg-blue ...">
|
||||
<p class="text-black group-hover:text-white ...">New Project</p>
|
||||
<p class="text-grey-darker group-hover:text-white ...">Create a new project from a variety of starting templates.</p>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
<div class="bg-blue-light text-white font-semibold px-4 py-3 mb-4 -mt-2">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="fill-current h-6 w-6 text-white opacity-75 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2"><strong>By default, group hover variants are not generated for any utilities.</strong></p>
|
||||
<p>You can customize this in the <a href="/docs/configuration#modules" class="underline">modules section</a> of your configuration file.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Combining with Responsive Prefixes
|
||||
|
||||
State variants are also responsive, meaning you can change an element's hover style for example at different breakpoints.
|
||||
|
||||
To apply a state variant responsively, **add the responsive prefix first, before the state prefix.**
|
||||
|
||||
```html
|
||||
<button class="... md:bg-orange md:hover:bg-red ...">Button</button>
|
||||
```
|
||||
|
||||
## State Variants for Custom Utilities
|
||||
|
||||
You can generate state variants for your own custom utilities using the `@@variants` directive:
|
||||
|
||||
```less
|
||||
// Input:
|
||||
@@variants hover, focus {
|
||||
.banana {
|
||||
color: yellow;
|
||||
}
|
||||
}
|
||||
|
||||
// Output:
|
||||
.banana {
|
||||
color: yellow;
|
||||
}
|
||||
.focus\:banana:focus {
|
||||
color: yellow;
|
||||
}
|
||||
.hover\:banana:hover {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
For more information, see the [@@variants directive documentation](/docs/functions-and-directives#variants).
|
||||
@ -1,122 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "SVG"
|
||||
description: "Utilities for styling SVG elements."
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.fill-current',
|
||||
'fill: currentColor;',
|
||||
'Set the fill color to the current text color.',
|
||||
],
|
||||
[
|
||||
'.stroke-current',
|
||||
'stroke: currentColor;',
|
||||
'Set the stroke color to the current text color.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Fill color
|
||||
|
||||
Use `.fill-current` to set the fill color of an SVG to the current text color. This makes it easy to set an element's fill color by combining this class with an existing [text color utility](/docs/text-color).
|
||||
|
||||
Useful for styling icon sets like [Zondicons](http://www.zondicons.com/) that are drawn entirely with fills.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'text-center'])
|
||||
<svg class="fill-current text-teal inline-block h-12 w-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z"/>
|
||||
</svg>
|
||||
@endcomponent
|
||||
|
||||
### Stroke color
|
||||
|
||||
Use `.stroke-current` to set the stroke color of an SVG to the current text color. This makes it easy to set an element's stroke color by combining this class with an existing [text color utility](/docs/text-color).
|
||||
|
||||
Useful for styling icon sets like [Feather](https://feathericons.com/) that are drawn entirely with strokes.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'text-center'])
|
||||
<svg class="stroke-current text-purple inline-block h-12 w-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="8" cy="21" r="2"></circle>
|
||||
<circle cx="20" cy="21" r="2"></circle>
|
||||
<path d="M5.67 6H23l-1.68 8.39a2 2 0 0 1-2 1.61H8.75a2 2 0 0 1-2-1.74L5.23 2.74A2 2 0 0 0 3.25 1H1"></path>
|
||||
</svg>
|
||||
@endcomponent
|
||||
|
||||
### Sizing
|
||||
|
||||
Tailwind doesn't provide SVG-specific sizing utilities, but sizing SVGs is a perfect use case for the existing [width](/docs/width) and [height](/docs/height) utilities.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around items-end'])
|
||||
<svg class="h-8 w-8 fill-current text-blue inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z"/>
|
||||
</svg>
|
||||
<svg class="h-12 w-12 fill-current text-blue inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z"/>
|
||||
</svg>
|
||||
<svg class="h-16 w-16 fill-current text-blue inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z"/>
|
||||
</svg>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
## Customizing
|
||||
|
||||
### Fill colors
|
||||
|
||||
Control which fill utilities Tailwind generates by customizing the `svgFill` key in your Tailwind config file:
|
||||
|
||||
@component('_partials.customized-config', ['key' => 'svgFill'])
|
||||
- 'current': 'currentColor',
|
||||
+ 'red': colors['red'],
|
||||
+ 'blue': colors['blue'],
|
||||
+ 'green': colors['green'],
|
||||
@endcomponent
|
||||
|
||||
### Stroke colors
|
||||
|
||||
Control which stroke utilities Tailwind generates by customizing the `svgStroke` key in your Tailwind config file:
|
||||
|
||||
@component('_partials.customized-config', ['key' => 'svgStroke'])
|
||||
- 'current': 'currentColor',
|
||||
+ 'red': colors['red'],
|
||||
+ 'blue': colors['blue'],
|
||||
+ 'green': colors['green'],
|
||||
@endcomponent
|
||||
|
||||
### Responsive, Hover, and Focus Variants
|
||||
|
||||
By default, no responsive, hover, focus, or group-hover variants are generated for fill and stroke utilities.
|
||||
|
||||
You can control which variants are generated for both fill and stroke utilities by modifying the `svgFill` and `svgStroke` properties in the `modules` section of your Tailwind config file.
|
||||
|
||||
For example, this config will generate responsive and hover variants of the fill utilities and focus variants of the stroke utilities:
|
||||
|
||||
```js
|
||||
{
|
||||
// ...
|
||||
modules: {
|
||||
// ...
|
||||
svgFill: ['responsive', 'hover'],
|
||||
svgStroke: ['focus'],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Disabling
|
||||
|
||||
If you aren't using the fill or stroke utilities in your project, you can disable them entirely by setting the `svgFill` and `svgStroke` properties to `false` in the `modules` section of your config file:
|
||||
|
||||
```js
|
||||
{
|
||||
// ...
|
||||
modules: {
|
||||
// ...
|
||||
svgFill: false,
|
||||
svgStroke: false,
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Text Alignment"
|
||||
description: "Utilities for controlling the alignment of text."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.text-left',
|
||||
'text-align: left;',
|
||||
'Align text to the left.',
|
||||
],
|
||||
[
|
||||
'.text-center',
|
||||
'text-align: center;',
|
||||
'Align text to the center.',
|
||||
],
|
||||
[
|
||||
'.text-right',
|
||||
'text-align: right;',
|
||||
'Align text to the right.',
|
||||
],
|
||||
[
|
||||
'.text-justify',
|
||||
'text-align: justify;',
|
||||
'Justify text.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'text alignment',
|
||||
'property' => 'textAlign',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,55 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Text Color"
|
||||
description: "Utilities for controlling the text color of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: true
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => $page->config['colors']->map(function ($value, $name) {
|
||||
$class = ".text-{$name}";
|
||||
$code = "color: {$value};";
|
||||
$color = implode(' ', array_reverse(explode('-', $name)));
|
||||
$description = "Set the text color of an element to {$color}.";
|
||||
return [
|
||||
$class,
|
||||
$code,
|
||||
$description,
|
||||
];
|
||||
})->values()->all()
|
||||
])
|
||||
|
||||
## Hover
|
||||
|
||||
In addition to the standard responsive variations, text colors also come in `hover:` variations that apply the given text color on hover.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'text-center'])
|
||||
<button class="text-blue-dark hover:text-red-dark border-2 border-blue hover:border-red bg-transparent py-2 px-4 font-semibold rounded">
|
||||
Button
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
|
||||
|
||||
```html
|
||||
<button class="... md:text-blue md:hover:text-red ...">Button</button>
|
||||
```
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'text color',
|
||||
'property' => 'textColors',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
'hover',
|
||||
],
|
||||
])
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Text Sizing"
|
||||
description: "Utilities for controlling the text size of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.text-xs',
|
||||
'font-size: .75rem;',
|
||||
'Set the text size to <code>.75rem</code> (<code>12px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-sm',
|
||||
'font-size: .875rem;',
|
||||
'Set the text size to <code>.875rem</code> (<code>14px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-base',
|
||||
'font-size: 1rem;',
|
||||
'Set the text size to <code>1rem</code> (<code>16px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-lg',
|
||||
'font-size: 1.125rem;',
|
||||
'Set the text size to <code>1.125rem</code> (<code>18px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-xl',
|
||||
'font-size: 1.25rem;',
|
||||
'Set the text size to <code>1.25rem</code> (<code>20px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-2xl',
|
||||
'font-size: 1.5rem;',
|
||||
'Set the text size to <code>1.5rem</code> (<code>24px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-3xl',
|
||||
'font-size: 1.875rem;',
|
||||
'Set the text size to <code>1.875rem</code> (<code>30px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-4xl',
|
||||
'font-size: 2.25rem;',
|
||||
'Set the text size to <code>2.25rem</code> (<code>36px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-5xl',
|
||||
'font-size: 3rem;',
|
||||
'Set the text size to <code>3rem</code> (<code>48px</code>).',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'text sizing',
|
||||
'property' => 'textSizes',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,99 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Style & Decoration"
|
||||
description: "Utilities for controlling the style of text."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: true
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.italic',
|
||||
'font-style: italic;',
|
||||
'Italicizes the text within an element.',
|
||||
],
|
||||
[
|
||||
'.roman',
|
||||
'font-style: normal;',
|
||||
'Sets the text to roman (disables italics) within an element.',
|
||||
],
|
||||
[
|
||||
'.uppercase',
|
||||
'text-transform: uppercase;',
|
||||
'Makes all text uppercase within an element.',
|
||||
],
|
||||
[
|
||||
'.lowercase',
|
||||
'text-transform: lowercase;',
|
||||
'Makes all text lowercase within an element.',
|
||||
],
|
||||
[
|
||||
'.capitalize',
|
||||
'text-transform: capitalize;',
|
||||
'Capitalizes the text within an element.',
|
||||
],
|
||||
[
|
||||
'.normal-case',
|
||||
'text-transform: none;',
|
||||
'Disables any text transformations previously applied to an element.',
|
||||
],
|
||||
[
|
||||
'.underline',
|
||||
'text-decoration: underline;',
|
||||
'Underlines the text within an element.',
|
||||
],
|
||||
[
|
||||
'.line-through',
|
||||
'text-decoration: line-through;',
|
||||
'Adds a line through the text within an element.',
|
||||
],
|
||||
[
|
||||
'.no-underline',
|
||||
'text-decoration: none;',
|
||||
'Disables any text decorations previously applied to an element.',
|
||||
],
|
||||
[
|
||||
'.antialiased',
|
||||
"-webkit-font-smoothing: antialiased;\n-moz-osx-font-smoothing: grayscale;",
|
||||
'Set the font smoothing of an element to antialiased.',
|
||||
],
|
||||
[
|
||||
'.subpixel-antialiased',
|
||||
"-webkit-font-smoothing: auto;\n-moz-osx-font-smoothing: auto;",
|
||||
'Set the font smoothing of an element to subpixel antialiasing (the default).',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Hover
|
||||
|
||||
In addition to the standard responsive variations, text style utilties also come in `hover:` variations that apply the given text style on hover.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'text-center'])
|
||||
<a href="#" class="no-underline hover:underline text-blue text-lg">Link</a>
|
||||
@endcomponent
|
||||
|
||||
Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
|
||||
|
||||
```html
|
||||
<a href="#" class="... md:no-underline md:hover:underline ...">Link</a>
|
||||
```
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'text style',
|
||||
'property' => 'textStyle',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
'hover',
|
||||
],
|
||||
])
|
||||
@ -1,39 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "User Select"
|
||||
description: "Utilities for controlling whether the user can select text in an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.select-none',
|
||||
'user-select: none;',
|
||||
"Disable selecting text in an element.",
|
||||
],
|
||||
[
|
||||
'.select-text',
|
||||
'user-select: text;',
|
||||
"Allow selecting text in an element.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'user-select',
|
||||
'property' => 'userSelect',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,59 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Vertical Alignment"
|
||||
description: "Utilities for controlling the vertical alignment of an inline or table-cell box."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.align-baseline',
|
||||
'vertical-align: baseline;',
|
||||
"Align the baseline of an element with the baseline of its parent.",
|
||||
],
|
||||
[
|
||||
'.align-top',
|
||||
'vertical-align: top;',
|
||||
"Align the top of an element and its descendants with the top of the entire line.",
|
||||
],
|
||||
[
|
||||
'.align-middle',
|
||||
'vertical-align: middle;',
|
||||
"Align the middle of an element with the baseline plus half the x-height of the parent.",
|
||||
],
|
||||
[
|
||||
'.align-bottom',
|
||||
'vertical-align: bottom;',
|
||||
"Align the bottom of an element and its descendants with the bottom of the entire line.",
|
||||
],
|
||||
[
|
||||
'.align-text-top',
|
||||
'vertical-align: text-top;',
|
||||
"Align the top of an element with the top of the parent element's font.",
|
||||
],
|
||||
[
|
||||
'.align-text-bottom',
|
||||
'vertical-align: text-bottom;',
|
||||
"Align the bottom of an element with the bottom of the parent element's font.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'vertical alignment',
|
||||
'property' => 'verticalAlign',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,90 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Visibility"
|
||||
description: "Utilities for controlling the visible of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.visible',
|
||||
'visibility: visible;',
|
||||
"Make an element visible.",
|
||||
],
|
||||
[
|
||||
'.invisible',
|
||||
'visibility: hidden;',
|
||||
"Hide an element without affecting the layout of the document.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Visible <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
Use `.visible` to make an element visible. This will typically be used as a reset when using the `.invisible` utility.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center'])
|
||||
<div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
|
||||
@endcomponent
|
||||
|
||||
### Invisible
|
||||
|
||||
Use `.invisible` to hide an element, but still maintain its space.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center'])
|
||||
<div class="invisible bg-grey-light w-24 h-24 rounded-full"></div>
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To apply a visibility utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:invisible` to an element would apply the `invisible` utility at medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex justify-center">
|
||||
<div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex justify-center">
|
||||
<div class="invisible bg-grey-light w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex justify-center">
|
||||
<div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex justify-center">
|
||||
<div class="invisible bg-grey-light w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex justify-center">
|
||||
<div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:visible sm:invisible md:visible lg:invisible xl:visible ..."></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'visibility',
|
||||
'property' => 'visibility',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,175 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "What is Tailwind?"
|
||||
description: null
|
||||
---
|
||||
|
||||
<div class="mt-8 text-2xl text-grey-dark mb-8">
|
||||
<p class="leading-tight">
|
||||
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that **it's not a UI kit.**
|
||||
|
||||
It doesn't have a default theme, and there are no built-in UI components.
|
||||
|
||||
On the flip side, it also has no opinion about how your site should look and doesn't impose design decisions that you have to fight to undo.
|
||||
|
||||
If you're looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you.
|
||||
|
||||
But if you want a huge head start implementing a custom design with its own identity, Tailwind might be just what you're looking for.
|
||||
|
||||
### Utility-first
|
||||
|
||||
Creating a framework for building custom UIs means you can't provide abstractions at the usual level of buttons, forms, cards, navbars, etc.
|
||||
|
||||
Instead, Tailwind provides highly composable, low-level *utility classes* that make it easy to build complex user interfaces **without encouraging any two sites to look the same.**
|
||||
|
||||
Here's an example of a contact card component built with Tailwind without writing a single line of CSS:
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'bg-grey-lighter py-8'])
|
||||
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="sm:flex sm:items-center px-6 py-4">
|
||||
<img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
|
||||
<div class="text-center sm:text-left sm:flex-grow">
|
||||
<div class="mb-4">
|
||||
<p class="text-xl leading-tight">Adam Wathan</p>
|
||||
<p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
|
||||
</div>
|
||||
<div>
|
||||
<button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@slot('code')
|
||||
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="sm:flex sm:items-center px-6 py-4">
|
||||
<img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
|
||||
<div class="text-center sm:text-left sm:flex-grow">
|
||||
<div class="mb-4">
|
||||
<p class="text-xl leading-tight">Adam Wathan</p>
|
||||
<p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
|
||||
</div>
|
||||
<div>
|
||||
<button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Component-friendly
|
||||
|
||||
While you can do a *lot* with just utility classes, sometimes a component class is the right decision.
|
||||
|
||||
Tailwind provides tools for [extracting component classes](/docs/extracting-components) from repeated utility patterns, making it easy to update multiple instances of a component from one place:
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
|
||||
@slot('code')
|
||||
<!-- Using utilities: -->
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<!-- Extracting component classes: -->
|
||||
<button class="btn btn-blue">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.btn {
|
||||
@apply .font-bold .py-2 .px-4 .rounded;
|
||||
}
|
||||
.btn-blue {
|
||||
@apply .bg-blue .text-white;
|
||||
}
|
||||
.btn-blue:hover {
|
||||
@apply .bg-blue-dark;
|
||||
}
|
||||
</style>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Responsive to the core
|
||||
|
||||
Every Tailwind utility also comes in responsive flavors, making it extremely easy to build responsive interfaces without ever leaving your HTML.
|
||||
|
||||
Tailwind uses an intuitive `{screen}:` prefix that makes it easy to notice responsive classes in your markup while keeping the original class name recognizable and intact.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex justify-start bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex justify-center bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex justify-end bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex justify-between bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex justify-around bg-grey-lighter">
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
|
||||
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Designed to be customized
|
||||
|
||||
If it makes sense to be customizable, Tailwind lets you customize it.
|
||||
|
||||
This includes colors, border sizes, font weights, spacing utilities, breakpoints, shadows, and tons more.
|
||||
|
||||
Tailwind is written in [PostCSS](http://postcss.org/) and configured in JavaScript, which means you have the full power of a real programming language at your fingertips.
|
||||
|
||||
Tailwind is more than a CSS framework, *it's an engine for creating design systems.*
|
||||
|
||||
```js
|
||||
const colorPalette = {
|
||||
// ...
|
||||
'grey-lighter': '#f3f7f9',
|
||||
// ...
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
backgroundColors: colorPalette,
|
||||
borderColors: {
|
||||
default: colorPalette['grey-lighter'],
|
||||
...colorPalette,
|
||||
},
|
||||
// ...
|
||||
}
|
||||
```
|
||||
@ -1,69 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Whitespace & Wrapping"
|
||||
description: "Utilities for controlling the whitespace and wrapping of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.whitespace-normal',
|
||||
'white-space: normal;',
|
||||
'Cause text to wrap normally within an element.',
|
||||
],
|
||||
[
|
||||
'.whitespace-no-wrap',
|
||||
'white-space: nowrap;',
|
||||
'Prevent text from wrapping within an element.',
|
||||
],
|
||||
[
|
||||
'.whitespace-pre',
|
||||
'white-space: pre;',
|
||||
'Preserve line returns and spaces within an element.',
|
||||
],
|
||||
[
|
||||
'.whitespace-pre-line',
|
||||
'white-space: pre-line;',
|
||||
'Preserve line returns but not spaces within an element.',
|
||||
],
|
||||
[
|
||||
'.whitespace-pre-wrap',
|
||||
'white-space: pre-wrap;',
|
||||
'Preserve spaces but not line returns within an element.',
|
||||
],
|
||||
[
|
||||
'.break-words',
|
||||
'word-wrap: break-word;',
|
||||
'Add line breaks mid-word if needed.',
|
||||
],
|
||||
[
|
||||
'.break-normal',
|
||||
'word-wrap: normal;',
|
||||
'Only add line breaks at normal word break points.',
|
||||
],
|
||||
[
|
||||
'.truncate',
|
||||
"overflow: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap",
|
||||
'Truncate overflowing text with an ellipsis (<code>…</code>) if needed.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'whitespace & wrapping',
|
||||
'property' => 'whitespace',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,170 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Width"
|
||||
description: "Utilities for setting the width of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'scroll' => false,
|
||||
'rows' => [
|
||||
[
|
||||
'.w-1',
|
||||
'width: 0.25rem;',
|
||||
"Set the element's width to 0.25rem.",
|
||||
],
|
||||
[
|
||||
'.w-2',
|
||||
'width: 0.5rem;',
|
||||
"Set the element's width to 0.5rem.",
|
||||
],
|
||||
[
|
||||
'.w-3',
|
||||
'width: 0.75rem;',
|
||||
"Set the element's width to 0.75rem.",
|
||||
],
|
||||
[
|
||||
'.w-4',
|
||||
'width: 1rem;',
|
||||
"Set the element's width to 1rem.",
|
||||
],
|
||||
[
|
||||
'.w-6',
|
||||
'width: 1.5rem;',
|
||||
"Set the element's width to 1.5rem.",
|
||||
],
|
||||
[
|
||||
'.w-8',
|
||||
'width: 2rem;',
|
||||
"Set the element's width to 2rem.",
|
||||
],
|
||||
[
|
||||
'.w-10',
|
||||
'width: 2.5rem;',
|
||||
"Set the element's width to 2.5rem.",
|
||||
],
|
||||
[
|
||||
'.w-12',
|
||||
'width: 3rem;',
|
||||
"Set the element's width to 3rem.",
|
||||
],
|
||||
[
|
||||
'.w-16',
|
||||
'width: 4rem;',
|
||||
"Set the element's width to 4rem.",
|
||||
],
|
||||
[
|
||||
'.w-24',
|
||||
'width: 6rem;',
|
||||
"Set the element's width to 6rem.",
|
||||
],
|
||||
[
|
||||
'.w-32',
|
||||
'width: 8rem;',
|
||||
"Set the element's width to 8rem.",
|
||||
],
|
||||
[
|
||||
'.w-48',
|
||||
'width: 12rem;',
|
||||
"Set the element's width to 12rem.",
|
||||
],
|
||||
[
|
||||
'.w-64',
|
||||
'width: 16rem;',
|
||||
"Set the element's width to 16rem.",
|
||||
],
|
||||
[
|
||||
'.w-auto',
|
||||
'width: auto;',
|
||||
"Set the element's width to auto.",
|
||||
],
|
||||
[
|
||||
'.w-px',
|
||||
'width: 1px;',
|
||||
"Set the element's width to 1px.",
|
||||
],
|
||||
[
|
||||
'.w-1/2',
|
||||
'width: 50%;',
|
||||
"Set the element's width to 50%.",
|
||||
],
|
||||
[
|
||||
'.w-1/3',
|
||||
'width: 33.33333%;',
|
||||
"Set the element's width to 33.33333%.",
|
||||
],
|
||||
[
|
||||
'.w-2/3',
|
||||
'width: 66.66667%;',
|
||||
"Set the element's width to 66.66667%.",
|
||||
],
|
||||
[
|
||||
'.w-1/4',
|
||||
'width: 25%;',
|
||||
"Set the element's width to 25%.",
|
||||
],
|
||||
[
|
||||
'.w-3/4',
|
||||
'width: 75%;',
|
||||
"Set the element's width to 75%.",
|
||||
],
|
||||
[
|
||||
'.w-1/5',
|
||||
'width: 20%;',
|
||||
"Set the element's width to 20%.",
|
||||
],
|
||||
[
|
||||
'.w-2/5',
|
||||
'width: 40%;',
|
||||
"Set the element's width to 40%.",
|
||||
],
|
||||
[
|
||||
'.w-3/5',
|
||||
'width: 60%;',
|
||||
"Set the element's width to 60%.",
|
||||
],
|
||||
[
|
||||
'.w-4/5',
|
||||
'width: 80%;',
|
||||
"Set the element's width to 80%.",
|
||||
],
|
||||
[
|
||||
'.w-1/6',
|
||||
'width: 16.66667%;',
|
||||
"Set the element's width to 16.66667%.",
|
||||
],
|
||||
[
|
||||
'.w-5/6',
|
||||
'width: 83.33333%;',
|
||||
"Set the element's width to 83.33333%.",
|
||||
],
|
||||
[
|
||||
'.w-full',
|
||||
'width: 100%;',
|
||||
"Set the element's width to 100%.",
|
||||
],
|
||||
[
|
||||
'.w-screen',
|
||||
'width: 100vw;',
|
||||
"Set the element's width to 100vw.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Customizing
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'width',
|
||||
'property' => 'width',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
@ -1,166 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Z-Index"
|
||||
description: "Utilities for controlling the stack order of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.z-0',
|
||||
'z-index: 0;',
|
||||
"Set the z-index of the element to 0.",
|
||||
],
|
||||
[
|
||||
'.z-10',
|
||||
'z-index: 10;',
|
||||
"Set the z-index of the element to 10.",
|
||||
],
|
||||
[
|
||||
'.z-20',
|
||||
'z-index: 20;',
|
||||
"Set the z-index of the element to 20.",
|
||||
],
|
||||
[
|
||||
'.z-30',
|
||||
'z-index: 30;',
|
||||
"Set the z-index of the element to 30.",
|
||||
],
|
||||
[
|
||||
'.z-40',
|
||||
'z-index: 40;',
|
||||
"Set the z-index of the element to 40.",
|
||||
],
|
||||
[
|
||||
'.z-50',
|
||||
'z-index: 50;',
|
||||
"Set the z-index of the element to 50.",
|
||||
],
|
||||
[
|
||||
'.z-auto',
|
||||
'z-index: auto;',
|
||||
"Don't create a new stacking context.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Usage
|
||||
|
||||
Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the `.z-{index}` utilities.
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="relative h-32 text-center">
|
||||
<div class="z-40 absolute w-24 h-24 ml-0 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
|
||||
<div class="z-30 absolute w-24 h-24 ml-2 mt-2 bg-grey flex justify-center items-center">z-30</div>
|
||||
<div class="z-20 absolute w-24 h-24 ml-4 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
|
||||
<div class="z-10 absolute w-24 h-24 ml-6 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
|
||||
<div class="z-0 absolute w-24 h-24 ml-8 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
|
||||
</div>
|
||||
@slot('code')
|
||||
<div class="z-40 ml-0 mt-0 bg-grey-light">z-40</div>
|
||||
<div class="z-30 ml-2 mt-2 bg-grey">z-30</div>
|
||||
<div class="z-20 ml-4 mt-4 bg-grey-dark">z-20</div>
|
||||
<div class="z-10 ml-6 mt-6 bg-grey-darker">z-10</div>
|
||||
<div class="z-0 ml-8 mt-8 bg-grey-darkest">z-0</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control the z-index of an element at a specific breakpoint, add a `{screen}:` prefix to any existing z-index utility. For example, use `md:z-50` to apply the `z-50` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="relative w-full h-32 text-center">
|
||||
<div class="z-0 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
|
||||
<div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
|
||||
<div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
|
||||
<div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
|
||||
<div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
|
||||
<div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="relative h-32 text-center">
|
||||
<div class="z-10 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
|
||||
<div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
|
||||
<div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
|
||||
<div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
|
||||
<div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
|
||||
<div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="relative h-32 text-center">
|
||||
<div class="z-20 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
|
||||
<div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
|
||||
<div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
|
||||
<div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
|
||||
<div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
|
||||
<div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="relative h-32 text-center">
|
||||
<div class="z-30 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
|
||||
<div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
|
||||
<div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
|
||||
<div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
|
||||
<div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
|
||||
<div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="relative h-32 text-center">
|
||||
<div class="z-40 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
|
||||
<div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
|
||||
<div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
|
||||
<div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
|
||||
<div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
|
||||
<div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:z-0 sm:z-10 md:z-20 lg:z-30 xl:z-40 bg-yellow-light">yellow</div>
|
||||
<div class="z-40 ml-4 mt-0 bg-grey-light">z-40</div>
|
||||
<div class="z-30 ml-6 mt-2 bg-grey">z-30</div>
|
||||
<div class="z-20 ml-8 mt-4 bg-grey-dark">z-20</div>
|
||||
<div class="z-10 ml-10 mt-6 bg-grey-darker">z-10</div>
|
||||
<div class="z-0 ml-12 mt-8 bg-grey-darkest">z-0</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
By default Tailwind provides six numeric `z-index` utilities and an `auto` utility. You change, add, or remove these by editing the `zIndex` section of your Tailwind config.
|
||||
|
||||
@component('_partials.customized-config', ['key' => 'zIndex'])
|
||||
'0': 0,
|
||||
- '10': 10,
|
||||
- '20': 20,
|
||||
- '30': 30,
|
||||
- '40': 40,
|
||||
- '50': 50,
|
||||
+ '25': 25,
|
||||
+ '50': 50,
|
||||
+ '75': 75,
|
||||
+ '100': 100,
|
||||
'auto': 'auto',
|
||||
@endcomponent
|
||||
|
||||
@include('_partials.variants-and-disabling', [
|
||||
'utility' => [
|
||||
'name' => 'z-index',
|
||||
'property' => 'zIndex',
|
||||
],
|
||||
'variants' => [
|
||||
'responsive',
|
||||
],
|
||||
])
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user