- +

+ +

- - - - - -

+ @foreach ($page->navigation as $sectionName => $sectionItems) +

{{ $name }}
+ {{ $name }} +
- + + {{ $title }} + +
+

- - @if($page->description) -

- {{ $page->description }} -

- @endif - - @if($page->features) - @include('_partials.feature-badges', $page->features->all()) - @endif - - @yield('content') -

+ @endforeach +

+ + + + + + +

+ + + + + +

+ @if ($page->description) +

+ {{ $page->description }}

- + @endif + @if ($page->features) + @include('_partials.feature-badges', $page->features->all()) + @endif + @yield('content')

@endsection + +@push('scripts') +@if ($page->production) + + + +@endif +@endpush diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 52db4dae09b3..7dcf026de99b 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -1,46 +1,40 @@ - - - - - - - - - + + + + + + + + + + {{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }} + + @yield('meta') + + + + + @stack('headScripts') + + - @yield('meta') +@yield('body') - - {{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }} - - - - - - - - @yield('body') - @if ($page->production) - - - - + - @endif - + gtag('config', 'UA-109068504-1'); + +@endif + +@stack('scripts') + + diff --git a/docs/source/_partials/class-table.blade.php b/docs/source/_partials/class-table.blade.php new file mode 100644 index 000000000000..17b225d589ac --- /dev/null +++ b/docs/source/_partials/class-table.blade.php @@ -0,0 +1,22 @@ +

+ + + + + + + + + + @foreach ($rows as $row) + + + + + + @endforeach + +

Class	Properties	Description
{{ $row[0] }}	{{ $row[1] }}	{{ $row[2] }}

diff --git a/docs/source/_partials/customized-config.blade.php b/docs/source/_partials/customized-config.blade.php index 494c3336e53d..f69383f2acd7 100644 --- a/docs/source/_partials/customized-config.blade.php +++ b/docs/source/_partials/customized-config.blade.php @@ -1,21 +1,18 @@

{{ '{' }}

{{ ' ' . $key }}{{ ': {' }}

