mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge pull request #138 from mattstauffer/subtitle-yaml
Move page descriptions into yaml
This commit is contained in:
Adam Wathan
GitHub
commit
7ca5a00540
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Adding New Utilities"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Adding New Utilities
|
||||
|
||||
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."
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Backgrounds"
|
||||
title: "Background Color"
|
||||
description: "Utilities for controlling an element's background color."
|
||||
---
|
||||
|
||||
# Background Color
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling an element's background color.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Background Position"
|
||||
description: "Utilities for controlling the position of an element's background image."
|
||||
---
|
||||
|
||||
# Background Position
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the position of an element's background image.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Background Size"
|
||||
description: "Utilities for controlling the background size of an element's background image."
|
||||
---
|
||||
|
||||
# Background Size
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the background size of an element's background image.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Color"
|
||||
description: "Utilities for controlling the color of an element's borders."
|
||||
---
|
||||
|
||||
# Border Color
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the color of an element's borders.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Radius"
|
||||
description: "Utilities for controlling the border radius of an element."
|
||||
---
|
||||
|
||||
# Border Radius
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the border radius of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Style"
|
||||
description: "Utilities for controlling the style of an element's borders."
|
||||
---
|
||||
|
||||
# Border Style
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the style of an element's borders.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Width"
|
||||
description: "Utilities for controlling the width an element's borders."
|
||||
---
|
||||
|
||||
# Border Width
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the width an element's borders.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Colors"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Colors
|
||||
|
||||
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
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Configuration"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Configuration
|
||||
|
||||
Tailwind's defining feature is its ability to be customized. We understand that no two projects are the same, so why should the CSS framework you use be? Tailwind provides developers with a helpful set of front-end conventions, while still leaving room for adjustments where appropriate. This is all done using the Tailwind config file.
|
||||
|
||||
## Introducing the Tailwind config
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Container"
|
||||
description: "A component for fixing an element's width to the current breakpoint."
|
||||
---
|
||||
|
||||
# Container
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
A component for fixing an element's width to the current breakpoint.
|
||||
</div>
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Cursor"
|
||||
description: "Utilities for controlling the cursor style when hovering over an element."
|
||||
---
|
||||
|
||||
# Cursor
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the cursor style when hovering over an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Display"
|
||||
description: "Utilities for controlling the display box type of an element."
|
||||
---
|
||||
|
||||
# Display
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the display box type of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,23 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Alerts"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Alerts
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="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 bunch of quick examples.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
### Traditional
|
||||
|
||||
|
||||
@ -1,23 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Buttons"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Buttons
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="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 bunch of quick examples.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
### Simple
|
||||
|
||||
|
||||
@ -1,23 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Cards"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Cards
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="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>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
## Stacked
|
||||
|
||||
|
||||
@ -1,23 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Forms"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Forms
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="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>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
## Login Form
|
||||
|
||||
|
||||
@ -1,23 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Navigation"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Navigation
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="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>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
## Simple
|
||||
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Extracting Components"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Extracting Components
|
||||
|
||||
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.**
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Align Content - Flexbox"
|
||||
title: "Align Content"
|
||||
description: "Utilities for controlling how lines are positioned in multi-line flex containers."
|
||||
---
|
||||
|
||||
# Align Content
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how lines are positioned in multi-line flex containers.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Align Items - Flexbox"
|
||||
title: "Align Items"
|
||||
description: "Utilities for controlling how flex items are positioned along a container's cross axis."
|
||||
---
|
||||
|
||||
# Align Items
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how flex items are positioned along a container's cross axis.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Align Items - Flexbox"
|
||||
title: "Align Self"
|
||||
description: "Utilities for controlling how an individual flex item is positioned along its container's cross axis."
|
||||
---
|
||||
|
||||
# Align Self
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how an individual flex item is positioned along its container's cross axis.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex Direction - Flexbox"
|
||||
title: "Flex Direction"
|
||||
description: "Utilities for controlling the direction of flex items."
|
||||
---
|
||||
|
||||
# Flex Direction
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the direction of flex items.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex Display – Flexbox"
|
||||
title: "Flex Display"
|
||||
description: "Utilities for creating flex containers."
|
||||
---
|
||||
|
||||
# Flex Display
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for creating flex containers.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex, Grow, & Shrink - Flexbox"
|
||||
title: "Flex, Grow, & Shrink"
|
||||
description: "Utilities for controlling how flex items grow and shrink."
|
||||
---
|
||||
|
||||
# Flex, Grow, & Shrink
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how flex items grow and shrink.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Justify Content - Flexbox"
|
||||
title: "Justify Content"
|
||||
description: "Utilities for controlling flex items are positioned along a container's main axis."
|
||||
---
|
||||
|
||||
# Justify Content
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling flex items are positioned along a container's main axis.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex Wrapping - Flexbox"
|
||||
title: "Flex Wrapping"
|
||||
description: "Utilities for controlling how flex items wrap."
|
||||
---
|
||||
|
||||
# Flex Wrapping
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how flex items wrap.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flexbox"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Flexbox
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Floats"
|
||||
description: "Utilities for controlling the wrapping of content around an element."
|
||||
---
|
||||
|
||||
# Floats
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the wrapping of content around an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Font Weight"
|
||||
description: "Utilities for controlling the font weight of an element."
|
||||
---
|
||||
|
||||
# Font Weight
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the font weight of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Font Families"
|
||||
description: "Utilities for controlling the font family of an element."
|
||||
---
|
||||
|
||||
# Font Families
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the font family of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Forms"
|
||||
description: "Utilities for styling form controls."
|
||||
---
|
||||
|
||||
# Forms
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for styling form controls.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Functions & Directives"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Functions & Directives
|
||||
|
||||
Tailwind exposes a few custom CSS functions and directives that can be used in your actual CSS files.
|
||||
|
||||
### `@@tailwind`
|
||||
|
||||
@ -1,23 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Grid"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Grid
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="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 are some quick and dirty examples.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
Basic grid example:
|
||||
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Height"
|
||||
description: "Utilities for setting the height of an element"
|
||||
---
|
||||
|
||||
# Height
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the height of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Installation"
|
||||
description: "Quick start guide for installing and configuring Tailwind CSS."
|
||||
---
|
||||
|
||||
# Installation
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Quick start guide for installing and configuring Tailwind CSS.
|
||||
</div>
|
||||
|
||||
## 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).
|
||||
@ -29,7 +24,6 @@ Or if you'd like to pull in the base styles separate from the utility classes:
|
||||
<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,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Letter Spacing"
|
||||
description: "Utilities for controlling the tracking (letter spacing) of an element."
|
||||
---
|
||||
|
||||
# Letter Spacing
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the tracking (letter spacing) of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Line Height"
|
||||
description: "Utilities for controlling the leading (line height) of an element."
|
||||
---
|
||||
|
||||
# Line Height
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the leading (line height) of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Lists"
|
||||
description: "Utilities for controlling list styles."
|
||||
---
|
||||
|
||||
# Lists
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling list styles.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Max-Height"
|
||||
description: "Utilities for setting the maximum height of an element"
|
||||
---
|
||||
|
||||
# Max-Height
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the maximum height of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Max-Width"
|
||||
description: "Utilities for setting the maximum width of an element"
|
||||
---
|
||||
|
||||
# Max-Width
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the maximum width of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Min-Height"
|
||||
description: "Utilities for setting the minimum height of an element"
|
||||
---
|
||||
|
||||
# Min-Height
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the minimum height of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Min-Width"
|
||||
description: "Utilities for setting the minimum width of an element"
|
||||
---
|
||||
|
||||
# Min-Width
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the minimum width of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Opacity"
|
||||
description: "Utilities for controlling the opacity of an element."
|
||||
---
|
||||
|
||||
# Opacity
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the opacity of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Overflow"
|
||||
description: "Utilities for controlling how an element handles content that is too large for the container."
|
||||
---
|
||||
|
||||
# Overflow
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how an element handles content that is too large for the container.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Pointer Events"
|
||||
description: "Utilities for controlling whether an element responds to pointer events."
|
||||
---
|
||||
|
||||
# Pointer Events
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling whether an element responds to pointer events.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Positioning"
|
||||
descriptioj: "Utilities for controlling how an element is positioned in the DOM."
|
||||
---
|
||||
|
||||
# Positioning
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how an element is positioned in the DOM.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Resize"
|
||||
description: "Utilities for controlling the how a textarea can be resized."
|
||||
---
|
||||
|
||||
# Resize
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the how a textarea can be resized.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Responsive Design"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Responsive Design
|
||||
|
||||
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.
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Shadows"
|
||||
description: "Utilities for controlling the box shadow of an element."
|
||||
---
|
||||
|
||||
# Shadows
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the box shadow of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Spacing"
|
||||
description: "Utilities for controlling an element's padding and margin."
|
||||
---
|
||||
|
||||
# Spacing
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling an element's padding and margin.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "SVG"
|
||||
description: "Utilities for styling SVG elements."
|
||||
---
|
||||
|
||||
# SVG
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Useful utilities for styling SVG elements.
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
@include('_partials.work-in-progress')
|
||||
</div>
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
Tailwind doesn't provide SVG-specific utilites. Instead, use the generic sizing utilites to control an SVG's width and height, and the text color utilities to control an SVG's fill color.
|
||||
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Text Alignment"
|
||||
description: "Utilities for controlling the alignment of text."
|
||||
---
|
||||
|
||||
# Text Alignment
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the alignment of text.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Text Color"
|
||||
description: "Utilities for controlling the text color of an element."
|
||||
---
|
||||
|
||||
# Text Color
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the text color of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Text Sizing"
|
||||
description: "Utilities for controlling the text size of an element."
|
||||
---
|
||||
|
||||
# Text Sizing
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the text size of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Style & Decoration"
|
||||
description: "Utilities for controlling the style of text."
|
||||
---
|
||||
|
||||
# Text Style & Decoration
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the style of text.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "User Select"
|
||||
description: "Utilities for controlling whether the user can select text in an element."
|
||||
---
|
||||
|
||||
# User Select
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling whether the user can select text in an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Vertical Alignment"
|
||||
description: "Utilities for controlling the vertical alignment of an inline or table-cell box."
|
||||
---
|
||||
|
||||
# Vertical Alignment
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the vertical alignment of an inline or table-cell box.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,15 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Visibility"
|
||||
description: "Utilities for controlling the visible of an element."
|
||||
---
|
||||
|
||||
# Visibility
|
||||
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the visible of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "What is Tailwind?"
|
||||
description: null
|
||||
---
|
||||
|
||||
# What is Tailwind?
|
||||
|
||||
<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.
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Whitespace & Wrapping"
|
||||
description: "Utilities for controlling the whitespace and wrapping of an element."
|
||||
---
|
||||
|
||||
# Whitespace & Wrapping
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the whitespace and wrapping of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Width"
|
||||
description: "Utilities for setting the width of an element"
|
||||
---
|
||||
|
||||
# Width
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the width of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Working Utility-First"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Working Utility-First
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Z-Index"
|
||||
description: "Utilities for controlling the stack order of an element."
|
||||
---
|
||||
|
||||
# Z-Index
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the stack order of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user