{!! collect(explode("\n", $slot))->map(function ($line) { - if (starts_with($line, '+')) { - return '

+ ' . e(trim(substr($line, 1))) . '

'; - - } - - if (starts_with($line, '-')) { - return '

- ' . e(trim(substr($line, 1))) . '

'; - } - - return '

' . e(trim($line)) . '

'; - })->implode("\n") !!}

{{ ' }' }}

{{ '}' }}

{

// ...

{{ $key }}: {

{!! collect(explode("\n", $slot))->map(function ($line) { + if (starts_with($line, '+')) { + return '

+ ' . e(trim(substr($line, 1))) . '

'; + } + if (starts_with($line, '-')) { + return '

- ' . e(trim(substr($line, 1))) . '

'; + } + return '

' . e(trim($line)) . '

'; + })->implode("\n") !!}

}

diff --git a/docs/source/_partials/feature-badges.blade.php b/docs/source/_partials/feature-badges.blade.php index 69d01a5cfe13..4f2be45b5f24 100644 --- a/docs/source/_partials/feature-badges.blade.php +++ b/docs/source/_partials/feature-badges.blade.php @@ -1,67 +1,67 @@

- @if ($responsive) - - - - - Responsive - - @else - - - - - Responsive - - @endif +

+ @if ($responsive) + + + + + Responsive + + @else + + + + + Responsive + + @endif - @if ($customizable) - - - - - Customizable - - @else - - - - - Customizable - - @endif + @if ($customizable) + + + + + Customizable + + @else + + + + + Customizable + + @endif - @if ($hover) - - - - - Hover - - @else - - - - - Hover - - @endif + @if ($hover) + + + + + Hover + + @else + + + + + Hover + + @endif - @if ($focus) - - - - - Focus - - @else - - - - - Focus - - @endif -

+ @if ($focus) + + + + + Focus + + @else + + + + + Focus + + @endif +

diff --git a/docs/source/_partials/responsive-code-sample.blade.php b/docs/source/_partials/responsive-code-sample.blade.php index 5af92edeb699..88b44c632a47 100644 --- a/docs/source/_partials/responsive-code-sample.blade.php +++ b/docs/source/_partials/responsive-code-sample.blade.php @@ -1,9 +1,9 @@

- -

- + +

diff --git a/docs/source/_partials/work-in-progress-example.blade.md b/docs/source/_partials/work-in-progress-example.blade.php similarity index 100% rename from docs/source/_partials/work-in-progress-example.blade.md rename to docs/source/_partials/work-in-progress-example.blade.php diff --git a/docs/source/docs/adding-new-utilities.blade.md b/docs/source/docs/adding-new-utilities.blade.md index adec78ccd283..577736884cef 100644 --- a/docs/source/docs/adding-new-utilities.blade.md +++ b/docs/source/docs/adding-new-utilities.blade.md @@ -44,7 +44,6 @@ For example, given the following CSS: 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; @@ -140,5 +139,3 @@ html { ... } } } ``` - - diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md index 7092bfed5a45..9fdb51cbc5b6 100644 --- a/docs/source/docs/background-color.blade.md +++ b/docs/source/docs/background-color.blade.md @@ -11,26 +11,19 @@ features: @include('_partials.work-in-progress') -

- - - - - - - - - - @foreach ($page->config['colors'] as $name => $value) - - - - - - @endforeach - -

Class	Properties	Description
.bg-{{ $name }}	color: {{ $value }};	Set the background color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.

+@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 diff --git a/docs/source/docs/background-position.blade.md b/docs/source/docs/background-position.blade.md index 3769d81e41d9..5dd2ae2c5159 100644 --- a/docs/source/docs/background-position.blade.md +++ b/docs/source/docs/background-position.blade.md @@ -11,61 +11,52 @@ features: @include('_partials.work-in-progress') -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+@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.', + ], + ] +]) diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md index 2f21095aebdc..d8c591b93ce7 100644 --- a/docs/source/docs/background-size.blade.md +++ b/docs/source/docs/background-size.blade.md @@ -12,30 +12,30 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.bg-cover	background-position: cover;	Scale the image until it fills the background layer.
.bg-contain	background-position: contain;	Scale the image to the outer edges without cropping or stretching.

+ + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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.

diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md index 91eb3086d06b..a55a18f57423 100644 --- a/docs/source/docs/border-color.blade.md +++ b/docs/source/docs/border-color.blade.md @@ -12,34 +12,33 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - @foreach ($page->config['colors'] as $name => $value) - - - - - - @endforeach - -

Class	Properties	Description
.border-{{ $name }}	color: {{ $value }};	Set the border color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.

+ + + + + + + + + + @foreach ($page->config['colors'] as $name => $value) + + + + + + @endforeach + +

Class	Properties	Description
.border-{{ $name }}	border-color: {{ $value }};	Set the border color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.

- ## 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']) @endcomponent diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md index 5a8ac7a1d355..b18af47d6eec 100644 --- a/docs/source/docs/border-radius.blade.md +++ b/docs/source/docs/border-radius.blade.md @@ -10,84 +10,247 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.rounded	border-radius: .25rem;	Apply a medium border radius to all corners of an element.
.rounded-sm	border-radius: .125rem;	Apply a small 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-none	border-radius: 0;	Remove any border radius from all sides of an element.
.rounded-t	- border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -	Only round the top corners of an element.
.rounded-r	- border-top-left-radius: 0; - border-bottom-left-radius: 0; -	Only round the right side corners of an element.
.rounded-b	- border-top-right-radius: 0; - border-top-left-radius: 0; -	Only round the bottom corners of an element.
.rounded-l	- border-top-right-radius: 0; - border-bottom-right-radius: 0; -	Only round the left side corners of an element.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.rounded-sm	border-radius: .125rem;	Apply a small border radius to all corners of an element.
.rounded-t-sm	border-top-left-radius: .125rem; border-top-right-radius: .125rem;	Apply a small border radius to the top corners of an element.
.rounded-r-sm	border-top-right-radius: .125rem; border-bottom-right-radius: .125rem;	Apply a small border radius to the right corners of an element.
.rounded-b-sm	border-bottom-right-radius: .125rem; border-bottom-left-radius: .125rem;	Apply a small border radius to the bottom corners of an element.
.rounded-l-sm	border-top-left-radius: .125rem; border-bottom-left-radius: .125rem;	Apply a small border radius to the left corners 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	border-radius: .25rem;	Apply a medium border radius to all corners of an element.
.rounded-t	border-top-left-radius: .25rem; border-top-right-radius: .25rem;	Apply a medium border radius to the top corners of an element.
.rounded-r	border-top-right-radius: .25rem; border-bottom-right-radius: .25rem;	Apply a medium border radius to the right corners of an element.
.rounded-b	border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem;	Apply a medium border radius to the bottom corners of an element.
.rounded-l	border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;	Apply a medium border radius to the left corners of an element.
.rounded-tl	border-top-left-radius: .25rem;	Apply a medium border radius to the top left corner of an element.
.rounded-tr	border-top-right-radius: .25rem;	Apply a medium border radius to the top right corner of an element.
.rounded-br	border-bottom-right-radius: .25rem;	Apply a medium border radius to the bottom right corner of an element.
.rounded-bl	border-bottom-left-radius: .25rem;	Apply a medium border radius to the bottom left corner of an element.
.rounded-lg	border-radius: .5rem;	Apply a large border radius to all corners of an element.
.rounded-t-lg	border-top-left-radius: .5rem; border-top-right-radius: .5rem;	Apply a large border radius to the top corners of an element.
.rounded-r-lg	border-top-right-radius: .5rem; border-bottom-right-radius: .5rem;	Apply a large border radius to the right corners of an element.
.rounded-b-lg	border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;	Apply a large border radius to the bottom corners of an element.
.rounded-l-lg	border-top-left-radius: .5rem; border-bottom-left-radius: .5rem;	Apply a large border radius to the left corners 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-full	border-radius: 9999px;	Fully round all corners of an element.
.rounded-t-full	border-top-left-radius: 9999px; border-top-right-radius: 9999px;	Fully round the top corners of an element.
.rounded-r-full	border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;	Fully round the right corners of an element.
.rounded-b-full	border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;	Fully round the bottom corners of an element.
.rounded-l-full	border-top-left-radius: 9999px; border-bottom-left-radius: 9999px;	Fully round the left corners 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-none	border-radius: 0;	Remove any border radius from all corners of an element.
.rounded-t-none	border-top-left-radius: 0; border-top-right-radius: 0;	Remove any border radius from the top corners of an element.
.rounded-r-none	border-top-right-radius: 0; border-bottom-right-radius: 0;	Remove any border radius from the right corners of an element.
.rounded-b-none	border-bottom-right-radius: 0; border-bottom-left-radius: 0;	Remove any border radius from the bottom corners of an element.
.rounded-l-none	border-top-left-radius: 0; border-bottom-left-radius: 0;	Remove any border radius from 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 corners -Use the `.rounded`, `.rounded-sm`, or `.rounded-lg` utilities to apply different border radius sizes to an element. +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'])

.rounded-sm

@@ -128,18 +291,35 @@ This is most commonly used to remove a border radius that was applied at a small ## Rounding sides separately -Combine one of the `.rounded{-size}` utilities with `.rounded-t`, `.rounded-r`, `.rounded-b`, or `.rounded-l` to only round one side of an element. +Use `.rounded-{t|r|b|l}{-size?}` to only round one side an element. @component('_partials.code-sample', ['class' => 'flex justify-around text-sm']) -

.rounded-t

.rounded-r

.rounded-b

.rounded-l

.rounded-t-lg

.rounded-r-lg

.rounded-b-lg

.rounded-l-lg

@slot('code') -

+@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']) +

.rounded-tl-lg

.rounded-tr-lg

.rounded-br-lg

.rounded-bl-lg

+@slot('code') +

@endslot @endcomponent @@ -152,32 +332,32 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code') -

- +

@endslot @endcomponent @@ -186,16 +366,14 @@ For more information about Tailwind's responsive design features, check out the 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. -If a `default` border radius is provided, it will be used for the non-suffixed `.rounded` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.rounded-2` utility. - Note that only the different border radius *sizes* can be customized; the utilities for controlling which side to round (like `.rounded-t`) aren't customizable. @component('_partials.customized-config', ['key' => 'borderRadius']) + 'none': '0', +- 'sm': '.125rem', - default: '.25rem', + default: '4px', -- 'sm': '.125rem', - 'lg': '.5rem', - 'full': '9999px', + 'large': '12px', - 'none': '0', @endcomponent diff --git a/docs/source/docs/border-style.blade.md b/docs/source/docs/border-style.blade.md index a58ba904e243..cbba8a87f8a6 100644 --- a/docs/source/docs/border-style.blade.md +++ b/docs/source/docs/border-style.blade.md @@ -12,30 +12,35 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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.

diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md index e2f7b415d193..19dca9611951 100644 --- a/docs/source/docs/border-width.blade.md +++ b/docs/source/docs/border-width.blade.md @@ -16,24 +16,24 @@ 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.

Class

border

Side (optional)

All (default)

t Top

r Right

b Bottom

l Left

Width (optional)

0 0px

1px (default)

2 2px

4 4px

8 8px

Class

border

Side (optional)

All (default)

t Top

r Right

b Bottom

l Left

Width (optional)

0 0px

1px (default)

2 2px

4 4px

8 8px

diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md index 8f025c820e17..e4ca285b7eb5 100644 --- a/docs/source/docs/colors.blade.md +++ b/docs/source/docs/colors.blade.md @@ -23,7 +23,7 @@ To get you started, we've provided a generous palette of great looking colors th

White {{ strtoupper($page->config['colors']['white']) }} -

Lightest {{ strtoupper($page->config['colors']['grey-lightest']) }} @@ -449,12 +449,8 @@ You'll notice above that the color palette is also assigned to the `colors` key .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`. diff --git a/docs/source/docs/configuration.blade.md b/docs/source/docs/configuration.blade.md index 0b5e67881f88..351999806f5d 100644 --- a/docs/source/docs/configuration.blade.md +++ b/docs/source/docs/configuration.blade.md @@ -17,7 +17,7 @@ Tailwind is actually built on PostCSS and therefore is configured entirely in Ja We recommend creating a `tailwind.js` file in your project's root, but really it can go wherever you want. We've provided a CLI utility to do this easily:

./node_modules/.bin/tailwind init [filename]

Alternatively, you can simply copy the default config below. @@ -28,6 +28,121 @@ Please see the [installation](/docs/installation#4-process-your-css-with-tailwin As you can see below, the default config file is heavily documented. Read through it to get a better understanding of how each section can be customized for your project. +

{!! str_replace('// var defaultConfig', 'var defaultConfig', file_get_contents(dirname(dirname(__DIR__)).'/defaultConfig.stub.js')) !!}

+ +## Options + +In addition to defining your project's design system, the configuration file can also be used for setting a variety of global options. + +These options are available under the top-level `options` key, located at the bottom of the configuration file by default. + +### 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 -{!! file_get_contents(dirname(dirname(__DIR__)).'/defaultConfig.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 +

+ +

+``` + +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; + } +} ``` diff --git a/docs/source/docs/container.blade.md b/docs/source/docs/container.blade.md index a26d99ee242c..9f79aa78b553 100644 --- a/docs/source/docs/container.blade.md +++ b/docs/source/docs/container.blade.md @@ -7,43 +7,43 @@ description: "A component for fixing an element's width to the current breakpoin @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Breakpoint	Properties
.container	None	width: 100%;
	sm (576px)	max-width: 576px;
	md (768px)	max-width: 768px;
	lg (992px)	max-width: 992px;
	xl (1200px)	max-width: 1200px;

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Breakpoint	Properties
.container	None	width: 100%;
	sm (576px)	max-width: 576px;
	md (768px)	max-width: 768px;
	lg (992px)	max-width: 992px;
	xl (1200px)	max-width: 1200px;

Tailwind's `.container` class sets the `max-width` of an element to match the `min-width` of the current breakpoint. @@ -54,7 +54,7 @@ To center a container, use the `.mx-auto` utility: ```html

- +

``` @@ -62,7 +62,6 @@ To add horizontal padding, use the `.px-{size}` utilities: ```html

- +

``` - diff --git a/docs/source/docs/cursor.blade.md b/docs/source/docs/cursor.blade.md index afb2b664d129..0dc255e54a6a 100644 --- a/docs/source/docs/cursor.blade.md +++ b/docs/source/docs/cursor.blade.md @@ -12,35 +12,35 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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.

diff --git a/docs/source/docs/display.blade.md b/docs/source/docs/display.blade.md index 7e569df81120..a802df2c2fd0 100644 --- a/docs/source/docs/display.blade.md +++ b/docs/source/docs/display.blade.md @@ -12,60 +12,60 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.block	display: block;	Set the box type of the element to `block`.
.inline-block	display: inline-block;	Set the box type of the element to `inline-block`.
.inline	display: inline;	Set the box type of the element to `inline`.
.table	display: table;	Set the box type of the element to `table`.
.table-row	display: table-row;	Set the box type of the element to `table-row`.
.table-cell	display: table-cell;	Set the box type of the element to `table-cell`.
.hidden	display: none;	Set the box type of the element to `none`.
.flex	display: flex;	Set the box type of the element to `flex`.
.inline-flex	display: inline-flex;	Set the box type of the element to `inline-flex`.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.block	display: block;	Set the box type of the element to `block`.
.inline-block	display: inline-block;	Set the box type of the element to `inline-block`.
.inline	display: inline;	Set the box type of the element to `inline`.
.table	display: table;	Set the box type of the element to `table`.
.table-row	display: table-row;	Set the box type of the element to `table-row`.
.table-cell	display: table-cell;	Set the box type of the element to `table-cell`.
.hidden	display: none;	Set the box type of the element to `none`.
.flex	display: flex;	Set the box type of the element to `flex`.
.inline-flex	display: inline-flex;	Set the box type of the element to `inline-flex`.

diff --git a/docs/source/docs/examples/alerts.blade.md b/docs/source/docs/examples/alerts.blade.md index 545fed73bb2e..dd47ef44bcd2 100644 --- a/docs/source/docs/examples/alerts.blade.md +++ b/docs/source/docs/examples/alerts.blade.md @@ -31,10 +31,10 @@ description: null @component('_partials.code-sample', ['lang' => 'html'])

Danger

Something not ideal might be happening.

@@ -45,16 +45,14 @@ description: null @component('_partials.code-sample', ['lang' => 'html'])

- Something happened that you should know about. -

Something happened that you should know about.

@endcomponent ### Top Accent Border @component('_partials.code-sample', ['lang' => 'html']) -

diff --git a/docs/source/docs/examples/buttons.blade.md b/docs/source/docs/examples/buttons.blade.md index 1a598860283c..6e7d5a7580b3 100644 --- a/docs/source/docs/examples/buttons.blade.md +++ b/docs/source/docs/examples/buttons.blade.md @@ -10,18 +10,18 @@ description: null @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @slot('code') @@ -42,7 +42,7 @@ description: null @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @endcomponent @@ -50,7 +50,7 @@ description: null @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @endcomponent @@ -58,7 +58,7 @@ description: null @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @endcomponent @@ -66,7 +66,7 @@ description: null @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @endcomponent @@ -74,7 +74,7 @@ description: null @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @endcomponent @@ -82,29 +82,28 @@ description: null @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @endcomponent -### Button Groups +### Groups @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])

- - + +

@endcomponent -### w/Icon +### Icons @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @endcomponent - diff --git a/docs/source/docs/examples/cards.blade.md b/docs/source/docs/examples/cards.blade.md index ed61417e849e..a011f683faf8 100644 --- a/docs/source/docs/examples/cards.blade.md +++ b/docs/source/docs/examples/cards.blade.md @@ -10,44 +10,45 @@ description: null @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])

The Coldest Sunset

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. -

- #photography - #travel - #winter -

The Coldest Sunset

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. +

+ #photography + #travel + #winter +

@endcomponent ## Horizontal @component('_partials.code-sample', ['class' => 'p-10 flex justify-center']) -

+ + Members only +

Can coffee make you a better developer?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

- - Members only -

Can coffee make you a better developer?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

Jonathan Reinink

Aug 18

Jonathan Reinink

Aug 18

@endcomponent diff --git a/docs/source/docs/examples/forms.blade.md b/docs/source/docs/examples/forms.blade.md index 26c119e72918..14598d3be8a0 100644 --- a/docs/source/docs/examples/forms.blade.md +++ b/docs/source/docs/examples/forms.blade.md @@ -10,32 +10,32 @@ description: null @component('_partials.code-sample', ['class' => 'px-3 py-10 bg-grey-lighter flex justify-center'])

- -

+ +

@endcomponent @@ -43,43 +43,43 @@ description: null @component('_partials.code-sample', ['class' => 'flex justify-center p-8'])

- - Full Name - -

- -

+ + Full Name +

- - Password - -

- -

- - - - Send me your newsletter! - - +

+ + Password +

- -

+ + + + Send me your newsletter! + + +

+ +

@endcomponent @@ -87,75 +87,74 @@ description: null @component('_partials.code-sample', ['class' => 'flex justify-center p-8'])

- - First Name - - -

Please fill out this field.

- - Last Name - - -

+ + First Name + + +

Please fill out this field.

- - Password - - -

Make it as long and as crazy as you'd like

+ + Last Name + +

- - City - - -

- - State - -

- -

- - Zip - - +

+ + Password + + +

Make it as long and as crazy as you'd like

+ + City + + +

+ + State + +

+ +

+ + Zip + +

@endcomponent - ## Underline Form @component('_partials.code-sample', ['class' => 'flex justify-center p-8']) @endcomponent diff --git a/docs/source/docs/examples/navigation.blade.md b/docs/source/docs/examples/navigation.blade.md index 6226a01a6390..ab81c1aa5ed8 100644 --- a/docs/source/docs/examples/navigation.blade.md +++ b/docs/source/docs/examples/navigation.blade.md @@ -10,18 +10,18 @@ description: null @component('_partials.code-sample')

- Active -
- Link -
- Link -
- Disabled -
+ Active +
+ Link +
+ Link +
+ Disabled +

@endcomponent @@ -29,31 +29,31 @@ description: null @component('_partials.code-sample')

- - Tailwind CSS +

+ + Tailwind CSS +

+ +

+ + Docs + + + Examples + + + Blog +

- -

- - Docs - - - Examples - - - Blog - -

- Download -

+ Download

@endcomponent @@ -61,18 +61,18 @@ description: null @component('_partials.code-sample')

- Active -
- Tab -
- Tab -
- Tab -
+ Active +
+ Tab +
+ Tab +
+ Tab +

@endcomponent @@ -80,15 +80,15 @@ description: null @component('_partials.code-sample')

- Active Pill -
- Pill -
- Disabled Pill -
+ Active Pill +
+ Pill +
+ Disabled Pill +

@endcomponent @@ -96,15 +96,15 @@ description: null @component('_partials.code-sample')

@endcomponent @@ -112,14 +112,14 @@ description: null @component('_partials.code-sample')

- Active Pill -
- Pill -
- Disabled Pill -
+ Active Pill +
+ Pill +
+ Disabled Pill +

@endcomponent diff --git a/docs/source/docs/extracting-components.blade.md b/docs/source/docs/extracting-components.blade.md index a52a15cd9032..ce261fafdec8 100644 --- a/docs/source/docs/extracting-components.blade.md +++ b/docs/source/docs/extracting-components.blade.md @@ -26,7 +26,6 @@ If this is the only button in your project, creating a custom component class fo 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. @@ -58,7 +57,6 @@ Here's what a `.btn-blue` class might look like using `@apply` to compose it fro 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: @@ -165,7 +163,6 @@ It also allows you to add new one-off button styles without being forced to crea @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. @@ -199,4 +196,3 @@ If you're using a preprocessor like Less or Sass, consider keeping your componen @@tailwind utilities; ``` - diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md index 3a06eb0d7f53..1970ac2c015a 100644 --- a/docs/source/docs/flexbox-align-content.blade.md +++ b/docs/source/docs/flexbox-align-content.blade.md @@ -10,47 +10,47 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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 Default @@ -59,21 +59,21 @@ Use `.content-start` to pack lines in a flex container against the start of the @component('_partials.code-sample')

@endcomponent @@ -83,21 +83,21 @@ Use `.content-center` to pack lines in a flex container in the center of the cro @component('_partials.code-sample')

@endcomponent @@ -107,21 +107,21 @@ Use `.content-end` to pack lines in a flex container against the end of the cros @component('_partials.code-sample')

@endcomponent @@ -131,21 +131,21 @@ Use `.content-between` to distribute lines in a flex container such that there i @component('_partials.code-sample')

@endcomponent @@ -155,25 +155,24 @@ Use `.content-around` to distribute lines in a flex container such that there is @component('_partials.code-sample')

@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. @@ -183,102 +182,102 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

- +

@endslot @endcomponent diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md index c461464545d5..f8cb64394f1d 100644 --- a/docs/source/docs/flexbox-align-items.blade.md +++ b/docs/source/docs/flexbox-align-items.blade.md @@ -10,47 +10,47 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.items-stretch	align-items: flex-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: space-between;	Align the baselines of each item.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.items-stretch	align-items: flex-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 Default @@ -59,9 +59,9 @@ Use `.items-stretch` to stretch items to fill the flex container's cross axis: @component('_partials.code-sample')

@endcomponent @@ -71,9 +71,9 @@ Use `.items-start` to align items to the start of the flex container's cross axi @component('_partials.code-sample')

@endcomponent @@ -83,9 +83,9 @@ Use `.items-center` to align items along the center of the flex container's cros @component('_partials.code-sample')

@endcomponent @@ -95,22 +95,21 @@ Use `.items-end` to align items to the end of the flex container's cross axis: @component('_partials.code-sample')

@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')

@endcomponent @@ -123,42 +122,42 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

- +

@endslot @endcomponent diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md index 0a1a96c75e55..7add938550b1 100644 --- a/docs/source/docs/flexbox-align-self.blade.md +++ b/docs/source/docs/flexbox-align-self.blade.md @@ -10,42 +10,42 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.self-auto	align-self: auto;	Align item based on the container's `align-items` 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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.self-auto	align-self: auto;	Align item based on the container's `align-items` 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 Default @@ -54,9 +54,9 @@ Use `.self-auto` to align an item based on the value of the flex container's `al @component('_partials.code-sample')

@endcomponent @@ -66,9 +66,9 @@ Use `.self-start` to align an item to the start of the flex container's cross ax @component('_partials.code-sample')

@endcomponent @@ -78,9 +78,9 @@ Use `.self-center` to align an item along the center of the flex container's cro @component('_partials.code-sample')

@endcomponent @@ -90,9 +90,9 @@ Use `.self-end` to align an item to the end of the flex container's cross axis, @component('_partials.code-sample')

@endcomponent @@ -102,9 +102,9 @@ Use `.self-stretch` to stretch an item to fill the flex container's cross axis, @component('_partials.code-sample')

@endcomponent @@ -117,44 +117,44 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

- -

- + +

@endslot @endcomponent diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md index 66338080aced..2df29a466b0e 100644 --- a/docs/source/docs/flexbox-direction.blade.md +++ b/docs/source/docs/flexbox-direction.blade.md @@ -10,37 +10,37 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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 Default @@ -49,9 +49,9 @@ Use `.flex-row` to position flex items horizontally in the same direction as tex @component('_partials.code-sample')

@endcomponent @@ -61,9 +61,9 @@ Use `.flex-row-reverse` to position flex items horizontally in the opposite dire @component('_partials.code-sample')

@endcomponent @@ -73,9 +73,9 @@ Use `.flex-col` to position flex items vertically: @component('_partials.code-sample')

@endcomponent @@ -85,9 +85,9 @@ Use `.flex-col-reverse` to position flex items vertically in the opposite direct @component('_partials.code-sample')

@endcomponent @@ -100,42 +100,42 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

- +

@endslot @endcomponent diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md index 7a3ac7931444..2e195f42d13d 100644 --- a/docs/source/docs/flexbox-display.blade.md +++ b/docs/source/docs/flexbox-display.blade.md @@ -10,27 +10,27 @@ features: ---

- - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.flex	display: flex;	Create a block-level flex container.
.inline-flex	display: inline-flex;	Create an inline flex container.

+ + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.flex	display: flex;	Create a block-level flex container.
.inline-flex	display: inline-flex;	Create an inline flex container.

## Flex @@ -39,9 +39,9 @@ Use `.flex` to create a block-level flex container: @component('_partials.code-sample')

@endcomponent @@ -51,9 +51,9 @@ Use `.inline-flex` to create an inline flex container: @component('_partials.code-sample')

@endcomponent @@ -66,42 +66,42 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg') @endslot @slot('xl')

@endslot @slot('code')

- +

@endslot @endcomponent diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md index d8422ca127c7..27bb64202cee 100644 --- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md +++ b/docs/source/docs/flexbox-flex-grow-shrink.blade.md @@ -1,6 +1,6 @@ --- extends: _layouts.documentation -title: "Flex, Grow, & Shrink" +title: "Flex, Grow, & Shrink" description: "Utilities for controlling how flex items grow and shrink." features: responsive: true @@ -10,57 +10,57 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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 Default @@ -70,47 +70,47 @@ Use `.flex-initial` to allow a flex item to shrink but not grow, taking into acc @component('_partials.code-sample')

Items don't grow when there's extra space

- Short -

- Medium length -

+ Short +

+ Medium length +

Items shrink if possible when needed

- Short -

- Medium length -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem -

+ Short +

+ Medium length +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem +

@slot('code')

- Short -

- Medium length -

+ Short +

+ Medium length +

- Short -

- Medium length -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem -

+ Short +

+ Medium length +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem +

@endslot @endcomponent @@ -122,40 +122,40 @@ Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring its in @component('_partials.code-sample')

Default behavior

- Short -

- Medium length -

- Significantly larger amount of content -

+ Short +

+ Medium length +

+ Significantly larger amount of content +

With .flex-1

- Short -

- Medium length -

- Significantly larger amount of content -

+ Short +

+ Medium length +

+ Significantly larger amount of content +

@slot('code')

- Short -

- Medium length -

- Significantly larger amount of content -

+ Short +

+ Medium length +

+ Significantly larger amount of content +

@endslot @endcomponent @@ -167,40 +167,40 @@ Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it @component('_partials.code-sample')

Default behavior

- Short -

- Medium length -

- Significantly larger amount of content -

+ Short +

+ Medium length +

+ Significantly larger amount of content +

With .flex-auto

- Short -

- Medium length -

- Significantly larger amount of content -

+ Short +

+ Medium length +

+ Significantly larger amount of content +

@slot('code')

- Short -

- Medium length -

- Significantly larger amount of content -

+ Short +

+ Medium length +

+ Significantly larger amount of content +

@endslot @endcomponent @@ -211,15 +211,15 @@ Use `.flex-none` to prevent a flex item from growing or shrinking: @component('_partials.code-sample')

- Item that can grow or shrink if needed -

- Item that cannot grow or shrink -

- Item that can grow or shrink if needed -

+ Item that can grow or shrink if needed +

+ Item that cannot grow or shrink +

+ Item that can grow or shrink if needed +

@endcomponent @@ -229,15 +229,15 @@ Use `.flex-grow` to allow a flex item to grow to fill any available space: @component('_partials.code-sample')

- Content that cannot flex -

- Item that will grow -

- Content that cannot flex -

+ Content that cannot flex +

+ Item that will grow +

+ Content that cannot flex +

@endcomponent @@ -247,15 +247,15 @@ Use `.flex-no-grow` to prevent a flex item from growing: @component('_partials.code-sample')

- Will grow -

- Will not grow -

- Will grow -

+ Will grow +

+ Will not grow +

+ Will grow +

@endcomponent @@ -265,15 +265,15 @@ Use `.flex-shrink` to allow a flex item to shrink if needed: @component('_partials.code-sample')

- Longer content that cannot flex -

- Item that will shrink even if it causes the content to wrap -

- Longer content that cannot flex -

+ Longer content that cannot flex +

+ Item that will shrink even if it causes the content to wrap +

+ Longer content that cannot flex +

@endcomponent @@ -283,15 +283,15 @@ Use `.flex-no-shrink` to prevent a flex item from shrinking: @component('_partials.code-sample')

- Item that can shrink if needed -

- Item that cannot shrink below its initial size -

- Item that can shrink if needed -

+ Item that can shrink if needed +

+ Item that cannot shrink below its initial size +

+ Item that can shrink if needed +

@endcomponent @@ -304,76 +304,76 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

- Item that can grow or shrink if needed -

- Responsive flex item -

- Item that can grow or shrink if needed -

+ Item that can grow or shrink if needed +

+ Responsive flex item +

+ Item that can grow or shrink if needed +

@endslot @slot('sm')

- Item that can grow or shrink if needed -

- Responsive flex item -

- Item that can grow or shrink if needed -

+ Item that can grow or shrink if needed +

+ Responsive flex item +

+ Item that can grow or shrink if needed +

@endslot @slot('md')

- Item that can grow or shrink if needed -

- Responsive flex item -

- Item that can grow or shrink if needed -

+ Item that can grow or shrink if needed +

+ Responsive flex item +

+ Item that can grow or shrink if needed +

@endslot @slot('lg')

- Item that can grow or shrink if needed -

- Responsive flex item -

- Item that can grow or shrink if needed -

+ Item that can grow or shrink if needed +

+ Responsive flex item +

+ Item that can grow or shrink if needed +

@endslot @slot('xl')

- Item that can grow or shrink if needed -

- Responsive flex item -

- Item that can grow or shrink if needed -

+ Item that can grow or shrink if needed +

+ Responsive flex item +

+ Item that can grow or shrink if needed +

@endslot @slot('code')

- -

- Item that cannot grow or shrink -

- + +

+ Responsive flex item +

@endslot @endcomponent diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md index e95361ad0bd6..d658e6b76d37 100644 --- a/docs/source/docs/flexbox-justify-content.blade.md +++ b/docs/source/docs/flexbox-justify-content.blade.md @@ -10,47 +10,47 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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 Default @@ -59,9 +59,9 @@ Use `.justify-start` to justify items against the start of the flex container's @component('_partials.code-sample')

@endcomponent @@ -71,9 +71,9 @@ Use `.justify-center` to justify items along the center of the flex container's @component('_partials.code-sample')

@endcomponent @@ -83,22 +83,21 @@ Use `.justify-end` to justify items against the end of the flex container's main @component('_partials.code-sample')

@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')

@endcomponent @@ -108,9 +107,9 @@ Use `.justify-around` to justify items along the flex container's main axis such @component('_partials.code-sample')

@endcomponent @@ -123,42 +122,42 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

- +

@endslot @endcomponent diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md index da2c3e773526..774c8b61ba2d 100644 --- a/docs/source/docs/flexbox-wrapping.blade.md +++ b/docs/source/docs/flexbox-wrapping.blade.md @@ -10,32 +10,32 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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 Default @@ -44,15 +44,15 @@ Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible item @component('_partials.code-sample')

@endcomponent @@ -62,15 +62,15 @@ Use `.flex-wrap` to allow flex items to wrap: @component('_partials.code-sample')

@endcomponent @@ -80,15 +80,15 @@ Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: @component('_partials.code-sample')

@endcomponent @@ -101,72 +101,72 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

- +

@endslot @endcomponent diff --git a/docs/source/docs/flexbox.blade.md b/docs/source/docs/flexbox.blade.md deleted file mode 100644 index 17344a90a80b..000000000000 --- a/docs/source/docs/flexbox.blade.md +++ /dev/null @@ -1,697 +0,0 @@ ---- -extends: _layouts.documentation -title: "Flexbox" -description: null ---- - -

- Usage - Responsive - Customizing -

- -Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. - -## Display - -### Flex - -Use `.flex` to create a block-level flex container: - -@component('_partials.code-sample') -

-@endcomponent - -### Inline flex - -Use `.inline-flex` to create an inline flex container: - -@component('_partials.code-sample') -

-@endcomponent - ---- - -## Flex Direction - -### Row - -Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*: - -@component('_partials.code-sample') -

-@endcomponent - -### Row reversed - -Use `.flex-row-reverse` to position flex items horizontally in the opposite direction: - -@component('_partials.code-sample') -

-@endcomponent - -### Column - -Use `.flex-col` to position flex items vertically: - -@component('_partials.code-sample') -

-@endcomponent - -### Column reversed - -Use `.flex-col-reverse` to position flex items vertically in the opposite direction: - -@component('_partials.code-sample') -

-@endcomponent - ---- - -## Flex Wrapping - -### No wrapping - -Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*: - -@component('_partials.code-sample') -

-@endcomponent - -### Wrap normally - -Use `.flex-wrap` to allow flex items to wrap: - -@component('_partials.code-sample') -

-@endcomponent - -### Wrap reversed - -Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: - -@component('_partials.code-sample') -

-@endcomponent - ---- - -## Justify Content - -### Start - -Use `.justify-start` to justify items against the start of the flex container's main axis *(this is also the default behavior)*: - -@component('_partials.code-sample') -

-@endcomponent - -### End - -Use `.justify-end` to justify items against the end of the flex container's main axis: - -@component('_partials.code-sample') -

-@endcomponent - -### Center - -Use `.justify-center` to justify items along the center of the flex container's main axis: - -@component('_partials.code-sample') -

-@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') -

-@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') -

-@endcomponent - ---- - -## Align Items - -### Stretch - -Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*: - -@component('_partials.code-sample') -

-@endcomponent - -### Start - -Use `.items-start` to align items to the start of the flex container's cross axis: - -@component('_partials.code-sample') -

-@endcomponent - -### End - -Use `.items-end` to align items to the end of the flex container's cross axis: - -@component('_partials.code-sample') -

-@endcomponent - -### Center - -Use `.items-center` to align items along the center of the flex container's cross axis: - -@component('_partials.code-sample') -

-@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') -

-@endcomponent - ---- - -## Align Content - -### Start - -Use `.content-start` to pack lines in a flex container against the start of the main axis *(this is also the default behavior)*: - -@component('_partials.code-sample') -

-@endcomponent - -### Center - -Use `.content-center` to pack lines in a flex container in the center of the main axis: - -@component('_partials.code-sample') -

-@endcomponent - -### End - -Use `.content-end` to pack lines in a flex container against the end of the main axis: - -@component('_partials.code-sample') -

-@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') -

-@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') -

-@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') -

Default behavior

- Short -

- Medium length -

- Significantly larger amount of content -

With .flex-1

- Short -

- Medium length -

- Significantly larger amount of content -

- -@slot('code') -

- Short -

- Medium length -

- Significantly larger amount of content -

-@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') -

Default behavior

- Short -

- Medium length -

- Significantly larger amount of content -

With .flex-auto

- Short -

- Medium length -

- Significantly larger amount of content -

- -@slot('code') -

- Short -

- Medium length -

- Significantly larger amount of content -

-@endslot -@endcomponent - -### None - -Use `.flex-none` to prevent a flex item from growing or shrinking: - -@component('_partials.code-sample') -

- Item that can grow or shrink if needed -

- Item that cannot grow or shrink -

- Item that can grow or shrink if needed -

-@endcomponent - -### Initial - -Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size *(this is also the default behavior)*: - -@component('_partials.code-sample') -

Items don't grow when there's extra space

- Short -

- Medium length -

- -

Items shrink if possible when needed

- Short -

- Medium length -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem -

- -@slot('code') -

- Short -

- Medium length -

- -

- Short -

- Medium length -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem -

-@endslot -@endcomponent - ---- - -## Flex Grow - -### Grow - -Use `.flex-grow` to allow a flex item to grow to fill any available space: - -@component('_partials.code-sample') -

- Content that cannot flex -

- Item that will grow -

- Content that cannot flex -

-@endcomponent - -### Don't grow - -Use `.flex-no-grow` to prevent a flex item from growing: - -@component('_partials.code-sample') -

- Will grow -

- Will not grow -

- Will grow -

-@endcomponent - ---- - -## Flex shrink - -### Shrink - -Use `.flex-shrink` to allow a flex item to shrink if needed: - -@component('_partials.code-sample') -

- Longer content that cannot flex -

- Item that will shrink even if it causes the content to wrap -

- Longer content that cannot flex -

-@endcomponent - -### Don't shrink - -Use `.flex-no-shrink` to prevent a flex item from shrinking: - -@component('_partials.code-sample') -

- Item that can shrink if needed -

- Item that cannot shrink below its initial size -

- Item that can shrink if needed -

-@endcomponent - ---- - -## Align Self - -### 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') -

-@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') -

-@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') -

-@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') -

-@endcomponent diff --git a/docs/source/docs/floats.blade.md b/docs/source/docs/floats.blade.md index 1f1e39532c0c..4ede9a38329e 100644 --- a/docs/source/docs/floats.blade.md +++ b/docs/source/docs/floats.blade.md @@ -12,41 +12,41 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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 { - content: ""; - display: table; - clear: both; - } -	Clear any floats within an element.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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 { + content: ""; + display: table; + clear: both; + } +	Clear any floats within an element.

diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md index f1d775d7f7de..ad6a6cc219cb 100644 --- a/docs/source/docs/font-weight.blade.md +++ b/docs/source/docs/font-weight.blade.md @@ -12,60 +12,60 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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.

diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md index cd5eb7e25329..404405a57dad 100644 --- a/docs/source/docs/fonts.blade.md +++ b/docs/source/docs/fonts.blade.md @@ -12,35 +12,35 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.font-sans	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;	Set the font family to the sans font stack.
.font-serif	font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;	Set the font family to the serif font stack.
.font-mono	font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;	Set the font family to the mono font stack.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.font-sans	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;	Set the font family to the sans font stack.
.font-serif	font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;	Set the font family to the serif font stack.
.font-mono	font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;	Set the font family to the mono font stack.

diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md index f5907dd3b732..dd3911541b46 100644 --- a/docs/source/docs/forms.blade.md +++ b/docs/source/docs/forms.blade.md @@ -12,27 +12,27 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.appearance-none	appearance: none;	Remove any special styling applied to an element by the browser.

+ + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.appearance-none	appearance: none;	Remove any special styling applied to an element by the browser.

### Custom Select @@ -41,13 +41,13 @@ Form controls are great candidates for component classes, but just for fun, here @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])

- -

+ +

@endcomponent diff --git a/docs/source/docs/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md index 4efd483d30b3..c8c619d9ddba 100644 --- a/docs/source/docs/functions-and-directives.blade.md +++ b/docs/source/docs/functions-and-directives.blade.md @@ -8,7 +8,7 @@ Tailwind exposes a few custom CSS functions and directives that can be used in y ### `@@tailwind` -Use the `@@tailwind` directive to insert Tailwind's `preflight` and `utilities` styles into your CSS. Here's a full example of how you might do this: +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 /** @@ -25,6 +25,15 @@ Use the `@@tailwind` directive to insert Tailwind's `preflight` and `utilities` * 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` @@ -162,4 +171,3 @@ Use the `config()` function to access your Tailwind config values using dot nota color: #a61611; } ``` - diff --git a/docs/source/docs/grid.blade.md b/docs/source/docs/grid.blade.md index fbbd93465866..8c4a6012d3bd 100644 --- a/docs/source/docs/grid.blade.md +++ b/docs/source/docs/grid.blade.md @@ -9,240 +9,236 @@ description: null Basic grid example:

.flex.flex-wrap

- .md:w-1/3 -

.flex.flex-wrap

+ .md:w-1/3 +

Columns don't need to fill a row:

.flex.flex-wrap

- .md:w-1/4 -

.flex.flex-wrap

+ .md:w-1/4 +

- Columns can be different widths:

.flex.flex-wrap

- .md:w-1/4 -

- .md:w-1/2 -

- .md:w-1/4 -

.flex.flex-wrap

+ .md:w-1/4 +

+ .md:w-1/2 +

+ .md:w-1/4 +

- Rows can overflow and wrap:

.flex.flex-wrap

- .md:w-1/3 -

.flex.flex-wrap

+ .md:w-1/3 +

Columns can have gutters:

.flex.flex-wrap.-mx-4

.w-full

.md:w-1/3

.px-4

.w-full

.md:w-1/3

.px-4

.w-full

.md:w-1/3

.px-4

.flex.flex-wrap.-mx-4

.w-full

.md:w-1/3

.px-4

.w-full

.md:w-1/3

.px-4

.w-full

.md:w-1/3

.px-4

- Column widths can be automatic:

.flex.flex-wrap

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

.flex.flex-wrap

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

Fixed width columns are still respected even if a smaller screen has auto column widths:

.flex.flex-wrap

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

.flex.flex-wrap

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

- Use margin auto utilities to accomplish offsets:

.flex.flex-wrap

.md:w-1/3

.md:ml-auto

.md:w-1/6

.md:mr-auto

.flex.flex-wrap

.md:w-1/3

.md:ml-auto

.md:w-1/6

.md:mr-auto

diff --git a/docs/source/docs/height.blade.md b/docs/source/docs/height.blade.md index 37775f60e456..3d6d9ef99ae4 100644 --- a/docs/source/docs/height.blade.md +++ b/docs/source/docs/height.blade.md @@ -12,105 +12,105 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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`.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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`.

diff --git a/docs/source/docs/installation.blade.md b/docs/source/docs/installation.blade.md index 82a607328ea9..758c78b50be2 100644 --- a/docs/source/docs/installation.blade.md +++ b/docs/source/docs/installation.blade.md @@ -33,10 +33,10 @@ For most projects (and to take advantage of Tailwind's customization features), Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.

# Using npm

npm install tailwindcss --save-dev

# Using Yarn

yarn add tailwindcss --dev

# Using npm

npm install tailwindcss --save-dev

# Using Yarn

yarn add tailwindcss --dev

### 2. Create a Tailwind config file @@ -62,6 +62,12 @@ To avoid specificity issues, we highly recommend structuring your main styleshee * * 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; @@ -75,7 +81,7 @@ To avoid specificity issues, we highly recommend structuring your main styleshee * .btn { ... } * .form-input { ... } * - * Or if using a preprocessor: + * Or if using a preprocessor or `postcss-import`: * * @@import "components/buttons"; * @@import "components/forms"; @@ -84,6 +90,12 @@ To avoid specificity issues, we highly recommend structuring your main styleshee /** * 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; @@ -96,7 +108,7 @@ To avoid specificity issues, we highly recommend structuring your main styleshee * .bg-pattern-graph-paper { ... } * .skew-45 { ... } * - * Or if using a preprocessor.. + * Or if using a preprocessor or `postcss-import`: * * @@import "utilities/background-patterns"; * @@import "utilities/skew-transforms"; @@ -110,7 +122,7 @@ To avoid specificity issues, we highly recommend structuring your main styleshee For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:

./node_modules/.bin/tailwind build styles.css [-c ./config.js] [-o ./output.css]

./node_modules/.bin/tailwind build styles.css [-c ./tailwind.js] [-o ./output.css]

#### Using Tailwind with PostCSS @@ -143,19 +155,19 @@ Add `tailwindcss` to the list of plugins you pass to [gulp-postcss](https://gith ```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/')); + 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/')); }); ``` diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md index 9fc57eb58d43..7103bce87153 100644 --- a/docs/source/docs/letter-spacing.blade.md +++ b/docs/source/docs/letter-spacing.blade.md @@ -12,30 +12,30 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.tracking-tight	letter-spacing: -0.05em;	Set the letter spacing of an element to `-0.05em`.
.tracking-normal	letter-spacing: 0;	Set the letter spacing of an element to `0`.
.tracking-wide	letter-spacing: 0.05em;	Set the letter spacing of an element to `0.05em`.

+ + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.tracking-tight	letter-spacing: -0.05em;	Set the letter spacing of an element to `-0.05em`.
.tracking-normal	letter-spacing: 0;	Set the letter spacing of an element to `0`.
.tracking-wide	letter-spacing: 0.05em;	Set the letter spacing of an element to `0.05em`.

diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md index e48300032b36..408b1135130e 100644 --- a/docs/source/docs/line-height.blade.md +++ b/docs/source/docs/line-height.blade.md @@ -12,35 +12,35 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.leading-none	line-height: 1;	Set the line height of an element to `1`.
.leading-tight	line-height: 1.25;	Set the line height of an element to `1.25`.
.leading-normal	line-height: 1.5;	Set the line height of an element to `1.5`.
.leading-loose	line-height: 2;	Set the line height of an element to `2`.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.leading-none	line-height: 1;	Set the line height of an element to `1`.
.leading-tight	line-height: 1.25;	Set the line height of an element to `1.25`.
.leading-normal	line-height: 1.5;	Set the line height of an element to `1.5`.
.leading-loose	line-height: 2;	Set the line height of an element to `2`.

diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md index 4490e2b15052..258ab6f804b9 100644 --- a/docs/source/docs/lists.blade.md +++ b/docs/source/docs/lists.blade.md @@ -12,29 +12,29 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.list-reset	- list-style: none; - margin: 0; - padding: 0; -	Disable default browser styling for list elements.

+ + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.list-reset	+ list-style: none; + margin: 0; + padding: 0; +	Disable default browser styling for list elements.

diff --git a/docs/source/docs/max-height.blade.md b/docs/source/docs/max-height.blade.md index 27ba0ad3a441..887e62ed0a93 100644 --- a/docs/source/docs/max-height.blade.md +++ b/docs/source/docs/max-height.blade.md @@ -12,32 +12,30 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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`.

+ + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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`.

- - diff --git a/docs/source/docs/max-width.blade.md b/docs/source/docs/max-width.blade.md index d3c975fa045c..d7a3c5e0585a 100644 --- a/docs/source/docs/max-width.blade.md +++ b/docs/source/docs/max-width.blade.md @@ -12,18 +12,18 @@ features: @include('_partials.work-in-progress')

- +

- - - - - + + + + + @@ -79,4 +79,3 @@ features:

Class	Properties	Description
Class	Properties	Description

- diff --git a/docs/source/docs/min-height.blade.md b/docs/source/docs/min-height.blade.md index e0864fc18efa..247162589d96 100644 --- a/docs/source/docs/min-height.blade.md +++ b/docs/source/docs/min-height.blade.md @@ -12,37 +12,35 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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`.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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`.

- - diff --git a/docs/source/docs/min-width.blade.md b/docs/source/docs/min-width.blade.md index 75db9924e398..b1055d746640 100644 --- a/docs/source/docs/min-width.blade.md +++ b/docs/source/docs/min-width.blade.md @@ -12,31 +12,30 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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%`.

+ + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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%`.

- diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md index 23b08bca1c92..780831ccce77 100644 --- a/docs/source/docs/opacity.blade.md +++ b/docs/source/docs/opacity.blade.md @@ -10,51 +10,51 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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%.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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')

-@foreach ($page->config['opacity']->reverse() as $name => $value) + @foreach ($page->config['opacity']->reverse() as $name => $value)

.opacity-{{ $name }}

-@endforeach + @endforeach

@slot('code') @foreach ($page->config['opacity']->reverse() as $name => $value) @@ -72,32 +72,32 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

- +

@endslot @endcomponent diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md index 2fa5936f20d6..58506d338226 100644 --- a/docs/source/docs/overflow.blade.md +++ b/docs/source/docs/overflow.blade.md @@ -10,57 +10,57 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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 Default @@ -69,9 +69,9 @@ Use `.overflow-visible` to prevent content within an element from being clipped. @component('_partials.code-sample')

+ 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. +

@slot('code')

Lorem ipsum dolor sit amet...

@@ -84,7 +84,7 @@ Use `.overflow-auto` to add scrollbars to an element in the event that its conte @component('_partials.code-sample')

- 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. + 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.

@slot('code')

Lorem ipsum dolor sit amet...

@@ -97,7 +97,7 @@ Use `.overflow-hidden` to clip any content within an element that overflows the @component('_partials.code-sample')

@slot('code')

Lorem ipsum dolor sit amet...

@@ -110,7 +110,7 @@ Use `.overflow-x-scroll` to allow horizontal scrolling if needed. @component('_partials.code-sample')

@slot('code') @@ -118,14 +118,13 @@ Use `.overflow-x-scroll` to allow horizontal scrolling if needed. @endslot @endcomponent - ### Scroll vertically Use `.overflow-y-scroll` to allow horizontal scrolling if needed. @component('_partials.code-sample')

@slot('code') @@ -140,17 +139,17 @@ Use `.overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`, @component('_partials.code-sample')

Scroll horizontally when content can't wrap

Scroll vertically when content can wrap

Scroll both horizontally and vertically when some content can't wrap

- 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! + 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!

@slot('code')

QrLmmW69vMQD...

@@ -165,7 +164,7 @@ Use `.scrolling-touch` to use momentum-based scrolling (where supported) on touc @component('_partials.code-sample')

@slot('code')

Lorem ipsum dolor sit amet...

@@ -178,7 +177,7 @@ This is mostly useful for undoing `.scrolling-touch` at larger screen sizes. @component('_partials.code-sample')

@slot('code')

Lorem ipsum dolor sit amet...

@@ -194,38 +193,38 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

- QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F + 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. + 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.

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

- Lorem ipsum dolor sit amet... + Lorem ipsum dolor sit amet...

@endslot @endcomponent diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md index e82a33824c2c..7964d5f6ecc0 100644 --- a/docs/source/docs/pointer-events.blade.md +++ b/docs/source/docs/pointer-events.blade.md @@ -12,30 +12,30 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.pointer-events-none	pointer-events: none;	Make element not react to pointer events, like `:hover` or `click`.
.pointer-events-auto	pointer-events: auto;	Make element react to pointer events, like `:hover` or `click`.

+ + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.pointer-events-none	pointer-events: none;	Make element not react to pointer events, like `:hover` or `click`.
.pointer-events-auto	pointer-events: auto;	Make element react to pointer events, like `:hover` or `click`.

diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md index 55fcf2e8fa37..d8784c09fefd 100644 --- a/docs/source/docs/positioning.blade.md +++ b/docs/source/docs/positioning.blade.md @@ -10,85 +10,85 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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; - bottom: 0; -	Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.
.pin-x	- right: 0; - left: 0; -	Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.
.pin	- top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; -	Anchor absolutely positioned element to all the edges of the nearest positioned parent.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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; + bottom: 0; +	Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.
.pin-x	+ right: 0; + left: 0; +	Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.
.pin	+ top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; +	Anchor absolutely positioned element to all the edges of the nearest positioned parent.

### Static Default @@ -223,21 +223,13 @@ Offsets are calculated relative to the viewport and the element *will* act as a

Scroll me!

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.

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.

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.

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.

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.

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.

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.

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.

@@ -266,20 +258,20 @@ Use the `.pin{-edge?}` utilities to anchor absolutely positioned elements agains Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably find that these are all you need to precisely control absolutely positioned elements.

Class

pin

Edge (optional)

All (default)

t Top

r Right

b Bottom

l Left

y Top and Bottom

x Left and Right

Class

pin

Edge (optional)

All (default)

t Top

r Right

b Bottom

l Left

y Top and Bottom

x Left and Right

@component('_partials.code-sample') diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md index 53cca821baef..4cb887994f68 100644 --- a/docs/source/docs/resize.blade.md +++ b/docs/source/docs/resize.blade.md @@ -12,35 +12,35 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.resize-none	resize: none;	Make a textarea not resizable.
.resize-y	resize: vertical;	Make a textarea resizable vertically.
.resize-x	resize: horizontal;	Make a textarea resizable horizontally.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.resize-none	resize: none;	Make a textarea not resizable.
.resize-y	resize: vertical;	Make a textarea resizable vertically.
.resize-x	resize: horizontal;	Make a textarea resizable horizontally.

diff --git a/docs/source/docs/responsive-design.blade.md b/docs/source/docs/responsive-design.blade.md index b7d4621956bc..db2258d36293 100644 --- a/docs/source/docs/responsive-design.blade.md +++ b/docs/source/docs/responsive-design.blade.md @@ -13,32 +13,32 @@ This is done using predefined screen sizes (media query breakpoints), each of wh @component('_partials.responsive-code-sample') @slot('none')

Tailwind

@endslot @slot('sm')

Tailwind

@endslot @slot('md')

Tailwind

@endslot @slot('lg')

Tailwind

@endslot @slot('xl')

Tailwind

@endslot @slot('code')

- ... + ...

@endslot @endcomponent @@ -100,7 +100,6 @@ These screen names will be reflected in your utilities, so your `.bg-red` utilit } ``` - ## 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: diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md index 79084d01545c..e5a492c83f2c 100644 --- a/docs/source/docs/shadows.blade.md +++ b/docs/source/docs/shadows.blade.md @@ -10,47 +10,47 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.shadow	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);	Apply a small box shadow to an element.
.shadow-md	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);	Apply a medium box shadow to an element.
.shadow-lg	box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);	Apply a large box shadow to an element.
.shadow-inner	box-shadow: 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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.shadow	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);	Apply a small box shadow to an element.
.shadow-md	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);	Apply a medium box shadow to an element.
.shadow-lg	box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);	Apply a large box shadow to an element.
.shadow-inner	box-shadow: 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 @@ -103,32 +103,32 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

- +

@endslot @endcomponent diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md index d69e80af1ed2..57029cad5ef8 100644 --- a/docs/source/docs/spacing.blade.md +++ b/docs/source/docs/spacing.blade.md @@ -16,32 +16,32 @@ Control an element's padding and margin using the `.p{side?}-{size}`, `.m{side?} 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.

Class

p Padding

m Margin

-m Negative Margin

Side (optional)

All (default)

t Top

r Right

b Bottom

l Left

x Horizontal

y Vertical

Space

0 0

1 0.25rem

2 0.5rem

3 0.75rem

4 1rem

6 1.5rem

8 2rem

px 1px

auto auto (horizontal margins only)

Class

p Padding

m Margin

-m Negative Margin

Side (optional)

All (default)

t Top

r Right

b Bottom

l Left

x Horizontal

y Vertical

Space

0 0

1 0.25rem

2 0.5rem

3 0.75rem

4 1rem

6 1.5rem

8 2rem

px 1px

auto auto (margins only)

diff --git a/docs/source/docs/svg.blade.md b/docs/source/docs/svg.blade.md index 23664cd03ebf..4b0d66bd6883 100644 --- a/docs/source/docs/svg.blade.md +++ b/docs/source/docs/svg.blade.md @@ -10,6 +10,6 @@ Tailwind doesn't provide SVG-specific utilites. Instead, use the generic sizing @component('_partials.code-sample', ['class' => 'text-center']) @endcomponent diff --git a/docs/source/docs/text-alignment.blade.md b/docs/source/docs/text-alignment.blade.md index e8172d42d52c..ea1af84a0eb8 100644 --- a/docs/source/docs/text-alignment.blade.md +++ b/docs/source/docs/text-alignment.blade.md @@ -12,40 +12,40 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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.

diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md index 25ee9b781d54..2be6db5d8e7f 100644 --- a/docs/source/docs/text-color.blade.md +++ b/docs/source/docs/text-color.blade.md @@ -12,24 +12,24 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - @foreach ($page->config['colors'] as $name => $value) - - - - - - @endforeach - -

Class	Properties	Description
.text-{{ $name }}	color: {{ $value }};	Set the text color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.

+ + + + + + + + + + @foreach ($page->config['colors'] as $name => $value) + + + + + + @endforeach + +

Class	Properties	Description
.text-{{ $name }}	color: {{ $value }};	Set the text color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.

## Hover @@ -38,7 +38,7 @@ In addition to the standard responsive variations, text colors also come in `hov @component('_partials.code-sample', ['class' => 'text-center']) @endcomponent diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md index 14f83e435db5..c95931532e0f 100644 --- a/docs/source/docs/text-sizing.blade.md +++ b/docs/source/docs/text-sizing.blade.md @@ -12,65 +12,65 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.text-xs	font-size: .75rem;	Set the text size to `.75rem` (`12px`).
.text-sm	font-size: .875rem;	Set the text size to `.875rem` (`14px`).
.text-base	font-size: 1rem;	Set the text size to `1rem` (`16px`).
.text-lg	font-size: 1.125rem;	Set the text size to `1.125rem` (`18px`).
.text-xl	font-size: 1.25rem;	Set the text size to `1.25rem` (`20px`).
.text-2xl	font-size: 1.5rem;	Set the text size to `1.5rem` (`24px`).
.text-3xl	font-size: 1.875rem;	Set the text size to `1.875rem` (`30px`).
.text-4xl	font-size: 2.25rem;	Set the text size to `2.25rem` (`36px`).
.text-5xl	font-size: 3rem;	Set the text size to `3rem` (`48px`).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.text-xs	font-size: .75rem;	Set the text size to `.75rem` (`12px`).
.text-sm	font-size: .875rem;	Set the text size to `.875rem` (`14px`).
.text-base	font-size: 1rem;	Set the text size to `1rem` (`16px`).
.text-lg	font-size: 1.125rem;	Set the text size to `1.125rem` (`18px`).
.text-xl	font-size: 1.25rem;	Set the text size to `1.25rem` (`20px`).
.text-2xl	font-size: 1.5rem;	Set the text size to `1.5rem` (`24px`).
.text-3xl	font-size: 1.875rem;	Set the text size to `1.875rem` (`30px`).
.text-4xl	font-size: 2.25rem;	Set the text size to `2.25rem` (`36px`).
.text-5xl	font-size: 3rem;	Set the text size to `3rem` (`48px`).

diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md index cf59b5f34fdc..7106b642206e 100644 --- a/docs/source/docs/text-style.blade.md +++ b/docs/source/docs/text-style.blade.md @@ -1,6 +1,6 @@ --- extends: _layouts.documentation -title: "Style & Decoration" +title: "Style & Decoration" description: "Utilities for controlling the style of text." features: responsive: true @@ -12,83 +12,83 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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; - -moz-osx-font-smoothing: grayscale; -	Set the font smoothing of an element to antialiased.
.subpixel-antialiased	- -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; -	Set the font smoothing of an element to subpixel antialiasing (the default).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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; + -moz-osx-font-smoothing: grayscale; +	Set the font smoothing of an element to antialiased.
.subpixel-antialiased	+ -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; +	Set the font smoothing of an element to subpixel antialiasing (the default).

## Hover diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md index fdc4441db3ab..545048e071e4 100644 --- a/docs/source/docs/user-select.blade.md +++ b/docs/source/docs/user-select.blade.md @@ -12,30 +12,30 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.select-none	user-select: none;	Disable selecting text in an element.
.select-text	user-select: text;	Allow selecting text in an element.

+ + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.select-none	user-select: none;	Disable selecting text in an element.
.select-text	user-select: text;	Allow selecting text in an element.

diff --git a/docs/source/docs/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md index b5ab5e07c78a..b211c128503f 100644 --- a/docs/source/docs/vertical-alignment.blade.md +++ b/docs/source/docs/vertical-alignment.blade.md @@ -12,18 +12,18 @@ features: @include('_partials.work-in-progress')

- +

- - - - - + + + + + diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md index 39e65b2671d5..ffa2180ce0cd 100644 --- a/docs/source/docs/visibility.blade.md +++ b/docs/source/docs/visibility.blade.md @@ -10,35 +10,34 @@ features: ---

Class	Properties	Description
Class	Properties	Description

- - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.visible	visibility: visible;	Make an element visible.
.invisible	visibility: hidden;	Hide an element without affecting the layout of the document.

+ + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.visible	visibility: visible;	Make an element visible.
.invisible	visibility: hidden;	Hide an element without affecting the layout of the document.

- ### Visible Default Use `.visible` to make an element visible. This will typically be used as a reset when using the `.invisible` utility. @@ -55,7 +54,6 @@ Use `.invisible` to hide an element, but still maintain its space.

@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. @@ -65,27 +63,27 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code') diff --git a/docs/source/docs/what-is-tailwind.blade.md b/docs/source/docs/what-is-tailwind.blade.md index 6e2644d8ec63..97b582be6f41 100644 --- a/docs/source/docs/what-is-tailwind.blade.md +++ b/docs/source/docs/what-is-tailwind.blade.md @@ -5,9 +5,9 @@ description: null ---

- Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. -

+ Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. +

Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that **it's not a UI kit.** @@ -30,33 +30,33 @@ Here's an example of a contact card component built with Tailwind without writin @component('_partials.code-sample', ['class' => 'bg-grey-lighter py-8'])

Adam Wathan

Developer at NothingWorks Inc.

- -

Adam Wathan

Developer at NothingWorks Inc.

+ +

@slot('code')

Adam Wathan

Developer at NothingWorks Inc.

- -

Adam Wathan

Developer at NothingWorks Inc.

+ +

@endslot @endcomponent @@ -69,18 +69,18 @@ Tailwind provides tools for [extracting component classes](/docs/extracting-comp @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @slot('code') @@ -106,47 +106,46 @@ Tailwind uses an intuitive `{screen}:` prefix that makes it easy to notice respo @component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

- +

@endslot @endcomponent - ### Designed to be customized If it makes sense to be customizable, Tailwind lets you customize it. @@ -164,7 +163,6 @@ const colorPalette = { // ... } - module.exports = { // ... backgroundColors: colorPalette, diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md index 1c29beec9826..d66a88532b48 100644 --- a/docs/source/docs/whitespace-and-wrapping.blade.md +++ b/docs/source/docs/whitespace-and-wrapping.blade.md @@ -1,6 +1,6 @@ --- extends: _layouts.documentation -title: "Whitespace & Wrapping" +title: "Whitespace & Wrapping" description: "Utilities for controlling the whitespace and wrapping of an element." features: responsive: true @@ -12,64 +12,64 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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; - text-overflow: ellipsis; - white-space: nowrap; -	Truncate overflowing text with an ellipsis (`…`) if needed.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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; + text-overflow: ellipsis; + white-space: nowrap; +	Truncate overflowing text with an ellipsis (`…`) if needed.

diff --git a/docs/source/docs/width.blade.md b/docs/source/docs/width.blade.md index 50c882f0d06d..440ab7cc4b5c 100644 --- a/docs/source/docs/width.blade.md +++ b/docs/source/docs/width.blade.md @@ -12,160 +12,160 @@ features: @include('_partials.work-in-progress')

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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`.

Class	Properties	Description
.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`.

diff --git a/docs/source/docs/working-utility-first.blade.md b/docs/source/docs/working-utility-first.blade.md deleted file mode 100644 index 28b2c84aefb4..000000000000 --- a/docs/source/docs/working-utility-first.blade.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -extends: _layouts.documentation -title: "Working Utility-First" -description: null ---- diff --git a/docs/source/docs/z-index.blade.md b/docs/source/docs/z-index.blade.md index 0f5ed23906ad..d30ef2b451b4 100644 --- a/docs/source/docs/z-index.blade.md +++ b/docs/source/docs/z-index.blade.md @@ -10,57 +10,57 @@ features: ---

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Properties	Description
.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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Properties	Description
.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 @@ -69,11 +69,11 @@ Control the stack order (or three-dimensional positioning) of an element in Tail @component('_partials.code-sample')

z-40

z-30

z-20

z-10

z-0

z-40

z-30

z-20

z-10

z-0

@slot('code')

z-40

@@ -93,52 +93,52 @@ For more information about Tailwind's responsive design features, check out the @component('_partials.responsive-code-sample') @slot('none')

yellow

z-40

z-30

z-20

z-10

z-0

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @slot('sm')

yellow

z-40

z-30

z-20

z-10

z-0

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @slot('md')

yellow

z-40

z-30

z-20

z-10

z-0

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @slot('lg')

yellow

z-40

z-30

z-20

z-10

z-0

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @slot('xl')

yellow

z-40

z-30

z-20

z-10

z-0

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @slot('code') @@ -167,4 +167,4 @@ By default Tailwind provides six numeric `z-index` utilities and an `auto` utili + '75': 75, + '100': 100, 'auto': 'auto', -@endslot +@endcomponent diff --git a/docs/source/index.blade.php b/docs/source/index.blade.php index d19357aaff56..b2722b8b1da8 100644 --- a/docs/source/index.blade.php +++ b/docs/source/index.blade.php @@ -7,84 +7,89 @@ + + + + + @endsection @section('body')

- -

Tailwind CSS

- v{{ $page->version }} -

A Utility-First CSS Framework
for Rapid UI Development

- Get Started - GitHub -

+ +

Tailwind CSS

+ v{{ $page->version }} +

A Utility-First CSS Framework
for Rapid UI Development

+ Get Started + GitHub +

- A project by -

- Adam Wathan - @adamwathan -

- Jonathan Reinink - @reinink -

- David Hemphill - @davidhemphill -

- Steve Schoger - @steveschoger -

+ A project by +

+ Adam Wathan + @adamwathan +

+ Jonathan Reinink + @reinink +

+ David Hemphill + @davidhemphill +

+ Steve Schoger + @steveschoger +

- - - GitHub - - - - Twitter - -

+ + + GitHub + + + + Twitter + +

@endsection diff --git a/docs/source/docs/safari-pinned-tab.svg b/docs/source/safari-pinned-tab.svg similarity index 100% rename from docs/source/docs/safari-pinned-tab.svg rename to docs/source/safari-pinned-tab.svg diff --git a/docs/tailwind.js b/docs/tailwind.js index 52cc443e5d0a..e92b00ff513c 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -1,4 +1,4 @@ -var config = require('../lib/index').defaultConfig() +var config = require('../defaultConfig')() config.colors = Object.assign(config.colors, { 'slate-darker': '#212b35', @@ -68,6 +68,11 @@ config.width = Object.assign(config.width, { config.height = Object.assign(config.height, { '7': '1.75rem', + '128': '32rem', +}) + +config.maxHeight = Object.assign(config.maxHeight, { + 'sm': '30rem', }) config.padding = Object.assign(config.padding, { @@ -78,8 +83,14 @@ config.padding = Object.assign(config.padding, { '80': '20rem', }) -config.margin = config.padding +config.margin = Object.assign(config.margin, { + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '80': '20rem', +}) -config.negativeMargin = config.padding +config.negativeMargin = config.margin module.exports = config diff --git a/docs/tasks/bin.js b/docs/tasks/bin.js deleted file mode 100644 index e6b1d4ca78de..000000000000 --- a/docs/tasks/bin.js +++ /dev/null @@ -1,18 +0,0 @@ -var hasbin = require('hasbin'); -var fs = require('fs'); - -module.exports = { - path: function() { - if (fs.existsSync('./vendor/bin/jigsaw')) { - return '"./vendor/bin/jigsaw"' - } - - if (hasbin.sync('jigsaw')) { - return 'jigsaw'; - } - - console.log('Could not find Jigsaw; please install it via Composer, either locally or globally.'); - - process.exit(); - } -}; diff --git a/docs/webpack.mix.js b/docs/webpack.mix.js index 752674c6ea3d..cabb9a984fb9 100644 --- a/docs/webpack.mix.js +++ b/docs/webpack.mix.js @@ -7,7 +7,7 @@ const tailwind = require('./../lib/index.js') const config = require('./../defaultConfig.js') const fs = require('fs') -fs.writeFileSync('./tailwind.json', JSON.stringify(config)) +fs.writeFileSync('./tailwind.json', JSON.stringify(config())) const env = argv.e || argv.env || 'local' const plugins = [ diff --git a/package.json b/package.json index 4e42578160ad..4922b29d4035 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "0.1.6", + "version": "0.2.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "lib/index.js", diff --git a/src/cli.js b/src/cli.js index 90bcea7c32bb..93daf4553b3c 100755 --- a/src/cli.js +++ b/src/cli.js @@ -52,8 +52,9 @@ program process.exit(1) } - const output = fs.readFileSync(path.resolve(__dirname, '../defaultConfig.js'), 'utf8') + const output = fs.readFileSync(path.resolve(__dirname, '../defaultConfig.stub.js'), 'utf8') fs.outputFileSync(destination, output.replace('// var defaultConfig', 'var defaultConfig')) + console.log(`Generated Tailwind config: ${destination}`) process.exit() }) diff --git a/src/generators/borderStyles.js b/src/generators/borderStyles.js index 8151a1bb51ca..3dfca388c490 100644 --- a/src/generators/borderStyles.js +++ b/src/generators/borderStyles.js @@ -2,6 +2,9 @@ import defineClasses from '../util/defineClasses' export default function() { return defineClasses({ + 'border-solid': { + 'border-style': 'solid', + }, 'border-dashed': { 'border-style': 'dashed', }, diff --git a/src/generators/borderStylesReset.js b/src/generators/borderStylesReset.js deleted file mode 100644 index 230dfc88c090..000000000000 --- a/src/generators/borderStylesReset.js +++ /dev/null @@ -1,12 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'border-dashed': { - 'border-width': '0', - }, - 'border-dotted': { - 'border-width': '0', - }, - }) -} diff --git a/src/generators/borderWidths.js b/src/generators/borderWidths.js index 57de0440ff38..f02c4f7cf648 100644 --- a/src/generators/borderWidths.js +++ b/src/generators/borderWidths.js @@ -1,53 +1,38 @@ import _ from 'lodash' import defineClasses from '../util/defineClasses' -function defaultBorder(width, color) { - return defineClasses({ - border: { - border: `${width} solid ${color}`, - }, - 'border-t': { - 'border-top': `${width} solid ${color}`, - }, - 'border-r': { - 'border-right': `${width} solid ${color}`, - }, - 'border-b': { - 'border-bottom': `${width} solid ${color}`, - }, - 'border-l': { - 'border-left': `${width} solid ${color}`, - }, - }) -} +function defineBorderWidthUtilities(borderWidths) { + const generators = [ + (width, modifier) => + defineClasses({ + [`border${modifier}`]: { + 'border-width': `${width}`, + }, + }), + (width, modifier) => + defineClasses({ + [`border-t${modifier}`]: { + 'border-top-width': `${width}`, + }, + [`border-r${modifier}`]: { + 'border-right-width': `${width}`, + }, + [`border-b${modifier}`]: { + 'border-bottom-width': `${width}`, + }, + [`border-l${modifier}`]: { + 'border-left-width': `${width}`, + }, + }), + ] -function sizedBorder(size, width, color) { - const style = width == 0 ? '0' : `${width} solid ${color}` // eslint-disable-line eqeqeq - - return defineClasses({ - [`border-${size}`]: { - border: `${style}`, - }, - [`border-t-${size}`]: { - 'border-top': `${style}`, - }, - [`border-r-${size}`]: { - 'border-right': `${style}`, - }, - [`border-b-${size}`]: { - 'border-bottom': `${style}`, - }, - [`border-l-${size}`]: { - 'border-left': `${style}`, - }, + return _.flatMap(generators, generator => { + return _.flatMap(borderWidths, (width, modifier) => { + return generator(width, modifier === 'default' ? '' : `-${modifier}`) + }) }) } -module.exports = function({ borderWidths, borderColors }) { - const color = borderColors.default - - return _.flatten([ - defaultBorder(borderWidths.default, color), - ..._.map(_.omit(borderWidths, 'default'), (width, size) => sizedBorder(size, width, color)), - ]) +module.exports = function({ borderWidths }) { + return defineBorderWidthUtilities(borderWidths) } diff --git a/src/generators/cursor.js b/src/generators/cursor.js index c33bf7310661..cd0e8f3856e1 100644 --- a/src/generators/cursor.js +++ b/src/generators/cursor.js @@ -3,6 +3,7 @@ import defineClasses from '../util/defineClasses' export default function() { return defineClasses({ 'cursor-auto': { cursor: 'auto' }, + 'cursor-default': { cursor: 'default' }, 'cursor-pointer': { cursor: 'pointer' }, 'cursor-not-allowed': { cursor: 'not-allowed' }, }) diff --git a/src/generators/rounded.js b/src/generators/rounded.js index b251725a252f..ba40d09aa756 100644 --- a/src/generators/rounded.js +++ b/src/generators/rounded.js @@ -1,35 +1,57 @@ import _ from 'lodash' -import defineClass from '../util/defineClass' import defineClasses from '../util/defineClasses' -function sideVariants() { - return defineClasses({ - 'rounded-t': { - 'border-bottom-right-radius': '0', - 'border-bottom-left-radius': '0', - }, - 'rounded-r': { - 'border-bottom-left-radius': '0', - 'border-top-left-radius': '0', - }, - 'rounded-b': { - 'border-top-left-radius': '0', - 'border-top-right-radius': '0', - }, - 'rounded-l': { - 'border-top-right-radius': '0', - 'border-bottom-right-radius': '0', - }, +function defineBorderRadiusUtilities(borderRadiuses) { + const generators = [ + (radius, modifier) => + defineClasses({ + [`rounded${modifier}`]: { + 'border-radius': `${radius}`, + }, + }), + (radius, modifier) => + defineClasses({ + [`rounded-t${modifier}`]: { + 'border-top-left-radius': `${radius}`, + 'border-top-right-radius': `${radius}`, + }, + [`rounded-r${modifier}`]: { + 'border-top-right-radius': `${radius}`, + 'border-bottom-right-radius': `${radius}`, + }, + [`rounded-b${modifier}`]: { + 'border-bottom-right-radius': `${radius}`, + 'border-bottom-left-radius': `${radius}`, + }, + [`rounded-l${modifier}`]: { + 'border-top-left-radius': `${radius}`, + 'border-bottom-left-radius': `${radius}`, + }, + }), + (radius, modifier) => + defineClasses({ + [`rounded-tl${modifier}`]: { + 'border-top-left-radius': `${radius}`, + }, + [`rounded-tr${modifier}`]: { + 'border-top-right-radius': `${radius}`, + }, + [`rounded-br${modifier}`]: { + 'border-bottom-right-radius': `${radius}`, + }, + [`rounded-bl${modifier}`]: { + 'border-bottom-left-radius': `${radius}`, + }, + }), + ] + + return _.flatMap(generators, generator => { + return _.flatMap(borderRadiuses, (radius, modifier) => { + return generator(radius, modifier === 'default' ? '' : `-${modifier}`) + }) }) } module.exports = function({ borderRadius }) { - return _(borderRadius) - .map((radius, modifier) => { - return defineClass(modifier === 'default' ? 'rounded' : `rounded-${modifier}`, { - 'border-radius': radius, - }) - }) - .concat(sideVariants()) - .value() + return defineBorderRadiusUtilities(borderRadius) } diff --git a/src/generators/spacing.js b/src/generators/spacing.js index eb68ddab3b60..613d869f0384 100644 --- a/src/generators/spacing.js +++ b/src/generators/spacing.js @@ -2,93 +2,78 @@ import _ from 'lodash' import defineClasses from '../util/defineClasses' function definePadding(padding) { - return _.flatMap(padding, (size, modifier) => { - return defineClasses({ - [`pt-${modifier}`]: { - 'padding-top': `${size}`, - }, - [`pr-${modifier}`]: { - 'padding-right': `${size}`, - }, - [`pb-${modifier}`]: { - 'padding-bottom': `${size}`, - }, - [`pl-${modifier}`]: { - 'padding-left': `${size}`, - }, - [`px-${modifier}`]: { - 'padding-left': `${size}`, - 'padding-right': `${size}`, - }, - [`py-${modifier}`]: { - 'padding-top': `${size}`, - 'padding-bottom': `${size}`, - }, - [`p-${modifier}`]: { - padding: `${size}`, - }, - }) + const generators = [ + (size, modifier) => + defineClasses({ + [`p-${modifier}`]: { padding: `${size}` }, + }), + (size, modifier) => + defineClasses({ + [`py-${modifier}`]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` }, + [`px-${modifier}`]: { 'padding-left': `${size}`, 'padding-right': `${size}` }, + }), + (size, modifier) => + defineClasses({ + [`pt-${modifier}`]: { 'padding-top': `${size}` }, + [`pr-${modifier}`]: { 'padding-right': `${size}` }, + [`pb-${modifier}`]: { 'padding-bottom': `${size}` }, + [`pl-${modifier}`]: { 'padding-left': `${size}` }, + }), + ] + + return _.flatMap(generators, generator => { + return _.flatMap(padding, generator) }) } function defineMargin(margin) { - return _.flatMap(margin, (size, modifier) => { - return defineClasses({ - [`mt-${modifier}`]: { - 'margin-top': `${size}`, - }, - [`mr-${modifier}`]: { - 'margin-right': `${size}`, - }, - [`mb-${modifier}`]: { - 'margin-bottom': `${size}`, - }, - [`ml-${modifier}`]: { - 'margin-left': `${size}`, - }, - [`mx-${modifier}`]: { - 'margin-left': `${size}`, - 'margin-right': `${size}`, - }, - [`my-${modifier}`]: { - 'margin-top': `${size}`, - 'margin-bottom': `${size}`, - }, - [`m-${modifier}`]: { - margin: `${size}`, - }, - }) + const generators = [ + (size, modifier) => + defineClasses({ + [`m-${modifier}`]: { margin: `${size}` }, + }), + (size, modifier) => + defineClasses({ + [`my-${modifier}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` }, + [`mx-${modifier}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` }, + }), + (size, modifier) => + defineClasses({ + [`mt-${modifier}`]: { 'margin-top': `${size}` }, + [`mr-${modifier}`]: { 'margin-right': `${size}` }, + [`mb-${modifier}`]: { 'margin-bottom': `${size}` }, + [`ml-${modifier}`]: { 'margin-left': `${size}` }, + }), + ] + + return _.flatMap(generators, generator => { + return _.flatMap(margin, generator) }) } function defineNegativeMargin(negativeMargin) { - return _.flatMap(negativeMargin, (size, modifier) => { - size = `${size}` === '0' ? `${size}` : `-${size}` + const generators = [ + (size, modifier) => + defineClasses({ + [`-m-${modifier}`]: { margin: `${size}` }, + }), + (size, modifier) => + defineClasses({ + [`-my-${modifier}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` }, + [`-mx-${modifier}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` }, + }), + (size, modifier) => + defineClasses({ + [`-mt-${modifier}`]: { 'margin-top': `${size}` }, + [`-mr-${modifier}`]: { 'margin-right': `${size}` }, + [`-mb-${modifier}`]: { 'margin-bottom': `${size}` }, + [`-ml-${modifier}`]: { 'margin-left': `${size}` }, + }), + ] - return defineClasses({ - [`-mt-${modifier}`]: { - 'margin-top': `${size}`, - }, - [`-mr-${modifier}`]: { - 'margin-right': `${size}`, - }, - [`-mb-${modifier}`]: { - 'margin-bottom': `${size}`, - }, - [`-ml-${modifier}`]: { - 'margin-left': `${size}`, - }, - [`-mx-${modifier}`]: { - 'margin-left': `${size}`, - 'margin-right': `${size}`, - }, - [`-my-${modifier}`]: { - 'margin-top': `${size}`, - 'margin-bottom': `${size}`, - }, - [`-m-${modifier}`]: { - margin: `${size}`, - }, + return _.flatMap(generators, generator => { + return _.flatMap(negativeMargin, (size, modifier) => { + return generator(`${size}` === '0' ? `${size}` : `-${size}`, modifier) }) }) } @@ -97,31 +82,6 @@ export default function({ padding, margin, negativeMargin }) { return _.flatten([ definePadding(padding), defineMargin(margin), - defineClasses({ - 'mt-auto': { - 'margin-top': 'auto', - }, - 'mr-auto': { - 'margin-right': 'auto', - }, - 'mb-auto': { - 'margin-bottom': 'auto', - }, - 'ml-auto': { - 'margin-left': 'auto', - }, - 'mx-auto': { - 'margin-left': 'auto', - 'margin-right': 'auto', - }, - 'my-auto': { - 'margin-top': 'auto', - 'margin-bottom': 'auto', - }, - 'm-auto': { - margin: 'auto', - }, - }), defineNegativeMargin(negativeMargin), ]) } diff --git a/src/index.js b/src/index.js index bf8fb76aa290..9ab46f830620 100644 --- a/src/index.js +++ b/src/index.js @@ -23,7 +23,7 @@ const plugin = postcss.plugin('tailwind', config => { const lazyConfig = () => { if (_.isUndefined(config)) { - return require('../defaultConfig') + return require('../defaultConfig')() } delete require.cache[require.resolve(path.resolve(config))] @@ -47,7 +47,8 @@ const plugin = postcss.plugin('tailwind', config => { }) plugin.defaultConfig = function() { - return _.cloneDeep(require('../defaultConfig')) + // prettier-ignore + throw new Error("`require('tailwindcss').defaultConfig()` is no longer a function, access it instead as `require('tailwindcss/defaultConfig')()`.") } module.exports = plugin diff --git a/src/lib/generateUtilities.js b/src/lib/generateUtilities.js index 75dd4e7de61a..94b0fa7f05bf 100644 --- a/src/lib/generateUtilities.js +++ b/src/lib/generateUtilities.js @@ -1,9 +1,10 @@ import _ from 'lodash' +import postcss from 'postcss' +import applyClassPrefix from '../util/applyClassPrefix' import backgroundColors from '../generators/backgroundColors' import backgroundPositions from '../generators/backgroundPositions' import backgroundSize from '../generators/backgroundSize' import borderColors from '../generators/borderColors' -import borderStylesReset from '../generators/borderStylesReset' import borderStyles from '../generators/borderStyles' import borderWidths from '../generators/borderWidths' import container from '../generators/container' @@ -39,50 +40,60 @@ import zIndex from '../generators/zIndex' export default function(config) { return function(css) { - const options = config() + const unwrappedConfig = config() css.walkAtRules('tailwind', atRule => { if (atRule.params === 'utilities') { - const utilities = _.flatten([ - lists(options), - forms(options), - textSizes(options), - textWeights(options), - textFonts(options), - textColors(options), - textLeading(options), - textTracking(options), - textAlign(options), - textWrap(options), - textStyle(options), - verticalAlign(options), - backgroundColors(options), - backgroundPositions(options), - backgroundSize(options), - borderStylesReset(options), - borderWidths(options), - borderColors(options), - borderStyles(options), - rounded(options), - display(options), - position(options), - overflow(options), - sizing(options), - spacing(options), - shadows(options), - flex(options), - floats(options), - visibility(options), - zIndex(options), - opacity(options), - userSelect(options), - pointerEvents(options), - resize(options), - cursor(options), - ]) + const utilities = postcss.root({ + nodes: _.flatten([ + lists(unwrappedConfig), + forms(unwrappedConfig), + textSizes(unwrappedConfig), + textWeights(unwrappedConfig), + textFonts(unwrappedConfig), + textColors(unwrappedConfig), + textLeading(unwrappedConfig), + textTracking(unwrappedConfig), + textAlign(unwrappedConfig), + textWrap(unwrappedConfig), + textStyle(unwrappedConfig), + verticalAlign(unwrappedConfig), + backgroundColors(unwrappedConfig), + backgroundPositions(unwrappedConfig), + backgroundSize(unwrappedConfig), + borderWidths(unwrappedConfig), + borderColors(unwrappedConfig), + borderStyles(unwrappedConfig), + rounded(unwrappedConfig), + display(unwrappedConfig), + position(unwrappedConfig), + overflow(unwrappedConfig), + sizing(unwrappedConfig), + spacing(unwrappedConfig), + shadows(unwrappedConfig), + flex(unwrappedConfig), + floats(unwrappedConfig), + visibility(unwrappedConfig), + zIndex(unwrappedConfig), + opacity(unwrappedConfig), + userSelect(unwrappedConfig), + pointerEvents(unwrappedConfig), + resize(unwrappedConfig), + cursor(unwrappedConfig), + ]), + }) - atRule.before(container(options)) - atRule.before(responsive(utilities)) + if (_.get(unwrappedConfig, 'options.important', false)) { + utilities.walkDecls(decl => (decl.important = true)) + } + + const tailwindClasses = postcss.root({ + nodes: [...container(unwrappedConfig), responsive(utilities)], + }) + + applyClassPrefix(tailwindClasses, _.get(unwrappedConfig, 'options.prefix', '')) + + atRule.before(tailwindClasses) atRule.remove() } }) diff --git a/src/lib/substituteClassApplyAtRules.js b/src/lib/substituteClassApplyAtRules.js index 11aaf3f986d6..5408e82f6d96 100644 --- a/src/lib/substituteClassApplyAtRules.js +++ b/src/lib/substituteClassApplyAtRules.js @@ -1,6 +1,5 @@ import _ from 'lodash' import postcss from 'postcss' -import findMixin from '../util/findMixin' import escapeClassName from '../util/escapeClassName' function normalizeClassNames(classNames) { @@ -9,6 +8,33 @@ function normalizeClassNames(classNames) { }) } +function findMixin(css, mixin, onError) { + const matches = [] + + css.walkRules(rule => { + if (rule.selectors.includes(mixin)) { + if (rule.parent.type !== 'root') { + // prettier-ignore + onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} is nested inside of an at-rule (@${rule.parent.name}).`) + } + + matches.push(rule) + } + }) + + if (_.isEmpty(matches)) { + // prettier-ignore + onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} either does not exist, or it's actual definition includes a pseudo-class like :hover, :active, etc.`) + } + + if (matches.length > 1) { + // prettier-ignore + onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} is included in multiple rulesets.`) + } + + return _.flatten(matches.map(match => match.clone().nodes)) +} + export default function() { return function(css) { css.walkRules(rule => { @@ -27,8 +53,8 @@ export default function() { }) const decls = _.flatMap(classes, mixin => { - return findMixin(css, mixin, () => { - throw atRule.error(`No ${mixin} class found.`) + return findMixin(css, mixin, message => { + throw atRule.error(message) }) }) diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js index a7baf1729803..52a51918f5e8 100644 --- a/src/lib/substituteResponsiveAtRules.js +++ b/src/lib/substituteResponsiveAtRules.js @@ -6,11 +6,12 @@ import buildMediaQuery from '../util/buildMediaQuery' export default function(config) { return function(css) { const screens = config().screens - const rules = [] + const responsiveRules = [] + let finalRules = [] css.walkAtRules('responsive', atRule => { const nodes = atRule.nodes - rules.push(...cloneNodes(nodes)) + responsiveRules.push(...cloneNodes(nodes)) atRule.before(nodes) atRule.remove() }) @@ -22,16 +23,34 @@ export default function(config) { }) mediaQuery.append( - rules.map(rule => { + responsiveRules.map(rule => { const cloned = rule.clone() cloned.selectors = _.map(rule.selectors, selector => `.${screen}\\:${selector.slice(1)}`) return cloned }) ) - if (mediaQuery.nodes.length) { - css.append(mediaQuery) + finalRules.push(mediaQuery) + }) + + const hasScreenRules = finalRules.some(i => i.nodes.length !== 0) + + if (!hasScreenRules) { + return + } + + let includesScreensExplicitly = false + + css.walkAtRules('tailwind', atRule => { + if (atRule.params === 'screens') { + atRule.replaceWith(finalRules) + includesScreensExplicitly = true } }) + + if (!includesScreensExplicitly) { + css.append(finalRules) + return + } } } diff --git a/src/util/applyClassPrefix.js b/src/util/applyClassPrefix.js new file mode 100644 index 000000000000..502e5f02babf --- /dev/null +++ b/src/util/applyClassPrefix.js @@ -0,0 +1,6 @@ +export default function(css, prefix) { + css.walkRules(rule => { + rule.selectors = rule.selectors.map(selector => `.${prefix}${selector.slice(1)}`) + }) + return css +} diff --git a/src/util/findMixin.js b/src/util/findMixin.js deleted file mode 100644 index 1460ea81204e..000000000000 --- a/src/util/findMixin.js +++ /dev/null @@ -1,17 +0,0 @@ -import _ from 'lodash' - -export default function findMixin(css, mixin, onError) { - const matches = [] - - css.walkRules(rule => { - if (rule.selectors.includes(mixin) && rule.parent.type === 'root') { - matches.push(rule) - } - }) - - if (_.isEmpty(matches) && _.isFunction(onError)) { - onError() - } - - return _.flatten(matches.map(match => match.clone().nodes)) -} diff --git a/src/util/responsive.js b/src/util/responsive.js index 67c9056455ed..2d0a90636320 100644 --- a/src/util/responsive.js +++ b/src/util/responsive.js @@ -1,3 +1,4 @@ +import _ from 'lodash' import postcss from 'postcss' import cloneNodes from './cloneNodes' @@ -6,5 +7,5 @@ export default function responsive(rules) { .atRule({ name: 'responsive', }) - .append(cloneNodes(rules)) + .append(cloneNodes(_.isArray(rules) ? rules : rules.nodes)) }

{{ $page->title }}

Tailwind CSS

A Utility-First CSS Framework for Rapid UI Development

Tailwind CSS

A Utility-First CSS Framework for Rapid UI Development

A Utility-First CSS Framework
for Rapid UI Development

A Utility-First CSS Framework
for Rapid UI Development