-
-
-
diff --git a/docs/source/_assets/js/nav.js b/docs/source/_assets/js/nav.js
deleted file mode 100644
index bfb5a4617bbd..000000000000
--- a/docs/source/_assets/js/nav.js
+++ /dev/null
@@ -1,89 +0,0 @@
-$.when($.ready).then(function() {
- window.history.replaceState({
- 'href': window.location.href,
- 'title': $(document).filter('title').text(),
- 'nav': $(document).find('#nav').html(),
- 'content': $(document).find('#content').html()
- }, '', window.location.href)
-
- $('#nav').on('click', 'a', function (event) {
-
- // Allow opening links in new tabs
- if (event.metaKey) {
- return
- }
-
- // Prevent following link
- event.preventDefault()
-
- // Get desired link
- var href = $(this).attr('href')
-
- // Make Ajax request to get the page content
- $.ajax({
- method: 'GET',
- url: href,
- cache: false,
- dataType: 'html',
- }).done(function(html) {
-
- // Parse the HTML response
- var title = $(html).filter('title').text()
- var nav = $(html).find('#nav').html()
- var content = $(html).find('#content').html()
-
- $('#sidebar').addClass('hidden')
- $('#sidebar-close').addClass('hidden')
-
- // Update the page
- $('title').text(title)
- $('#nav').html(nav)
- $('#content').html(content)
-
- // Scroll to the top of the page
- $(document).scrollTop(0)
-
- // Add page load to browser history
- window.history.pushState({
- 'href': href,
- 'title': title,
- 'nav': $(html).find('#nav').html(),
- 'content': $(html).find('#content').html()
- }, '', href)
-
- // Track on Google Analytics
- if (typeof(ga) === 'function') {
- ga('set', 'page', href)
- ga('send', 'pageview')
- }
- })
- })
-
- // Load page history (for back/forward nav)
- window.onpopstate = function(e) {
- if(e.state){
- // Update the page
- $('title').text(e.state.title)
- $('#nav').html(e.state.nav)
- $('#content').html(e.state.content)
-
- // Track on Google Analytics
- if (typeof(ga) === 'function') {
- ga('set', 'page', e.state.href)
- ga('send', 'pageview')
- }
- }
- }
-
- // Close sidebar (mobile)
- $('#sidebar-close').on('click', function () {
- $('#sidebar').addClass('hidden')
- $('#sidebar-close').addClass('hidden')
- })
-
- // Show sidebar (mobile)
- $('#sidebar-open').on('click', function () {
- $('#sidebar').removeClass('hidden')
- $('#sidebar-close').removeClass('hidden')
- })
-})
diff --git a/docs/source/_assets/js/prism.js b/docs/source/_assets/js/prism.js
deleted file mode 100644
index 1c69f25d36b2..000000000000
--- a/docs/source/_assets/js/prism.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+less */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){h.lastIndex=0;var _=h.exec(w),P=1;if(!_&&m&&b!=t.length-1){if(h.lastIndex=k,_=h.exec(e),!_)break;for(var A=_.index+(d?_[1].length:0),j=_.index+_[0].length,x=b,O=k,S=t.length;S>x&&(j>O||!t[x].type&&!t[x-1].greedy);++x)O+=t[x].length,A>=O&&(++b,k=O);if(t[b]instanceof s||t[x-1].greedy)continue;P=x-b,w=e.slice(k,O),_.index-=k}if(_){d&&(p=_[1].length);var A=_.index+p,_=_[0].slice(p),j=A+_.length,N=w.slice(0,A),C=w.slice(j),E=[b,P];N&&(++b,k+=N.length,E.push(N));var I=new s(u,f?n.tokenize(_,f):_,y,_,m);if(E.push(I),C&&E.push(C),Array.prototype.splice.apply(t,E),1!=P&&n.matchGrammar(e,t,a,b,k,!0,u),l)break}else if(l)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if(e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""+i.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
-Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(
-@endslot
-@endcomponent
-
-### Pill
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-@endcomponent
-
-### Outline
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-@endcomponent
-
-### Bordered
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-@endcomponent
-
-### Disabled
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-@endcomponent
-
-### 3D
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-@endcomponent
-
-### Elevated
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-@endcomponent
-
-### Groups
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-
-
-
-@endcomponent
-
-### 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
deleted file mode 100644
index 076cc4ae3a37..000000000000
--- a/docs/source/docs/examples/cards.blade.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-extends: _layouts.documentation
-title: "Cards"
-description: Examples of building card components with Tailwind CSS.
----
-
-Tailwind doesn't include pre-designed card components out of the box, but they're easy to build using existing utilities.
-
-### Stacked
-
-@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
-
-
-
-
The Coldest Sunset
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
-
-
-
-
-
Jonathan Reinink
-
Aug 18
-
-
-
-
-@endcomponent
diff --git a/docs/source/docs/examples/forms.blade.md b/docs/source/docs/examples/forms.blade.md
deleted file mode 100644
index bb4b286cf4da..000000000000
--- a/docs/source/docs/examples/forms.blade.md
+++ /dev/null
@@ -1,160 +0,0 @@
----
-extends: _layouts.documentation
-title: "Forms"
-description: Examples of building forms with Tailwind CSS.
----
-
-Tailwind doesn't include purpose-built form control classes out of the box, but form controls are easy to style using existing utilities.
-
-### Login Form
-
-@component('_partials.code-sample', ['class' => 'px-3 py-10 bg-grey-lighter flex justify-center'])
-
-@endcomponent
-
-### Wrapping Columns
-
-Add `flex-wrap` to your column container to allow columns to wrap when they run out of room.
-
-@component('_partials.code-sample', ['lang' => 'html'])
-
-
-
-
-
-
-
-@endcomponent
-
-### Column Spacing
-
-Add a negative horizontal margin like `-mx-2` to your column container and an equal horizontal padding like `px-2` to each column to add gutters.
-
-To prevent horizontal scrolling in full width layouts, add `overflow-hidden` to another parent container, or compensate for the negative margin with matching horizontal padding.
-
-@component('_partials.code-sample', ['lang' => 'html'])
-
-
-
-
-
-
-
-
-
-
-
-
-
-@endcomponent
-
-### Automatic Column Widths
-
-Use `flex-1` instead of an explicit width on your columns to have them size automatically to fill the row.
-
-@component('_partials.code-sample', ['lang' => 'html'])
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@endcomponent
-
-### Column Order
-
-Use `flex-row-reverse` to reverse column order. Useful for two-column responsive layouts where the column on right should appear first on smaller screens.
-
-@component('_partials.code-sample', ['lang' => 'html'])
-
-
1
-
2
-
-@endcomponent
-
-### Simple Offsets
-
-Use auto margin utilities like `ml-auto` and `mr-auto` to offset columns in a row.
-
-@component('_partials.code-sample', ['lang' => 'html'])
-
-
-
-
-@endcomponent
diff --git a/docs/source/docs/examples/navigation.blade.md b/docs/source/docs/examples/navigation.blade.md
deleted file mode 100644
index 41880a74a3d9..000000000000
--- a/docs/source/docs/examples/navigation.blade.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-extends: _layouts.documentation
-title: "Navigation"
-description: Examples of building navigation components with Tailwind CSS.
----
-
-Tailwind doesn't include pre-designed navigation components out of the box, but they're easy to build using existing utilities.
-
-### Simple
-
-@component('_partials.code-sample')
-
-@endcomponent
diff --git a/docs/source/docs/extracting-components.blade.md b/docs/source/docs/extracting-components.blade.md
deleted file mode 100644
index ce261fafdec8..000000000000
--- a/docs/source/docs/extracting-components.blade.md
+++ /dev/null
@@ -1,198 +0,0 @@
----
-extends: _layouts.documentation
-title: "Extracting Components"
-description: null
----
-
-Tailwind encourages a "utility-first" workflow, where new designs are initially implemented using only utility classes to avoid premature abstraction.
-
-While we strongly believe you can get a lot further with just utilities than you might initially expect, **we don't believe that a dogmatic utility*-only* approach is the best way to write CSS.**
-
-For example, using a utility-first approach, implementing a button style early in a project might look something like this:
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-
-@slot('code')
-
-@endslot
-@endcomponent
-
-If this is the only button in your project, creating a custom component class for it would be premature abstraction; you'd be writing new CSS for no measurable benefit.
-
-If on the other hand you were reusing this button style in several places, keeping that long list of utility classes in sync across every button instance could become a real maintenance burden.
-
-## Extracting utility patterns with `@apply`
-
-When you start to notice repeating patterns of utilities in your markup, it might be worth extracting a component class.
-
-To make this as easy as possible, Tailwind provides the `@apply` directive for applying the styles of existing utilities to new component classes.
-
-Here's what a `.btn-blue` class might look like using `@apply` to compose it from existing utilities:
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-Note that `hover:`, `focus:`, and `{screen}:` utility variants can't be mixed in directly. Instead, apply the plain version of the utility you need to the appropriate pseudo-selector or in a new media query.
-
-## Keeping things composable
-
-Say you have these two buttons:
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-
-
-
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-It might be tempting to implement component classes for these buttons like this:
-
-```less
-.btn-blue {
- @@apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
-}
-.btn-blue:hover {
- @@apply .bg-blue-dark;
-}
-
-.btn-grey {
- @@apply .bg-grey-light .text-grey-darkest .font-bold .py-2 .px-4 .rounded;
-}
-.btn-grey:hover {
- @@apply .bg-grey;
-}
-```
-
-The issue with this approach is that **you still have potentially painful duplication.**
-
-If you wanted to change the padding, font weight, or border radius of all the buttons on your site, you'd need to update every button class.
-
-A better approach is to extract the parts that are the same into a separate class:
-
-```less
-.btn {
- @@apply .font-bold .py-2 .px-4 .rounded;
-}
-
-.btn-blue {
- @@apply .bg-blue .text-white;
-}
-.btn-blue:hover {
- @@apply .bg-blue-dark;
-}
-
-.btn-grey {
- @@apply .bg-grey-light .text-grey-darkest;
-}
-.btn-grey:hover {
- @@apply .bg-grey;
-}
-```
-
-Now you'd apply two classes any time you needed to style a button:
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-
-
-
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-This makes it easy to change the shared styles in one place by just editing the `.btn` class.
-
-It also allows you to add new one-off button styles without being forced to create a new component class or duplicated the shared styles:
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-
-@slot('code')
-
-@endslot
-@endcomponent
-
-## CSS Structure
-
-Since Tailwind's utility classes don't rely on `!important` to defeat other styles, it's important that you add your component classes *before* any utility classes in your CSS.
-
-Here's an example:
-
-```less
-@@tailwind preflight;
-
-.btn {
- @@apply .font-bold .py-2 .px-4 .rounded;
-}
-.btn-blue {
- @@apply .bg-blue .text-white;
-}
-.btn-blue:hover {
- @@apply .bg-blue-dark;
-}
-
-@@tailwind utilities;
-```
-
-If you're using a preprocessor like Less or Sass, consider keeping your components in separate files and importing them:
-
-```less
-@@tailwind preflight;
-
-@@import "components/buttons";
-@@import "components/forms";
-/* Etc. */
-
-@@tailwind utilities;
-```
diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md
deleted file mode 100644
index 911c9a3429c0..000000000000
--- a/docs/source/docs/flexbox-align-content.blade.md
+++ /dev/null
@@ -1,282 +0,0 @@
----
-extends: _layouts.documentation
-title: "Align Content"
-description: "Utilities for controlling how lines are positioned in multi-line flex containers."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.content-start',
- 'align-content: flex-start;',
- "Pack lines against the start of the cross axis.",
- ],
- [
- '.content-center',
- 'align-content: center;',
- "Pack lines in the center of the cross axis.",
- ],
- [
- '.content-end',
- 'align-content: flex-end;',
- "Pack lines against the end of the cross axis.",
- ],
- [
- '.content-between',
- 'align-content: space-between;',
- "Distribute lines along the cross axis by adding an equal amount of space between each line.",
- ],
- [
- '.content-around',
- 'align-content: space-around;',
- "Distribute lines along the cross axis by adding an equal amount of space around each line.",
- ],
- ]
-])
-
-### Start Default
-
-Use `.content-start` to pack lines in a flex container against the start of the cross axis:
-
-@component('_partials.code-sample')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endcomponent
-
-### Center
-
-Use `.content-center` to pack lines in a flex container in the center of the cross axis:
-
-@component('_partials.code-sample')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endcomponent
-
-### End
-
-Use `.content-end` to pack lines in a flex container against the end of the cross axis:
-
-@component('_partials.code-sample')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@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')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@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')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endcomponent
-
-## Responsive
-
-To control the alignment of flex content at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endslot
-@slot('sm')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endslot
-@slot('md')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endslot
-@slot('lg')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endslot
-@slot('xl')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endslot
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'align-content',
- 'property' => 'flexbox',
- ],
- 'variants' => [
- 'responsive',
- ],
- 'extraMessage' => 'Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the align-content utilities.'
-])
diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md
deleted file mode 100644
index bbe7c10983cc..000000000000
--- a/docs/source/docs/flexbox-align-items.blade.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-extends: _layouts.documentation
-title: "Align Items"
-description: "Utilities for controlling how flex items are positioned along a container's cross axis."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.items-stretch',
- 'align-items: 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
-
-Use `.items-stretch` to stretch items to fill the flex container's cross axis:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-### Start
-
-Use `.items-start` to align items to the start of the flex container's cross axis:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-### Center
-
-Use `.items-center` to align items along the center of the flex container's cross axis:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-### End
-
-Use `.items-end` to align items to the end of the flex container's cross axis:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@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')
-
-
1
-
2
-
3
-
-@endcomponent
-
-## Responsive
-
-To control the alignment of flex items at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:items-center` to apply the `items-center` utility at only medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
1
-
2
-
3
-
-@endslot
-@slot('sm')
-
-
1
-
2
-
3
-
-@endslot
-@slot('md')
-
-
1
-
2
-
3
-
-@endslot
-@slot('lg')
-
-
1
-
2
-
3
-
-@endslot
-@slot('xl')
-
-
1
-
2
-
3
-
-@endslot
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'align-items',
- 'property' => 'flexbox',
- ],
- 'variants' => [
- 'responsive',
- ],
- 'extraMessage' => 'Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the align-items utilities.'
-])
diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md
deleted file mode 100644
index 6d62577a60cd..000000000000
--- a/docs/source/docs/flexbox-align-self.blade.md
+++ /dev/null
@@ -1,164 +0,0 @@
----
-extends: _layouts.documentation
-title: "Align Self"
-description: "Utilities for controlling how an individual flex item is positioned along its container's cross axis."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.self-auto',
- 'align-self: auto;',
- "Align item based on the container's 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
-
-Use `.self-auto` to align an item based on the value of the flex container's `align-items` property:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-### Start
-
-Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@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')
-
-
1
-
2
-
3
-
-@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')
-
-
1
-
2
-
3
-
-@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')
-
-
1
-
2
-
3
-
-@endcomponent
-
-## Responsive
-
-To control the alignment of a flex item at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:self-end` to apply the `self-end` utility at only medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
1
-
2
-
3
-
-@endslot
-@slot('sm')
-
-
1
-
2
-
3
-
-@endslot
-@slot('md')
-
-
1
-
2
-
3
-
-@endslot
-@slot('lg')
-
-
1
-
2
-
3
-
-@endslot
-@slot('xl')
-
-
1
-
2
-
3
-
-@endslot
-@slot('code')
-
-
-
2
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'align-self',
- 'property' => 'flexbox',
- ],
- 'variants' => [
- 'responsive',
- ],
- 'extraMessage' => 'Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the align-self utilities.'
-])
diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md
deleted file mode 100644
index 0388046e1f52..000000000000
--- a/docs/source/docs/flexbox-direction.blade.md
+++ /dev/null
@@ -1,145 +0,0 @@
----
-extends: _layouts.documentation
-title: "Flex Direction"
-description: "Utilities for controlling the direction of flex items."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.flex-row',
- 'flex-direction: row;',
- "Position flex items in the normal horizontal direction.",
- ],
- [
- '.flex-row-reverse',
- 'flex-direction: row-reverse;',
- "Position flex items in the reverse horizontal direction.",
- ],
- [
- '.flex-col',
- 'flex-direction: column;',
- "Position flex items vertically.",
- ],
- [
- '.flex-col-reverse',
- 'flex-direction: column-reverse;',
- "Position flex items vertically in the reverse direction.",
- ],
- ]
-])
-
-### Row Default
-
-Use `.flex-row` to position flex items horizontally in the same direction as text:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-### Row reversed
-
-Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-### Column
-
-Use `.flex-col` to position flex items vertically:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-### Column reversed
-
-Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-## Responsive
-
-To apply a flex direction utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:flex-row` to an element would apply the `flex-row` utility at medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
1
-
2
-
3
-
-@endslot
-@slot('sm')
-
-
1
-
2
-
3
-
-@endslot
-@slot('md')
-
-
1
-
2
-
3
-
-@endslot
-@slot('lg')
-
-
1
-
2
-
3
-
-@endslot
-@slot('xl')
-
-
1
-
2
-
3
-
-@endslot
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'flex-direction',
- 'property' => 'flexbox',
- ],
- 'variants' => [
- 'responsive',
- ],
- 'extraMessage' => 'Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the flex-direction utilities.'
-])
diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md
deleted file mode 100644
index 7d008ffc374d..000000000000
--- a/docs/source/docs/flexbox-display.blade.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-extends: _layouts.documentation
-title: "Flex Display"
-description: "Utilities for creating flex containers."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.flex',
- 'display: flex;',
- "Create a block-level flex container.",
- ],
- [
- '.inline-flex',
- 'display: inline-flex;',
- "Create an inline flex container.",
- ],
- ]
-])
-
-## Flex
-
-Use `.flex` to create a block-level flex container:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-## Inline flex
-
-Use `.inline-flex` to create an inline flex container:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-## Responsive
-
-To control the display property of an element at a specific breakpoint, add a `{screen}:` prefix to any existing display utility class. For example, use `md:inline-flex` to apply the `inline-flex` utility at only medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
1
-
2
-
3
-
-@endslot
-@slot('sm')
-
-
1
-
2
-
3
-
-@endslot
-@slot('md')
-
-
1
-
2
-
3
-
-@endslot
-@slot('lg')
-
-
1
-
2
-
3
-
-@endslot
-@slot('xl')
-
-
1
-
2
-
3
-
-@endslot
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'flex display',
- 'property' => 'flexbox',
- ],
- 'variants' => [
- 'responsive',
- ],
- 'extraMessage' => 'Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the display utilities.'
-])
diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md
deleted file mode 100644
index 3b1118c8437e..000000000000
--- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md
+++ /dev/null
@@ -1,383 +0,0 @@
----
-extends: _layouts.documentation
-title: "Flex, Grow, & Shrink"
-description: "Utilities for controlling how flex items grow and shrink."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.flex-initial',
- 'flex: initial;',
- "Allow a flex item to shrink but not grow, taking into account its initial size.",
- ],
- [
- '.flex-1',
- 'flex: 1;',
- "Allow a flex item to grow and shrink as needed, ignoring its initial size.",
- ],
- [
- '.flex-auto',
- 'flex: auto;',
- "Allow a flex item to grow and shrink, taking into account its initial size.",
- ],
- [
- '.flex-none',
- 'flex: none;',
- "Prevent a flex item from growing or shrinking.",
- ],
- [
- '.flex-grow',
- 'flex-grow: 1;',
- "Allow a flex item to grow to fill any available space.",
- ],
- [
- '.flex-shrink',
- 'flex-shrink: 1;',
- "Allow a flex item to shrink if needed.",
- ],
- [
- '.flex-no-grow',
- 'flex-grow: 0;',
- "Prevent a flex item from growing.",
- ],
- [
- '.flex-no-shrink',
- 'flex-shrink: 0;',
- "Prevent a flex item from shrinking.",
- ],
- ]
-])
-
-### Initial Default
-
-Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size:
-
-@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 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
-
-### 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
-
-### 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
-
-## Responsive
-
-To control how a flex item grows or shrinks at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:flex-no-shrink` to apply the `flex-no-shrink` utility at only medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
- 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
-
-
-@endslot
-@slot('md')
-
-
- 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
-
-
-@endslot
-@slot('xl')
-
-
- Item that can grow or shrink if needed
-
-
- Responsive flex item
-
-
- Item that can grow or shrink if needed
-
-
-@endslot
-@slot('code')
-
-
-
- Responsive flex item
-
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'flex, grow, and shrink',
- 'property' => 'flexbox',
- ],
- 'variants' => [
- 'responsive',
- ],
- 'extraMessage' => 'Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the flex, grow, and shrink utilities.'
-])
diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md
deleted file mode 100644
index c8c5cec15e5b..000000000000
--- a/docs/source/docs/flexbox-justify-content.blade.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-extends: _layouts.documentation
-title: "Justify Content"
-description: "Utilities for controlling flex items are positioned along a container's main axis."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.justify-start',
- 'justify-content: flex-start;',
- "Justify items against the start of the container.",
- ],
- [
- '.justify-center',
- 'justify-content: center;',
- "Justify items in the center of the container.",
- ],
- [
- '.justify-end',
- 'justify-content: flex-end;',
- "Justify items against the end of the container.",
- ],
- [
- '.justify-between',
- 'justify-content: space-between;',
- "Justify items by adding an equal amount of space between each one.",
- ],
- [
- '.justify-around',
- 'justify-content: space-around;',
- "Justify items by adding an equal amount of space around each one.",
- ],
- ]
-])
-
-### Start Default
-
-Use `.justify-start` to justify items against the start of the flex container's main axis:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-### Center
-
-Use `.justify-center` to justify items along the center of the flex container's main axis:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@endcomponent
-
-### End
-
-Use `.justify-end` to justify items against the end of the flex container's main axis:
-
-@component('_partials.code-sample')
-
-
1
-
2
-
3
-
-@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')
-
-
1
-
2
-
3
-
-@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')
-
-
1
-
2
-
3
-
-@endcomponent
-
-## Responsive
-
-To justify flex items at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:justify-between` to apply the `justify-between` utility at only medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
1
-
2
-
3
-
-@endslot
-@slot('sm')
-
-
1
-
2
-
3
-
-@endslot
-@slot('md')
-
-
1
-
2
-
3
-
-@endslot
-@slot('lg')
-
-
1
-
2
-
3
-
-@endslot
-@slot('xl')
-
-
1
-
2
-
3
-
-@endslot
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'justify-content',
- 'property' => 'flexbox',
- ],
- 'variants' => [
- 'responsive',
- ],
- 'extraMessage' => 'Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the justify-content utilities.'
-])
diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md
deleted file mode 100644
index 596e66b7a1f3..000000000000
--- a/docs/source/docs/flexbox-wrapping.blade.md
+++ /dev/null
@@ -1,176 +0,0 @@
----
-extends: _layouts.documentation
-title: "Flex Wrapping"
-description: "Utilities for controlling how flex items wrap."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.flex-no-wrap',
- 'flex-wrap: nowrap;',
- "Don't allow flex items to wrap.",
- ],
- [
- '.flex-wrap',
- 'flex-wrap: wrap;',
- "Allow flex items to wrap in the normal direction.",
- ],
- [
- '.flex-wrap-reverse',
- 'flex-wrap: wrap-reverse;',
- "Allow flex items to wrap in the reverse direction.",
- ],
- ]
-])
-
-### Don't wrap Default
-
-Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
-
-@component('_partials.code-sample')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endcomponent
-
-### Wrap normally
-
-Use `.flex-wrap` to allow flex items to wrap:
-
-@component('_partials.code-sample')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endcomponent
-
-### Wrap reversed
-
-Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
-
-@component('_partials.code-sample')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endcomponent
-
-## Responsive
-
-To control how flex items wrap at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:flex-wrap-reverse` to apply the `flex-wrap-reverse` utility at only medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endslot
-@slot('sm')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endslot
-@slot('md')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endslot
-@slot('lg')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endslot
-@slot('xl')
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endslot
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'flex-wrap',
- 'property' => 'flexbox',
- ],
- 'variants' => [
- 'responsive',
- ],
- 'extraMessage' => 'Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the flex-wrap utilities.'
-])
diff --git a/docs/source/docs/floats.blade.md b/docs/source/docs/floats.blade.md
deleted file mode 100644
index 6ca9a94bb5d7..000000000000
--- a/docs/source/docs/floats.blade.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-extends: _layouts.documentation
-title: "Floats"
-description: "Utilities for controlling the wrapping of content around an element."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.float-right',
- 'float: right;',
- "Moves the element to the right side of its container.",
- ],
- [
- '.float-left',
- 'float: left;',
- "Moves the element to the left side of its container.",
- ],
- [
- '.float-none',
- 'float: none;',
- "Removes any previously defined float value.",
- ],
- [
- '.clearfix',
- "&::after {\n content: \"\";\n display: table;\n clear: both;\n}",
- "Clear any floats within an element.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'float',
- 'property' => 'float',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md
deleted file mode 100644
index ed821deba91c..000000000000
--- a/docs/source/docs/font-weight.blade.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-extends: _layouts.documentation
-title: "Font Weight"
-description: "Utilities for controlling the font weight of an element."
-features:
- responsive: true
- customizable: true
- hover: true
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.font-hairline',
- 'font-weight: 100;',
- 'Set the font weight of an element to hairline.',
- ],
- [
- '.font-thin',
- 'font-weight: 200;',
- 'Set the font weight of an element to thin.',
- ],
- [
- '.font-light',
- 'font-weight: 300;',
- 'Set the font weight of an element to light.',
- ],
- [
- '.font-normal',
- 'font-weight: 400;',
- 'Set the font weight of an element to normal.',
- ],
- [
- '.font-medium',
- 'font-weight: 500;',
- 'Set the font weight of an element to medium.',
- ],
- [
- '.font-semibold',
- 'font-weight: 600;',
- 'Set the font weight of an element to semibold.',
- ],
- [
- '.font-bold',
- 'font-weight: 700;',
- 'Set the font weight of an element to bold.',
- ],
- [
- '.font-extrabold',
- 'font-weight: 800;',
- 'Set the font weight of an element to extrabold.',
- ],
- [
- '.font-black',
- 'font-weight: 900;',
- 'Set the font weight of an element to black.',
- ],
- ]
-])
-
-## Hover
-
-In addition to the standard responsive variations, font weight utilities also come in `hover:` variations that apply the given font weight on hover.
-
-@component('_partials.code-sample')
-
-@endcomponent
-
-Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
-
-```html
-Link
-```
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'font weight',
- 'property' => 'fontWeights',
- ],
- 'variants' => [
- 'responsive',
- 'hover',
- ],
-])
diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md
deleted file mode 100644
index d08385d6e53a..000000000000
--- a/docs/source/docs/fonts.blade.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-extends: _layouts.documentation
-title: "Font Families"
-description: "Utilities for controlling the font family of an element."
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.font-sans',
- "font-family:\n system-ui,\n BlinkMacSystemFont,\n -apple-system,\n Segoe UI,\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n Fira Sans,\n Droid Sans,\n Helvetica Neue,\n sans-serif;",
- 'Set the font family to the sans font stack.',
- ],
- [
- '.font-serif',
- "font-family:\n Constantia,\n Lucida Bright,\n Lucidabright,\n Lucida Serif,\n Lucida,\n DejaVu Serif,\n Bitstream Vera Serif,\n Liberation Serif,\n Georgia,\n serif;",
- 'Set the font family to the serif font stack.',
- ],
- [
- '.font-mono',
- "font-family:\n Menlo,\n Monaco,\n Consolas,\n Liberation Mono,\n Courier New,\n monospace;",
- 'Set the font family to the mono font stack.',
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'font',
- 'property' => 'fonts',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md
deleted file mode 100644
index 3aa0b4d1595c..000000000000
--- a/docs/source/docs/forms.blade.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-extends: _layouts.documentation
-title: "Forms"
-description: "Utilities for styling form controls."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.appearance-none',
- 'appearance: none;',
- "Remove any special styling applied to an element by the browser.",
- ],
- ]
-])
-
-### Custom Select
-
-Form controls are great candidates for component classes, but just for fun, here's how you can build a fully custom select menu with just utility classes:
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-
-
-
-
-
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'appearance',
- 'property' => 'appearance',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md
deleted file mode 100644
index e317f388cc38..000000000000
--- a/docs/source/docs/functions-and-directives.blade.md
+++ /dev/null
@@ -1,280 +0,0 @@
----
-extends: _layouts.documentation
-title: "Functions & Directives"
-description: null
----
-
-Tailwind exposes a few custom CSS functions and directives that can be used in your actual CSS files.
-
-### `@@tailwind`
-
-Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and `screens` styles into your CSS. Here's a full example of how you might do this:
-
-```less
-/**
- * This injects Tailwind's base styles, which is a combination of
- * Normalize.css and some additional base styles.
- *
- * You can see the styles here:
- * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
- */
-@@tailwind preflight;
-
-/**
- * This injects all of Tailwind's utility classes, generated based on your
- * config file.
- */
-@@tailwind utilities;
-
-/**
- * Use this directive to control where Tailwind injects the responsive
- * variations of each utility.
- *
- * If omitted, Tailwind will append these classes to the very end of
- * your stylesheet by default.
- */
- @@tailwind screens;
-```
-
-### `@@apply`
-
-Use `@@apply` to mixin the contents of existing classes into your custom CSS.
-
-This is extremely useful when you find a common utility pattern in your HTML that you'd like to extract to a new component.
-
-```less
-.btn {
- @@apply .font-bold .py-2 .px-4 .rounded;
-}
-.btn-blue {
- @@apply .bg-blue .text-white;
-}
-.btn-blue:hover {
- @@apply .bg-blue-dark;
-}
-```
-
-Rules can listed on a single line or with multiple calls to `@@apply`:
-
-```less
-.btn {
- @@apply .font-bold;
- @@apply .py-2;
- @@apply .px-4;
- @@apply .rounded;
-}
-```
-
-You can mix `@@apply` declarations with normal CSS declarations too of course:
-
-```less
-.btn:hover {
- @@apply .bg-blue-dark;
- transform: translateY(-1px);
-}
-```
-
-Any rules mixed in with `@@apply` will have `!important` **removed** by default to avoid specificity issues:
-
-```less
-// Input
-.foo {
- @@apply .bar;
-}
-
-.bar {
- color: blue !important;
-}
-
-// Output
-.foo {
- color: blue;
-}
-
-.bar {
- color: blue !important;
-}
-```
-
-If you'd like to `@@apply` an existing class and make it `!important`, simply add `!important` to the end of the declaration:
-
-
-```less
-// Input
-.btn {
- @@apply .font-bold .py-2 .px-4 .rounded !important;
-}
-
-// Output
-.btn {
- font-weight: 700 !important;
- padding-top: .5rem !important;
- padding-bottom: .5rem !important;
- padding-right: 1rem !important;
- padding-left: 1rem !important;
- border-radius: .25rem !important;
-}
-```
-
-Note that `@@apply` **will not work** for mixing in hover, focus, or responsive variants of another utility. Instead, mix in the plain version of that utility into the appropriate pseudo-selector or a new media query:
-
-```less
-// Won't work:
-.btn {
- @@apply .block .bg-red;
- @@apply .md:inline-block;
- @@apply .hover:bg-blue;
-}
-
-// Do this instead:
-.btn {
- @@apply .block .bg-red;
-}
-.btn:hover {
- @@apply .bg-blue;
-}
-@@screen md {
- .btn {
- @@apply .inline-block;
- }
-}
-```
-
-### `@variants`
-
-You can generate `responsive`, `hover`, `focus`, and `group-hover` versions of your own utilities by wrapping their definitions in the `@variants` directive
-
-```less
-@@variants hover, focus {
- .banana {
- color: yellow;
- }
- .chocolate {
- color: brown;
- }
-}
-```
-
-This will generate the following CSS:
-
-```less
-.banana {
- color: yellow;
-}
-.chocolate {
- color: brown;
-}
-.focus\:banana:focus {
- color: yellow;
-}
-.focus\:chocolate:focus {
- color: brown;
-}
-.hover\:banana:hover {
- color: yellow;
-}
-.hover\:chocolate:hover {
- color: brown;
-}
-```
-
-The `@variants` at-rule supports all of the values that are supported in the `modules` section of your config file:
-
-- `responsive`
-- `hover`
-- `focus`
-- `group-hover`
-
-### `@@responsive`
-
-You can generate responsive versions of your own classes by wrapping their definitions in the `@responsive` directive:
-
-```less
-@@responsive {
- .bg-gradient-brand {
- background-image: linear-gradient(blue, green);
- }
-}
-```
-
-Using the default breakpoints, this would generate these classes:
-
-```less
-.bg-gradient-brand {
- background-image: linear-gradient(blue, green);
-}
-
-// ...
-
-@@media (min-width: 576px) {
- .sm\:bg-gradient-brand {
- background-image: linear-gradient(blue, green);
- }
- // ...
-}
-
-@@media (min-width: 768px) {
- .md\:bg-gradient-brand {
- background-image: linear-gradient(blue, green);
- }
- // ...
-}
-
-@@media (min-width: 992px) {
- .lg\:bg-gradient-brand {
- background-image: linear-gradient(blue, green);
- }
- // ...
-}
-
-@@media (min-width: 1200px) {
- .xl\:bg-gradient-brand {
- background-image: linear-gradient(blue, green);
- }
- // ...
-}
-```
-
-The responsive versions will be added to Tailwind's existing media queries **at the end of your stylesheet.** This makes sure that classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property.
-
-### `@@screen`
-
-The `@@screen` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.
-
-For example, say you have a `sm` breakpoint at `576px` and you need to write some custom CSS that references this breakpoint.
-
-Instead of writing a raw media query that duplicates that value like this:
-
-```less
-{{ '@media (min-width: 576px) {' }}
- /* ... */
-}
-```
-
-...you can use the `@@screen` directive and reference the breakpoint by name:
-
-```less
-@@screen sm {
- /* ... */
-}
-```
-
-### `config()`
-
-While it's recommended to use the `@@apply` directive to compose custom CSS out of existing utility classes whenever possible, sometimes you need direct access to your Tailwind config values.
-
-Use the `config()` function to access your Tailwind config values using dot notation:
-
-```less
-// Source
-.error {
- font-size: config('textSizes.xs');
- color: config('colors.red-darker');
-}
-
-// Output
-.error {
- font-size: .75rem;
- color: #a61611;
-}
-```
diff --git a/docs/source/docs/height.blade.md b/docs/source/docs/height.blade.md
deleted file mode 100644
index 87534acfb250..000000000000
--- a/docs/source/docs/height.blade.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-extends: _layouts.documentation
-title: "Height"
-description: "Utilities for setting the height of an element"
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'scroll' => false,
- 'rows' => [
- [
- '.h-1',
- 'height: 0.25rem;',
- "Set the element's height to 0.25rem.",
- ],
- [
- '.h-2',
- 'height: 0.5rem;',
- "Set the element's height to 0.5rem.",
- ],
- [
- '.h-3',
- 'height: 0.75rem;',
- "Set the element's height to 0.75rem.",
- ],
- [
- '.h-4',
- 'height: 1rem;',
- "Set the element's height to 1rem.",
- ],
- [
- '.h-6',
- 'height: 1.5rem;',
- "Set the element's height to 1.5rem.",
- ],
- [
- '.h-8',
- 'height: 2rem;',
- "Set the element's height to 2rem.",
- ],
- [
- '.h-10',
- 'height: 2.5rem;',
- "Set the element's height to 2.5rem.",
- ],
- [
- '.h-12',
- 'height: 3rem;',
- "Set the element's height to 3rem.",
- ],
- [
- '.h-16',
- 'height: 4rem;',
- "Set the element's height to 4rem.",
- ],
- [
- '.h-24',
- 'height: 6rem;',
- "Set the element's height to 6rem.",
- ],
- [
- '.h-32',
- 'height: 8rem;',
- "Set the element's height to 8rem.",
- ],
- [
- '.h-48',
- 'height: 12rem;',
- "Set the element's height to 12rem.",
- ],
- [
- '.h-64',
- 'height: 16rem;',
- "Set the element's height to 16rem.",
- ],
- [
- '.h-auto',
- 'height: auto;',
- "Set the element's height to auto.",
- ],
- [
- '.h-px',
- 'height: 1px;',
- "Set the element's height to 1px.",
- ],
- [
- '.h-full',
- 'height: 100%;',
- "Set the element's height to 100%.",
- ],
- [
- '.h-screen',
- 'height: 100vh;',
- "Set the element's height to 100vh.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'height',
- 'property' => 'height',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/installation.blade.md b/docs/source/docs/installation.blade.md
deleted file mode 100644
index 5b09d8db783c..000000000000
--- a/docs/source/docs/installation.blade.md
+++ /dev/null
@@ -1,211 +0,0 @@
----
-extends: _layouts.documentation
-title: "Installation"
-description: "Quick start guide for installing and configuring Tailwind CSS."
----
-
-## CDN
-
-Before getting started please note, **many of the features that make Tailwind CSS great are not available using the CDN builds.** To take full advantage of Tailwind's features, [install Tailwind via npm](#npm).
-
-To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:
-
-```html
-
-```
-
-Or if you'd like to pull in the base styles separate from the utility classes:
-
-```html
-
-
-
-
-
-```
-
-## NPM
-
-For most projects (and to take advantage of Tailwind's customization features), you'll want to install Tailwind via npm.
-
-### 1. Install Tailwind via npm
-
-Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
-
-
-
# Using npm
-
npm install tailwindcss--save-dev
-
# Using Yarn
-
yarn add tailwindcss--dev
-
-
-### 2. Create a Tailwind config file
-
-Tailwind is configured almost entirely in plain JavaScript. To do this you'll need to generate a Tailwind config file for your project. We recommend creating a `tailwind.js` file in your project's root.
-
-We've provided a CLI utility to do this easily:
-
-
-
./node_modules/.bin/tailwind init[filename]
-
-
-### 3. Use Tailwind in your CSS
-
-Use the `@@tailwind` directive to inject Tailwind's `preflight` and `utilities` styles into your CSS.
-
-To avoid specificity issues, we highly recommend structuring your main stylesheet like this:
-
-```less
-/**
- * This injects Tailwind's base styles, which is a combination of
- * Normalize.css and some additional base styles.
- *
- * You can see the styles here:
- * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
- *
- * If using `postcss-import`, you should import this line from it's own file:
- *
- * @@import "./tailwind-preflight.css";
- *
- * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
- */
-@@tailwind preflight;
-
-/**
- * Here you would add any of your custom component classes; stuff that you'd
- * want loaded *before* the utilities so that the utilities could still
- * override them.
- *
- * Example:
- *
- * .btn { ... }
- * .form-input { ... }
- *
- * Or if using a preprocessor or `postcss-import`:
- *
- * @@import "components/buttons";
- * @@import "components/forms";
- */
-
-/**
- * This injects all of Tailwind's utility classes, generated based on your
- * config file.
- *
- * If using `postcss-import`, you should import this line from it's own file:
- *
- * @@import "./tailwind-utilities.css";
- *
- * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
- */
-@@tailwind utilities;
-
-/**
- * Here you would add any custom utilities you need that don't come out of the
- * box with Tailwind.
- *
- * Example :
- *
- * .bg-pattern-graph-paper { ... }
- * .skew-45 { ... }
- *
- * Or if using a preprocessor or `postcss-import`:
- *
- * @@import "utilities/background-patterns";
- * @@import "utilities/skew-transforms";
- */
-```
-
-### 4. Process your CSS with Tailwind
-
-#### Using Tailwind CLI
-
-For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:
-
-
-
-#### Using Tailwind with PostCSS
-
-For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain.
-
-We've included the Tailwind-specific instructions for a few popular tools below, but for instructions on getting started with PostCSS in general, see the [PostCSS documentation](https://github.com/postcss/postcss#usage).
-
-#### Webpack
-
-Add `tailwindcss` as a plugin in your `postcss.config.js` file, passing the path to your config file:
-
-```js
-var tailwindcss = require('tailwindcss');
-module.exports = {
- plugins: [
- // ...
- tailwindcss('./path/to/your/tailwind-config.js'),
- require('autoprefixer'),
- // ...
- ]
-}
-```
-
-For a complete example, check out our [webpack-starter](https://github.com/tailwindcss/webpack-starter) template.
-
-#### Gulp
-
-Add `tailwindcss` to the list of plugins you pass to [gulp-postcss](https://github.com/postcss/gulp-postcss), passing the path to your config file:
-
-```js
-gulp.task('css', function () {
- var postcss = require('gulp-postcss');
- var tailwindcss = require('tailwindcss');
-
- return gulp.src('src/styles.css')
- // ...
- .pipe(postcss([
- // ...
- tailwindcss('./path/to/your/tailwind-config.js'),
- require('autoprefixer'),
- // ...
- ]))
- // ...
- .pipe(gulp.dest('build/'));
-});
-```
-
-#### Laravel Mix
-
-If you're writing your project in plain CSS, use Mix's `postCss` method to process your CSS. Include `tailwindcss` as a plugin and pass the path to your config file:
-
-```js
-var tailwindcss = require('tailwindcss');
-
-mix.postCss('resources/assets/css/main.css', 'public/css', [
- tailwindcss('./path/to/your/tailwind-config.js'),
-]);
-```
-
-If you're using a preprocessor, use the `options` method to add `tailwindcss` as a PostCSS plugin:
-
-```js
-var tailwindcss = require('tailwindcss');
-
-mix.less('resources/assets/less/app.less', 'public/css')
- .options({
- postCss: [
- tailwindcss('./path/to/your/tailwind-config.js'),
- ]
- });
-```
-
-**Note for Sass users:** Due to [an unresolved issue](https://github.com/bholloway/resolve-url-loader/issues/28) with one of Mix's dependencies, to use Sass with Tailwind you'll need to disable `processCssUrls`:
-
-```js
-var tailwindcss = require('tailwindcss');
-
-mix.sass('resources/assets/sass/app.scss', 'public/css')
- .options({
- processCssUrls: false,
- postCss: [ tailwindcss('./path/to/your/tailwind-config.js') ],
- });
-```
-
-For more information on what this feature does and the implications of disabling it, [see the Laravel Mix documentation](https://github.com/JeffreyWay/laravel-mix/blob/master/docs/css-preprocessors.md#css-url-rewriting).
diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md
deleted file mode 100644
index 218b6a0970ad..000000000000
--- a/docs/source/docs/letter-spacing.blade.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-extends: _layouts.documentation
-title: "Letter Spacing"
-description: "Utilities for controlling the tracking (letter spacing) of an element."
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.tracking-tight',
- 'letter-spacing: -0.05em;',
- 'Set the letter spacing of an element to -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.',
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'tracking',
- 'property' => 'tracking',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md
deleted file mode 100644
index fd2fc8d37309..000000000000
--- a/docs/source/docs/line-height.blade.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-extends: _layouts.documentation
-title: "Line Height"
-description: "Utilities for controlling the leading (line height) of an element."
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.leading-none',
- 'line-height: 1;',
- 'Set the line height of an element to 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.',
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'leading',
- 'property' => 'leading',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md
deleted file mode 100644
index a79b17e91c02..000000000000
--- a/docs/source/docs/lists.blade.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-extends: _layouts.documentation
-title: "Lists"
-description: "Utilities for controlling list styles."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.list-reset',
- "list-style: none;\npadding: 0;",
- "Disable default browser styling for lists and list items.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'list',
- 'property' => 'lists',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/max-height.blade.md b/docs/source/docs/max-height.blade.md
deleted file mode 100644
index 6d1325dd2f2d..000000000000
--- a/docs/source/docs/max-height.blade.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-extends: _layouts.documentation
-title: "Max-Height"
-description: "Utilities for setting the maximum height of an element"
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'scroll' => false,
- 'rows' => [
- [
- '.max-h-full',
- 'max-height: 100%;',
- "Set the element's maximum height to 100%.",
- ],
- [
- '.max-h-screen',
- 'max-height: 100vh;',
- "Set the element's maximum height to 100vh.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'max-height',
- 'property' => 'maxHeight',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/max-width.blade.md b/docs/source/docs/max-width.blade.md
deleted file mode 100644
index dc1903486e5a..000000000000
--- a/docs/source/docs/max-width.blade.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-extends: _layouts.documentation
-title: "Max-Width"
-description: "Utilities for setting the maximum width of an element"
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'scroll' => false,
- 'rows' => [
- [
- '.max-w-xs',
- 'max-width: 20rem;',
- "Set the element's maximum width to 20rem.",
- ],
- [
- '.max-w-sm',
- 'max-width: 30rem;',
- "Set the element's maximum width to 30rem.",
- ],
- [
- '.max-w-md',
- 'max-width: 40rem;',
- "Set the element's maximum width to 40rem.",
- ],
- [
- '.max-w-lg',
- 'max-width: 50rem;',
- "Set the element's maximum width to 50rem.",
- ],
- [
- '.max-w-xl',
- 'max-width: 60rem;',
- "Set the element's maximum width to 60rem.",
- ],
- [
- '.max-w-2xl',
- 'max-width: 70rem;',
- "Set the element's maximum width to 70rem.",
- ],
- [
- '.max-w-3xl',
- 'max-width: 80rem;',
- "Set the element's maximum width to 80rem.",
- ],
- [
- '.max-w-4xl',
- 'max-width: 90rem;',
- "Set the element's maximum width to 90rem.",
- ],
- [
- '.max-w-5xl',
- 'max-width: 100rem;',
- "Set the element's maximum width to 100rem.",
- ],
- [
- '.max-w-full',
- 'max-width: 100%;',
- "Set the element's maximum width to 100%.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'max-width',
- 'property' => 'maxWidth',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/min-height.blade.md b/docs/source/docs/min-height.blade.md
deleted file mode 100644
index 6cfbbc4cf2fd..000000000000
--- a/docs/source/docs/min-height.blade.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-extends: _layouts.documentation
-title: "Min-Height"
-description: "Utilities for setting the minimum height of an element"
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'scroll' => false,
- 'rows' => [
- [
- '.min-h-0',
- 'min-height: 0;',
- "Set the element's minimum height to 0.",
- ],
- [
- '.min-h-full',
- 'min-height: 100%;',
- "Set the element's minimum height to 100%.",
- ],
- [
- '.min-h-screen',
- 'min-height: 100vh;',
- "Set the element's minimum height to 100vh.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'min-height',
- 'property' => 'minHeight',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/min-width.blade.md b/docs/source/docs/min-width.blade.md
deleted file mode 100644
index 3eb1562e74d1..000000000000
--- a/docs/source/docs/min-width.blade.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-extends: _layouts.documentation
-title: "Min-Width"
-description: "Utilities for setting the minimum width of an element"
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'scroll' => false,
- 'rows' => [
- [
- '.min-w-0',
- 'min-width: 0;',
- "Set the element's minimum width to 0.",
- ],
- [
- '.min-w-full',
- 'min-width: 100%;',
- "Set the element's minimum width to 100%.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'min-width',
- 'property' => 'minWidth',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md
deleted file mode 100644
index fdfe1a94b29a..000000000000
--- a/docs/source/docs/opacity.blade.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-extends: _layouts.documentation
-title: "Opacity"
-description: "Utilities for controlling the opacity of an element."
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.opacity-100',
- 'opacity: 1;',
- "Set the opacity of an element to 100%.",
- ],
- [
- '.opacity-75',
- 'opacity: .75;',
- "Set the opacity of an element to 75%.",
- ],
- [
- '.opacity-50',
- 'opacity: .5;',
- "Set the opacity of an element to 50%.",
- ],
- [
- '.opacity-25',
- 'opacity: .25;',
- "Set the opacity of an element to 25%.",
- ],
- [
- '.opacity-0',
- 'opacity: 0;',
- "Set the opacity of an element to 0%.",
- ],
- ]
-])
-
-## Example
-
-@component('_partials.code-sample')
-
- @foreach ($page->config['opacity']->reverse() as $name => $value)
-
.opacity-{{ $name }}
- @endforeach
-
-@slot('code')
-@foreach ($page->config['opacity']->reverse() as $name => $value)
-
.opacity-{{ $name }}
-@endforeach
-@endslot
-@endcomponent
-
-## Responsive
-
-To control the opacity of an element at a specific breakpoint, add a `{screen}:` prefix to any existing opacity utility. For example, use `md:opacity-50` to apply the `opacity-50` utility at only medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
-
-@endslot
-@slot('sm')
-
-
-
-@endslot
-@slot('md')
-
-
-
-@endslot
-@slot('lg')
-
-
-
-@endslot
-@slot('xl')
-
-
-
-@endslot
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-By default Tailwind provides five opacity utilities based on a simple numeric scale. You change, add, or remove these by editing the `opacity` section of your Tailwind config.
-
-@component('_partials.customized-config', ['key' => 'opacity'])
- '0': '0',
-- '25': '.25',
-- '50': '.5',
-- '75': '.75',
-+ '10': '.1',
-+ '20': '.2',
-+ '30': '.3',
-+ '40': '.4',
-+ '50': '.5',
-+ '60': '.6',
-+ '70': '.7',
-+ '80': '.8',
-+ '90': '.9',
- '100': '1',
-@endcomponent
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'opacity',
- 'property' => 'opacity',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md
deleted file mode 100644
index 7487e721c731..000000000000
--- a/docs/source/docs/overflow.blade.md
+++ /dev/null
@@ -1,233 +0,0 @@
----
-extends: _layouts.documentation
-title: "Overflow"
-description: "Utilities for controlling how an element handles content that is too large for the container."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.overflow-visible',
- 'overflow: visible;',
- "Don't clip content that overflows the element.",
- ],
- [
- '.overflow-auto',
- 'overflow: auto;',
- "Add scrollbars to an element if needed.",
- ],
- [
- '.overflow-hidden',
- 'overflow: hidden;',
- "Clip any content that overflows the element.",
- ],
- [
- '.overflow-x-scroll',
- 'overflow-x: auto;',
- "Allow horizontal scrolling if needed.",
- ],
- [
- '.overflow-y-scroll',
- 'overflow-y: auto;',
- "Allow vertical scrolling if needed.",
- ],
- [
- '.overflow-scroll',
- 'overflow: scroll;',
- "Add scrollbars to an element.",
- ],
- [
- '.scrolling-touch',
- '-webkit-overflow-scrolling: touch;',
- "Use momentum-based scrolling on touch devices.",
- ],
- [
- '.scrolling-auto',
- '-webkit-overflow-scrolling: auto;',
- "Use \"regular\" scrolling on touch devices.",
- ],
- ]
-])
-
-### Visible Default
-
-Use `.overflow-visible` to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.
-
-@component('_partials.code-sample')
-
-
- 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...
-@endslot
-@endcomponent
-
-### Auto
-
-Use `.overflow-auto` to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike `.overflow-scroll`, which always show scrollbars, this utility will only show them if scrolling is necessary.
-
-@component('_partials.code-sample')
-
- 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...
-@endslot
-@endcomponent
-
-### Hidden
-
-Use `.overflow-hidden` to clip any content within an element that overflows the bounds of that element.
-
-@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...
-@endslot
-@endcomponent
-
-### Scroll horizontally
-
-Use `.overflow-x-scroll` to allow horizontal scrolling if needed.
-
-@component('_partials.code-sample')
-
-@endslot
-@endcomponent
-
-### Scroll vertically
-
-Use `.overflow-y-scroll` to allow vertical scrolling if needed.
-
-@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...
-@endslot
-@endcomponent
-
-### Scroll in all directions
-
-Use `.overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems, like MacOS, hide unnecessary scrollbars regardless of this setting.
-
-@component('_partials.code-sample')
-
- 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.
-
-
-
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!
-
-@slot('code')
-
QrLmmW69vMQD...
-
Lorem ipsum dolor sit amet...
-
Loremipsumdolorsitamet...
-@endslot
-@endcomponent
-
-### Momentum-based scrolling on touch devices
-
-Use `.scrolling-touch` to use momentum-based scrolling (where supported) on touch devices.
-
-@component('_partials.code-sample')
-
- 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...
-@endslot
-@endcomponent
-
-Use `.scrolling-auto` to use normal non-momentum-based scrolling on touch devices.
-
-This is mostly useful for undoing `.scrolling-touch` at larger screen sizes.
-
-@component('_partials.code-sample')
-
- 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...
-@endslot
-@endcomponent
-
-## Responsive
-
-To apply an overflow utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:overflow-scroll` to an element would apply the `overflow-scroll` utility at medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
- 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.
-
-@endslot
-@slot('sm')
-
- 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.
-@endslot
-@slot('md')
-
- 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.
-@endslot
-@slot('lg')
-
- 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.
-@endslot
-@slot('xl')
-
- 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.
-@endslot
-@slot('code')
-
- Lorem ipsum dolor sit amet...
-
-@endslot
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'overflow',
- 'property' => 'overflow',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md
deleted file mode 100644
index a8ae844ff377..000000000000
--- a/docs/source/docs/pointer-events.blade.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-extends: _layouts.documentation
-title: "Pointer Events"
-description: "Utilities for controlling whether an element responds to pointer events."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.pointer-events-none',
- 'pointer-events: none;',
- "Make element not react to pointer events, like :hover or click.",
- ],
- [
- '.pointer-events-auto',
- 'pointer-events: auto;',
- "Make element react to pointer events, like :hover or click.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'pointer event',
- 'property' => 'pointerEvents',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md
deleted file mode 100644
index 35669c0628d2..000000000000
--- a/docs/source/docs/positioning.blade.md
+++ /dev/null
@@ -1,418 +0,0 @@
----
-extends: _layouts.documentation
-title: "Positioning"
-descriptioj: "Utilities for controlling how an element is positioned in the DOM."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.static',
- "position: static;",
- "Position an element according to the normal flow of the document.",
- ],
- [
- '.fixed',
- "position: fixed;",
- "Position an element relative to the browser window.",
- ],
- [
- '.absolute',
- "position: absolute;",
- "Position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.",
- ],
- [
- '.relative',
- "position: relative;",
- "Position an element according to the normal flow of the document.",
- ],
- [
- '.pin-t',
- "top: 0;",
- "Anchor absolutely positioned element to the top edge of the nearest positioned parent.",
- ],
- [
- '.pin-r',
- "right: 0;",
- "Anchor absolutely positioned element to the right edge of the nearest positioned parent.",
- ],
- [
- '.pin-b',
- "bottom: 0;",
- "Anchor absolutely positioned element to the bottom edge of the nearest positioned parent.",
- ],
- [
- '.pin-l',
- "left: 0;",
- "Anchor absolutely positioned element to the left edge of the nearest positioned parent.",
- ],
- [
- '.pin-y',
- "top: 0;\nbottom: 0;",
- "Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.",
- ],
- [
- '.pin-x',
- "right: 0;\nleft: 0;",
- "Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.",
- ],
- [
- '.pin',
- "top: 0;\nright: 0;\nbottom: 0;\nleft: 0;",
- "Anchor absolutely positioned element to all the edges of the nearest positioned parent.",
- ],
- ]
-])
-
-### Static Default
-
-Use `.static` to position an element according to the normal flow of the document.
-
-Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.
-
-@component('_partials.code-sample')
-
-
-
Static parent
-
-
Absolute child
-
-
-
-
-@slot('code')
-
- Static parent
-
- Absolute child
-
-
-@endslot
-@endcomponent
-
-### Relative
-
-Use `.relative` to position an element according to the normal flow of the document.
-
-Offsets are calculated relative to the element's normal position and the element *will* act as a position reference for absolutely positioned children.
-
-@component('_partials.code-sample')
-
-
-
Relative parent
-
-
Absolute child
-
-
-
-
-@slot('code')
-
- Relative parent
-
- Absolute child
-
-
-@endslot
-@endcomponent
-
-### Absolute
-
-Use `.absolute` to position an element *outside* of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.
-
-Offsets are calculated relative to the nearest parent that has a position other than `static`, and the element *will* act as a position reference for other absolutely positioned children.
-
-@component('_partials.code-sample')
-
-
With static positioning
-
-
Relative parent
-
-
Static parent
-
-
Static child
-
-
-
Static sibling
-
-
-
-
-
With absolute positioning
-
-
Relative parent
-
-
Static parent
-
-
Absolute child
-
-
-
Static sibling
-
-
-
-
-@slot('code')
-
- Relative parent
-
- Static parent
-
- Absolute child
-
-
- Static sibling
-
-
-
-@endslot
-@endcomponent
-
-### Fixed
-
-Use `.fixed` to position an element relative to the browser window.
-
-Offsets are calculated relative to the viewport and the element *will* act as a position reference for absolutely positioned children.
-
-@component('_partials.code-sample')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Fixed child
-
- Absolute child
-
-
-
-
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.
-
-
-
-
-@slot('code')
-
-
- Fixed child
-
- Absolute child
-
-
-
- Scroll me!
-
- Lorem ipsum...
-
-@endslot
-@endcomponent
-
-### Pinning edges
-
-Use the `.pin{-edge?}` utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent.
-
-Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably find that these are all you need to precisely control absolutely positioned elements.
-
-
-
-
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')
-
-
-
.pin-x.pin-t
-
-
-
-
-
-
.pin-y.pin-r
-
-
-
-
-
-
.pin-x.pin-b
-
-
-
-
-
-
.pin-y.pin-l
-
-
-
-
-
-
.pin
-
-
-
-
-
-
-
-
.pin-l.pin-t
-
-
-
-
-
-
.pin-t.pin-r
-
-
-
-
-
-
.pin-r.pin-b
-
-
-
-
-
-
.pin-b.pin-l
-
-
-
-
-
-
-
-@slot('code')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@endslot
-@endcomponent
-
-## Responsive
-
-To position an element only at a specific breakpoint, add a `{screen}:` prefix to any existing positioning utility. For example, adding the class `md:absolute` to an element would apply the `absolute` utility at medium screen sizes and above, and adding `lg:pin-y` would apply `pin-y` at large screens and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
Responsive element
-
-@endslot
-
-@slot('sm')
-
-
Responsive element
-
-@endslot
-
-@slot('md')
-
-
Responsive element
-
-@endslot
-
-@slot('lg')
-
-
Responsive element
-
-@endslot
-
-@slot('xl')
-
-
Responsive element
-
-@endslot
-
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'positioning',
- 'property' => 'position',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md
deleted file mode 100644
index a4c1f89aeddd..000000000000
--- a/docs/source/docs/resize.blade.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-extends: _layouts.documentation
-title: "Resize"
-description: "Utilities for controlling how an element can be resized."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.resize-none',
- 'resize: none;',
- "Make an element not resizable.",
- ],
- [
- '.resize',
- 'resize: both;',
- "Make an element resizable along both axes.",
- ],
- [
- '.resize-y',
- 'resize: vertical;',
- "Make an element resizable vertically.",
- ],
- [
- '.resize-x',
- 'resize: horizontal;',
- "Make an element resizable horizontally.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'resizing',
- 'property' => 'resize',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/responsive-design.blade.md b/docs/source/docs/responsive-design.blade.md
deleted file mode 100644
index db2258d36293..000000000000
--- a/docs/source/docs/responsive-design.blade.md
+++ /dev/null
@@ -1,145 +0,0 @@
----
-extends: _layouts.documentation
-title: "Responsive Design"
-description: null
----
-
-Tailwind allows you to build responsive designs in the same way you build the rest of your design — using utility classes. Every utility in Tailwind is also available in screen-size specific variations. For example, the `.font-bold` utility can be used on small screen sizes using the `.sm:font-bold` class, on medium screen sizes using the `.md:font-bold` class, on large screen sizes using the `.lg:font-bold` class and on extra large screen sizes using the `.xl:font-bold` class.
-
-This is done using predefined screen sizes (media query breakpoints), each of which are given a unique name like `sm`, `md`, `lg` and `xl`. By default Tailwind takes a "mobile first" approach, where each screen size represents a minimum viewport width. Any classes you apply at smaller screen sizes are also applied to larger sizes, unless of course you override them, which is the whole point! This approach, while simple, is actually very powerful and can be used to build complex, beautiful, responsive designs.
-
-## Responsive example
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
Tailwind
-
-@endslot
-@slot('sm')
-
-
Tailwind
-
-@endslot
-@slot('md')
-
-
Tailwind
-
-@endslot
-@slot('lg')
-
-
Tailwind
-
-@endslot
-@slot('xl')
-
-
Tailwind
-
-@endslot
-@slot('code')
-
- ...
-
-@endslot
-@endcomponent
-
-## Customizing screens
-
-You define your project's screen sizes in your Tailwind config under the `screens` key. Screens in Tailwind are essentially CSS media queries. If you provide a single value for a screen, Tailwind will treat this as the minimum screen size value for that screen breakpoint.
-
-Here are the default screen sizes:
-
-```js
-screens: {
- 'sm': '576px',
- // => @media (min-width: 576px) { ... }
-
- 'md': '768px',
- // => @media (min-width: 768px) { ... }
-
- 'lg': '992px',
- // => @media (min-width: 992px) { ... }
-
- 'xl': '1200px',
- // => @media (min-width: 1200px) { ... }
-},
-```
-
-Feel free to have as few or as many screens as you want, naming them in whatever way you'd prefer for your project.
-
-For example, you could use device names instead of sizes:
-
-```js
-screens: {
- 'tablet': '576px',
- // => @media (min-width: 576px) { ... }
-
- 'laptop': '992px',
- // => @media (min-width: 992px) { ... }
-
- 'desktop': '1200px',
- // => @media (min-width: 1200px) { ... }
-},
-```
-
-These screen names will be reflected in your utilities, so your `.bg-red` utilities would now look like this:
-
-```css
-.bg-red { background-color: config('colors.red'); }
-
-@media (min-width: 576px) {
- .tablet\:bg-red { background-color: config('colors.red'); }
-}
-
-@media (min-width: 992px) {
- .laptop\:bg-red { background-color: config('colors.red'); }
-}
-
-@media (min-width: 1200px) {
- .desktop\:bg-red { background-color: config('colors.red'); }
-}
-```
-
-## Advanced screens
-
-Tailwind also allows for more complex screen definitions, which can be useful in certain situations. For example, if you wanted to define both the minimum and maximum size for your screens, you could do that like this:
-
-```js
-screens: {
- 'sm': {'min': '576px', 'max': '767px'},
- 'md': {'min': '768px', 'max': '991px'},
- 'lg': {'min': '992px', 'max': '1999px'},
- 'xl': {'min': '1200px'},
-},
-```
-
-You can also provide multiple ranges per screen. This is useful in situations where you have a sidebar navigation and want to maintain consistent content breakpoints, regardless of the navigation being visible or not. Here's an example:
-
-```js
-screens: {
- 'sm': '500px',
- 'md': [
- // Sidebar appears at 768px, so revert to `sm:` styles between 768px
- // and 868px, after which the main content area is wide enough again to
- // apply the `md:` styles.
- {'min': '668px', 'max': '767px'},
- {'min': '868px'}
- ],
- 'lg': '1100px',
- 'xl': '1400px',
-},
-```
-
-## Print screens
-
-As mentioned earlier, screens in Tailwind are essentially just CSS media queries. So while you normally define your screensizes in pixels, it's possible to also define non-regular screens using the `raw` key. Here is an example of how you could use this to create a print-only screen size.
-
-```js
-screens: {
- 'sm': '576px',
- 'md': '768px',
- 'lg': '992px',
- 'xl': '1200px',
- 'print': {'raw': 'print'}
-},
-```
diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md
deleted file mode 100644
index 5dc2a2ad4da7..000000000000
--- a/docs/source/docs/shadows.blade.md
+++ /dev/null
@@ -1,147 +0,0 @@
----
-extends: _layouts.documentation
-title: "Shadows"
-description: "Utilities for controlling the box shadow of an element."
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.shadow',
- "box-shadow:\n 0 2px 4px 0 rgba(0,0,0,0.10);",
- "Apply a small box shadow to an element.",
- ],
- [
- '.shadow-md',
- "box-shadow:\n 0 4px 8px 0 rgba(0,0,0,0.12),\n 0 2px 4px 0 rgba(0,0,0,0.08);",
- "Apply a medium box shadow to an element.",
- ],
- [
- '.shadow-lg',
- "box-shadow:\n 0 15px 30px 0 rgba(0,0,0,0.11),\n 0 5px 15px 0 rgba(0,0,0,0.08);",
- "Apply a large box shadow to an element.",
- ],
- [
- '.shadow-inner',
- "box-shadow:\n inset 0 2px 4px 0 rgba(0,0,0,0.06);",
- "Apply a small inner box shadow to an element.",
- ],
- [
- '.shadow-none',
- "box-shadow: none;",
- "Remove a box shadow from an element.",
- ],
- ]
-])
-
-## Outer shadow
-
-Use the `.shadow`, `.shadow-md`, or `.shadow-lg` utilities to apply different sized outer box shadows to an element.
-
-@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
-
.shadow
-
.shadow-md
-
.shadow-lg
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-## Inner shadow
-
-Use the `.shadow-inner` utility to apply a subtle inset box shadow to an element.
-
-This can be useful for things like form controls or wells.
-
-@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
-
.shadow-inner
-@slot('code')
-
-@endslot
-@endcomponent
-
-## No shadow
-
-Use `.shadow-none` to remove an existing box shadow from an element.
-
-This is most commonly used to remove a shadow that was applied at a smaller breakpoint.
-
-@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
-
.shadow-none
-@slot('code')
-
-@endslot
-@endcomponent
-
-## Responsive
-
-To control the shadow of an element at a specific breakpoint, add a `{screen}:` prefix to any existing shadow utility. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
-
-@endslot
-@slot('sm')
-
-
-
-@endslot
-@slot('md')
-
-
-
-@endslot
-@slot('lg')
-
-
-
-@endslot
-@slot('xl')
-
-
-
-@endslot
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-## Customizing
-
-By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the `shadows` section of your Tailwind config.
-
-If a `default` shadow is provided, it will be used for the non-suffixed `.shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.shadow-2` utility.
-
-@component('_partials.customized-config', ['key' => 'shadows'])
-- default: '0 2px 4px 0 rgba(0,0,0,0.10)',
-- 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
-- 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
-- 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
-+ '1': '0 2px 4px rgba(0,0,0,0.05)',
-+ '2': '0 4px 8px rgba(0,0,0,0.1)',
-+ '3': '0 8px 16px rgba(0,0,0,0.15)',
- 'none': 'none',
-@endcomponent
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'shadow',
- 'property' => 'shadows',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md
deleted file mode 100644
index ebc99e9bcb82..000000000000
--- a/docs/source/docs/spacing.blade.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-extends: _layouts.documentation
-title: "Spacing"
-description: "Utilities for controlling an element's padding and margin."
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-Control an element's padding and margin using the `.p{side?}-{size}`, `.m{side?}-{size}`, and `.-m{side?}-{size}` utilities.
-
-For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.mx-0` would make the horizontal margin zero, and `.-mb-6` would add a `1.5rem` negative margin to the bottom of an element.
-
-
-
-
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)
-
-
-
-## Customizing
-
-### Responsive, Hover, and Focus Variants
-
-By default, only responsive variants are generated for margin, negative margin and padding utilities.
-
-You can control which variants are generated for the list utilities by modifying the `margin`, `negativeMargin` and `padding` property in the `modules` section of your Tailwind config file.
-
-For example, this config will _also_ generate hover and focus variants of the margin utilities, hover variants of the negative margin utilities, and focus variants of the padding utilities:
-
-```js
-{
- // ...
- modules: {
- // ...
- margin: ['responsive', 'hover', 'focus'],
- negativeMargin: ['responsive', 'hover'],
- padding: ['responsive', 'focus'],
- }
-}
-```
-
-### Disabling
-
-If you aren't using the margin, the negative margin, or padding utilities in your project, you can disable them entirely by setting the `margin`, `negativeMargin` and `padding` property to `false` in the `modules` section of your config file:
-
-```js
-{
- // ...
- modules: {
- // ...
- margin: false,
- negativeMargin: false,
- padding: false,
- }
-}
-```
diff --git a/docs/source/docs/state-variants.blade.md b/docs/source/docs/state-variants.blade.md
deleted file mode 100644
index 582b354fe256..000000000000
--- a/docs/source/docs/state-variants.blade.md
+++ /dev/null
@@ -1,132 +0,0 @@
----
-extends: _layouts.documentation
-title: "State Variants"
-description: "Using utilities to style elements on hover, focus, and more."
----
-
-Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it easy to style elements on hover, focus, and more using *state* prefixes.
-
-## Hover
-
-Add the `hover:` prefix to only apply a utility on hover.
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-
-
-@slot('code')
-
-@endslot
-@endcomponent
-
-
-
-
-
-
-
-
By default, hover variants are only generated for background color, border color, font weight, text color, and text style utilities.
-
You can customize this in the modules section of your configuration file.
-
-
-
-
-
-## Focus
-
-Add the `focus:` prefix to only apply a utility on focus.
-
-@component('_partials.code-sample', ['lang' => 'html'])
-
-
-
-
-@slot('code')
-
-@endslot
-@endcomponent
-
-
-
-
-
-
-
-
By default, focus variants are not generated for any utilities.
-
You can customize this in the modules section of your configuration file.
-
-
-
-
-
-## Group Hover
-
-If you need to style a child element when hovering over a specific parent element, add the `.group` class to the parent element and add the `group-hover:` prefix to the utility on the child element.
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'bg-grey-lighter p-8'])
-
-
New Project
-
Create a new project from a variety of starting templates.
-
-
-
-@slot('code')
-
-
New Project
-
Create a new project from a variety of starting templates.
-
-@endslot
-@endcomponent
-
-
-
-
-
-
-
-
By default, group hover variants are not generated for any utilities.
-
You can customize this in the modules section of your configuration file.
-
-
-
-
-## Combining with Responsive Prefixes
-
-State variants are also responsive, meaning you can change an element's hover style for example at different breakpoints.
-
-To apply a state variant responsively, **add the responsive prefix first, before the state prefix.**
-
-```html
-
-```
-
-## State Variants for Custom Utilities
-
-You can generate state variants for your own custom utilities using the `@@variants` directive:
-
-```less
-// Input:
-@@variants hover, focus {
- .banana {
- color: yellow;
- }
-}
-
-// Output:
-.banana {
- color: yellow;
-}
-.focus\:banana:focus {
- color: yellow;
-}
-.hover\:banana:hover {
- color: yellow;
-}
-
-```
-
-For more information, see the [@@variants directive documentation](/docs/functions-and-directives#variants).
diff --git a/docs/source/docs/svg.blade.md b/docs/source/docs/svg.blade.md
deleted file mode 100644
index 6a009f5c2686..000000000000
--- a/docs/source/docs/svg.blade.md
+++ /dev/null
@@ -1,122 +0,0 @@
----
-extends: _layouts.documentation
-title: "SVG"
-description: "Utilities for styling SVG elements."
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.fill-current',
- 'fill: currentColor;',
- 'Set the fill color to the current text color.',
- ],
- [
- '.stroke-current',
- 'stroke: currentColor;',
- 'Set the stroke color to the current text color.',
- ],
- ]
-])
-
-### Fill color
-
-Use `.fill-current` to set the fill color of an SVG to the current text color. This makes it easy to set an element's fill color by combining this class with an existing [text color utility](/docs/text-color).
-
-Useful for styling icon sets like [Zondicons](http://www.zondicons.com/) that are drawn entirely with fills.
-
-@component('_partials.code-sample', ['class' => 'text-center'])
-
-@endcomponent
-
-### Stroke color
-
-Use `.stroke-current` to set the stroke color of an SVG to the current text color. This makes it easy to set an element's stroke color by combining this class with an existing [text color utility](/docs/text-color).
-
-Useful for styling icon sets like [Feather](https://feathericons.com/) that are drawn entirely with strokes.
-
-@component('_partials.code-sample', ['class' => 'text-center'])
-
-@endcomponent
-
-### Sizing
-
-Tailwind doesn't provide SVG-specific sizing utilities, but sizing SVGs is a perfect use case for the existing [width](/docs/width) and [height](/docs/height) utilities.
-
-@component('_partials.code-sample', ['class' => 'flex justify-around items-end'])
-
-
-
-@endcomponent
-
----
-
-## Customizing
-
-### Fill colors
-
-Control which fill utilities Tailwind generates by customizing the `svgFill` key in your Tailwind config file:
-
-@component('_partials.customized-config', ['key' => 'svgFill'])
-- 'current': 'currentColor',
-+ 'red': colors['red'],
-+ 'blue': colors['blue'],
-+ 'green': colors['green'],
-@endcomponent
-
-### Stroke colors
-
-Control which stroke utilities Tailwind generates by customizing the `svgStroke` key in your Tailwind config file:
-
-@component('_partials.customized-config', ['key' => 'svgStroke'])
-- 'current': 'currentColor',
-+ 'red': colors['red'],
-+ 'blue': colors['blue'],
-+ 'green': colors['green'],
-@endcomponent
-
-### Responsive, Hover, and Focus Variants
-
-By default, no responsive, hover, focus, or group-hover variants are generated for fill and stroke utilities.
-
-You can control which variants are generated for both fill and stroke utilities by modifying the `svgFill` and `svgStroke` properties in the `modules` section of your Tailwind config file.
-
-For example, this config will generate responsive and hover variants of the fill utilities and focus variants of the stroke utilities:
-
-```js
-{
- // ...
- modules: {
- // ...
- svgFill: ['responsive', 'hover'],
- svgStroke: ['focus'],
- }
-}
-```
-
-### Disabling
-
-If you aren't using the fill or stroke utilities in your project, you can disable them entirely by setting the `svgFill` and `svgStroke` properties to `false` in the `modules` section of your config file:
-
-```js
-{
- // ...
- modules: {
- // ...
- svgFill: false,
- svgStroke: false,
- }
-}
-```
diff --git a/docs/source/docs/text-alignment.blade.md b/docs/source/docs/text-alignment.blade.md
deleted file mode 100644
index afd8ec3e14ce..000000000000
--- a/docs/source/docs/text-alignment.blade.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-extends: _layouts.documentation
-title: "Text Alignment"
-description: "Utilities for controlling the alignment of text."
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.text-left',
- 'text-align: left;',
- 'Align text to the left.',
- ],
- [
- '.text-center',
- 'text-align: center;',
- 'Align text to the center.',
- ],
- [
- '.text-right',
- 'text-align: right;',
- 'Align text to the right.',
- ],
- [
- '.text-justify',
- 'text-align: justify;',
- 'Justify text.',
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'text alignment',
- 'property' => 'textAlign',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md
deleted file mode 100644
index 0de8f055ad87..000000000000
--- a/docs/source/docs/text-color.blade.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-extends: _layouts.documentation
-title: "Text Color"
-description: "Utilities for controlling the text color of an element."
-features:
- responsive: true
- customizable: true
- hover: true
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => $page->config['colors']->map(function ($value, $name) {
- $class = ".text-{$name}";
- $code = "color: {$value};";
- $color = implode(' ', array_reverse(explode('-', $name)));
- $description = "Set the text color of an element to {$color}.";
- return [
- $class,
- $code,
- $description,
- ];
- })->values()->all()
-])
-
-## Hover
-
-In addition to the standard responsive variations, text colors also come in `hover:` variations that apply the given text color on hover.
-
-@component('_partials.code-sample', ['class' => 'text-center'])
-
-@endcomponent
-
-Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
-
-```html
-
-```
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'text color',
- 'property' => 'textColors',
- ],
- 'variants' => [
- 'responsive',
- 'hover',
- ],
-])
diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md
deleted file mode 100644
index 2ecc40e1f713..000000000000
--- a/docs/source/docs/text-sizing.blade.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-extends: _layouts.documentation
-title: "Text Sizing"
-description: "Utilities for controlling the text size of an element."
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.text-xs',
- 'font-size: .75rem;',
- 'Set the text size to .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).',
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'text sizing',
- 'property' => 'textSizes',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md
deleted file mode 100644
index 48ee7d50336a..000000000000
--- a/docs/source/docs/text-style.blade.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-extends: _layouts.documentation
-title: "Style & Decoration"
-description: "Utilities for controlling the style of text."
-features:
- responsive: true
- customizable: true
- hover: true
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.italic',
- 'font-style: italic;',
- 'Italicizes the text within an element.',
- ],
- [
- '.roman',
- 'font-style: normal;',
- 'Sets the text to roman (disables italics) within an element.',
- ],
- [
- '.uppercase',
- 'text-transform: uppercase;',
- 'Makes all text uppercase within an element.',
- ],
- [
- '.lowercase',
- 'text-transform: lowercase;',
- 'Makes all text lowercase within an element.',
- ],
- [
- '.capitalize',
- 'text-transform: capitalize;',
- 'Capitalizes the text within an element.',
- ],
- [
- '.normal-case',
- 'text-transform: none;',
- 'Disables any text transformations previously applied to an element.',
- ],
- [
- '.underline',
- 'text-decoration: underline;',
- 'Underlines the text within an element.',
- ],
- [
- '.line-through',
- 'text-decoration: line-through;',
- 'Adds a line through the text within an element.',
- ],
- [
- '.no-underline',
- 'text-decoration: none;',
- 'Disables any text decorations previously applied to an element.',
- ],
- [
- '.antialiased',
- "-webkit-font-smoothing: antialiased;\n-moz-osx-font-smoothing: grayscale;",
- 'Set the font smoothing of an element to antialiased.',
- ],
- [
- '.subpixel-antialiased',
- "-webkit-font-smoothing: auto;\n-moz-osx-font-smoothing: auto;",
- 'Set the font smoothing of an element to subpixel antialiasing (the default).',
- ],
- ]
-])
-
-## Hover
-
-In addition to the standard responsive variations, text style utilties also come in `hover:` variations that apply the given text style on hover.
-
-@component('_partials.code-sample', ['class' => 'text-center'])
-Link
-@endcomponent
-
-Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
-
-```html
-Link
-```
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'text style',
- 'property' => 'textStyle',
- ],
- 'variants' => [
- 'responsive',
- 'hover',
- ],
-])
diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md
deleted file mode 100644
index ef76d83b9173..000000000000
--- a/docs/source/docs/user-select.blade.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-extends: _layouts.documentation
-title: "User Select"
-description: "Utilities for controlling whether the user can select text in an element."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.select-none',
- 'user-select: none;',
- "Disable selecting text in an element.",
- ],
- [
- '.select-text',
- 'user-select: text;',
- "Allow selecting text in an element.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'user-select',
- 'property' => 'userSelect',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md
deleted file mode 100644
index be85ec7c79fe..000000000000
--- a/docs/source/docs/vertical-alignment.blade.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-extends: _layouts.documentation
-title: "Vertical Alignment"
-description: "Utilities for controlling the vertical alignment of an inline or table-cell box."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.align-baseline',
- 'vertical-align: baseline;',
- "Align the baseline of an element with the baseline of its parent.",
- ],
- [
- '.align-top',
- 'vertical-align: top;',
- "Align the top of an element and its descendants with the top of the entire line.",
- ],
- [
- '.align-middle',
- 'vertical-align: middle;',
- "Align the middle of an element with the baseline plus half the x-height of the parent.",
- ],
- [
- '.align-bottom',
- 'vertical-align: bottom;',
- "Align the bottom of an element and its descendants with the bottom of the entire line.",
- ],
- [
- '.align-text-top',
- 'vertical-align: text-top;',
- "Align the top of an element with the top of the parent element's font.",
- ],
- [
- '.align-text-bottom',
- 'vertical-align: text-bottom;',
- "Align the bottom of an element with the bottom of the parent element's font.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'vertical alignment',
- 'property' => 'verticalAlign',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md
deleted file mode 100644
index 940bbc54b726..000000000000
--- a/docs/source/docs/visibility.blade.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-extends: _layouts.documentation
-title: "Visibility"
-description: "Utilities for controlling the visible of an element."
-features:
- responsive: true
- customizable: false
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.visible',
- 'visibility: visible;',
- "Make an element visible.",
- ],
- [
- '.invisible',
- 'visibility: hidden;',
- "Hide an element without affecting the layout of the document.",
- ],
- ]
-])
-
-### Visible Default
-
-Use `.visible` to make an element visible. This will typically be used as a reset when using the `.invisible` utility.
-
-@component('_partials.code-sample', ['class' => 'flex justify-center'])
-
-@endcomponent
-
-### Invisible
-
-Use `.invisible` to hide an element, but still maintain its space.
-
-@component('_partials.code-sample', ['class' => 'flex justify-center'])
-
-@endcomponent
-
-## Responsive
-
-To apply a visibility utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:invisible` to an element would apply the `invisible` utility at medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
- 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.**
-
-It doesn't have a default theme, and there are no built-in UI components.
-
-On the flip side, it also has no opinion about how your site should look and doesn't impose design decisions that you have to fight to undo.
-
-If you're looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you.
-
-But if you want a huge head start implementing a custom design with its own identity, Tailwind might be just what you're looking for.
-
-### Utility-first
-
-Creating a framework for building custom UIs means you can't provide abstractions at the usual level of buttons, forms, cards, navbars, etc.
-
-Instead, Tailwind provides highly composable, low-level *utility classes* that make it easy to build complex user interfaces **without encouraging any two sites to look the same.**
-
-Here's an example of a contact card component built with Tailwind without writing a single line of CSS:
-
-@component('_partials.code-sample', ['class' => 'bg-grey-lighter py-8'])
-
-
-
-
-
-
Adam Wathan
-
Developer at NothingWorks Inc.
-
-
-
-
-
-
-
-@slot('code')
-
-
-
-
-
-
Adam Wathan
-
Developer at NothingWorks Inc.
-
-
-
-
-
-
-
-@endslot
-@endcomponent
-
-### Component-friendly
-
-While you can do a *lot* with just utility classes, sometimes a component class is the right decision.
-
-Tailwind provides tools for [extracting component classes](/docs/extracting-components) from repeated utility patterns, making it easy to update multiple instances of a component from one place:
-
-@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-
-
-@slot('code')
-
-
-
-
-
-
-
-@endslot
-@endcomponent
-
-### Responsive to the core
-
-Every Tailwind utility also comes in responsive flavors, making it extremely easy to build responsive interfaces without ever leaving your HTML.
-
-Tailwind uses an intuitive `{screen}:` prefix that makes it easy to notice responsive classes in your markup while keeping the original class name recognizable and intact.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
1
-
2
-
3
-
-@endslot
-@slot('sm')
-
-
1
-
2
-
3
-
-@endslot
-@slot('md')
-
-
1
-
2
-
3
-
-@endslot
-@slot('lg')
-
-
1
-
2
-
3
-
-@endslot
-@slot('xl')
-
-
1
-
2
-
3
-
-@endslot
-@slot('code')
-
-
-
-@endslot
-@endcomponent
-
-### Designed to be customized
-
-If it makes sense to be customizable, Tailwind lets you customize it.
-
-This includes colors, border sizes, font weights, spacing utilities, breakpoints, shadows, and tons more.
-
-Tailwind is written in [PostCSS](http://postcss.org/) and configured in JavaScript, which means you have the full power of a real programming language at your fingertips.
-
-Tailwind is more than a CSS framework, *it's an engine for creating design systems.*
-
-```js
-const colorPalette = {
- // ...
- 'grey-lighter': '#f3f7f9',
- // ...
-}
-
-module.exports = {
- // ...
- backgroundColors: colorPalette,
- borderColors: {
- default: colorPalette['grey-lighter'],
- ...colorPalette,
- },
- // ...
-}
-```
diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md
deleted file mode 100644
index 409d23ed0f30..000000000000
--- a/docs/source/docs/whitespace-and-wrapping.blade.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-extends: _layouts.documentation
-title: "Whitespace & Wrapping"
-description: "Utilities for controlling the whitespace and wrapping of an element."
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.whitespace-normal',
- 'white-space: normal;',
- 'Cause text to wrap normally within an element.',
- ],
- [
- '.whitespace-no-wrap',
- 'white-space: nowrap;',
- 'Prevent text from wrapping within an element.',
- ],
- [
- '.whitespace-pre',
- 'white-space: pre;',
- 'Preserve line returns and spaces within an element.',
- ],
- [
- '.whitespace-pre-line',
- 'white-space: pre-line;',
- 'Preserve line returns but not spaces within an element.',
- ],
- [
- '.whitespace-pre-wrap',
- 'white-space: pre-wrap;',
- 'Preserve spaces but not line returns within an element.',
- ],
- [
- '.break-words',
- 'word-wrap: break-word;',
- 'Add line breaks mid-word if needed.',
- ],
- [
- '.break-normal',
- 'word-wrap: normal;',
- 'Only add line breaks at normal word break points.',
- ],
- [
- '.truncate',
- "overflow: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap",
- 'Truncate overflowing text with an ellipsis (…) if needed.',
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'whitespace & wrapping',
- 'property' => 'whitespace',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/width.blade.md b/docs/source/docs/width.blade.md
deleted file mode 100644
index d5f690976a09..000000000000
--- a/docs/source/docs/width.blade.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-extends: _layouts.documentation
-title: "Width"
-description: "Utilities for setting the width of an element"
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.work-in-progress')
-
-@include('_partials.class-table', [
- 'scroll' => false,
- 'rows' => [
- [
- '.w-1',
- 'width: 0.25rem;',
- "Set the element's width to 0.25rem.",
- ],
- [
- '.w-2',
- 'width: 0.5rem;',
- "Set the element's width to 0.5rem.",
- ],
- [
- '.w-3',
- 'width: 0.75rem;',
- "Set the element's width to 0.75rem.",
- ],
- [
- '.w-4',
- 'width: 1rem;',
- "Set the element's width to 1rem.",
- ],
- [
- '.w-6',
- 'width: 1.5rem;',
- "Set the element's width to 1.5rem.",
- ],
- [
- '.w-8',
- 'width: 2rem;',
- "Set the element's width to 2rem.",
- ],
- [
- '.w-10',
- 'width: 2.5rem;',
- "Set the element's width to 2.5rem.",
- ],
- [
- '.w-12',
- 'width: 3rem;',
- "Set the element's width to 3rem.",
- ],
- [
- '.w-16',
- 'width: 4rem;',
- "Set the element's width to 4rem.",
- ],
- [
- '.w-24',
- 'width: 6rem;',
- "Set the element's width to 6rem.",
- ],
- [
- '.w-32',
- 'width: 8rem;',
- "Set the element's width to 8rem.",
- ],
- [
- '.w-48',
- 'width: 12rem;',
- "Set the element's width to 12rem.",
- ],
- [
- '.w-64',
- 'width: 16rem;',
- "Set the element's width to 16rem.",
- ],
- [
- '.w-auto',
- 'width: auto;',
- "Set the element's width to auto.",
- ],
- [
- '.w-px',
- 'width: 1px;',
- "Set the element's width to 1px.",
- ],
- [
- '.w-1/2',
- 'width: 50%;',
- "Set the element's width to 50%.",
- ],
- [
- '.w-1/3',
- 'width: 33.33333%;',
- "Set the element's width to 33.33333%.",
- ],
- [
- '.w-2/3',
- 'width: 66.66667%;',
- "Set the element's width to 66.66667%.",
- ],
- [
- '.w-1/4',
- 'width: 25%;',
- "Set the element's width to 25%.",
- ],
- [
- '.w-3/4',
- 'width: 75%;',
- "Set the element's width to 75%.",
- ],
- [
- '.w-1/5',
- 'width: 20%;',
- "Set the element's width to 20%.",
- ],
- [
- '.w-2/5',
- 'width: 40%;',
- "Set the element's width to 40%.",
- ],
- [
- '.w-3/5',
- 'width: 60%;',
- "Set the element's width to 60%.",
- ],
- [
- '.w-4/5',
- 'width: 80%;',
- "Set the element's width to 80%.",
- ],
- [
- '.w-1/6',
- 'width: 16.66667%;',
- "Set the element's width to 16.66667%.",
- ],
- [
- '.w-5/6',
- 'width: 83.33333%;',
- "Set the element's width to 83.33333%.",
- ],
- [
- '.w-full',
- 'width: 100%;',
- "Set the element's width to 100%.",
- ],
- [
- '.w-screen',
- 'width: 100vw;',
- "Set the element's width to 100vw.",
- ],
- ]
-])
-
-## Customizing
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'width',
- 'property' => 'width',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/docs/z-index.blade.md b/docs/source/docs/z-index.blade.md
deleted file mode 100644
index 3e4a7bee7b8b..000000000000
--- a/docs/source/docs/z-index.blade.md
+++ /dev/null
@@ -1,166 +0,0 @@
----
-extends: _layouts.documentation
-title: "Z-Index"
-description: "Utilities for controlling the stack order of an element."
-features:
- responsive: true
- customizable: true
- hover: false
- focus: false
----
-
-@include('_partials.class-table', [
- 'rows' => [
- [
- '.z-0',
- 'z-index: 0;',
- "Set the z-index of the element to 0.",
- ],
- [
- '.z-10',
- 'z-index: 10;',
- "Set the z-index of the element to 10.",
- ],
- [
- '.z-20',
- 'z-index: 20;',
- "Set the z-index of the element to 20.",
- ],
- [
- '.z-30',
- 'z-index: 30;',
- "Set the z-index of the element to 30.",
- ],
- [
- '.z-40',
- 'z-index: 40;',
- "Set the z-index of the element to 40.",
- ],
- [
- '.z-50',
- 'z-index: 50;',
- "Set the z-index of the element to 50.",
- ],
- [
- '.z-auto',
- 'z-index: auto;',
- "Don't create a new stacking context.",
- ],
- ]
-])
-
-## Usage
-
-Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the `.z-{index}` utilities.
-
-@component('_partials.code-sample')
-
-
z-40
-
z-30
-
z-20
-
z-10
-
z-0
-
-@slot('code')
-
z-40
-
z-30
-
z-20
-
z-10
-
z-0
-@endslot
-@endcomponent
-
-## Responsive
-
-To control the z-index of an element at a specific breakpoint, add a `{screen}:` prefix to any existing z-index utility. For example, use `md:z-50` to apply the `z-50` utility at only medium screen sizes and above.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-
-
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
-
-@endslot
-@slot('md')
-
-
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
-
-@endslot
-@slot('xl')
-
-
yellow
-
z-40
-
z-30
-
z-20
-
z-10
-
z-0
-
-@endslot
-@slot('code')
-
yellow
-
z-40
-
z-30
-
z-20
-
z-10
-
z-0
-@endslot
-@endcomponent
-
-## Customizing
-
-By default Tailwind provides six numeric `z-index` utilities and an `auto` utility. You change, add, or remove these by editing the `zIndex` section of your Tailwind config.
-
-@component('_partials.customized-config', ['key' => 'zIndex'])
- '0': 0,
-- '10': 10,
-- '20': 20,
-- '30': 30,
-- '40': 40,
-- '50': 50,
-+ '25': 25,
-+ '50': 50,
-+ '75': 75,
-+ '100': 100,
- 'auto': 'auto',
-@endcomponent
-
-@include('_partials.variants-and-disabling', [
- 'utility' => [
- 'name' => 'z-index',
- 'property' => 'zIndex',
- ],
- 'variants' => [
- 'responsive',
- ],
-])
diff --git a/docs/source/favicon-16x16.png b/docs/source/favicon-16x16.png
deleted file mode 100644
index 700e1ee3356a..000000000000
Binary files a/docs/source/favicon-16x16.png and /dev/null differ
diff --git a/docs/source/favicon-32x32.png b/docs/source/favicon-32x32.png
deleted file mode 100644
index 06043e59937f..000000000000
Binary files a/docs/source/favicon-32x32.png and /dev/null differ
diff --git a/docs/source/favicon.ico b/docs/source/favicon.ico
deleted file mode 100644
index c558ef848a1e..000000000000
Binary files a/docs/source/favicon.ico and /dev/null differ
diff --git a/docs/source/img/adam.jpg b/docs/source/img/adam.jpg
deleted file mode 100644
index e84595dcd424..000000000000
Binary files a/docs/source/img/adam.jpg and /dev/null differ
diff --git a/docs/source/img/card-left.jpg b/docs/source/img/card-left.jpg
deleted file mode 100644
index 675e7f61665e..000000000000
Binary files a/docs/source/img/card-left.jpg and /dev/null differ
diff --git a/docs/source/img/card-top.jpg b/docs/source/img/card-top.jpg
deleted file mode 100644
index a7bdc9bb2503..000000000000
Binary files a/docs/source/img/card-top.jpg and /dev/null differ
diff --git a/docs/source/img/launch-card-optimized.png b/docs/source/img/launch-card-optimized.png
deleted file mode 100644
index b5d052c00bfe..000000000000
Binary files a/docs/source/img/launch-card-optimized.png and /dev/null differ
diff --git a/docs/source/img/launch-card.png b/docs/source/img/launch-card.png
deleted file mode 100644
index 72804730d250..000000000000
Binary files a/docs/source/img/launch-card.png and /dev/null differ
diff --git a/docs/source/img/tailwind-square.png b/docs/source/img/tailwind-square.png
deleted file mode 100644
index 490ff81c46db..000000000000
Binary files a/docs/source/img/tailwind-square.png and /dev/null differ
diff --git a/docs/source/img/tailwind.svg b/docs/source/img/tailwind.svg
deleted file mode 100644
index 2811fcee952a..000000000000
--- a/docs/source/img/tailwind.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/docs/source/img/twitter-card.png b/docs/source/img/twitter-card.png
deleted file mode 100644
index d4557a7f51c7..000000000000
Binary files a/docs/source/img/twitter-card.png and /dev/null differ
diff --git a/docs/source/img/twitter-large-card.png b/docs/source/img/twitter-large-card.png
deleted file mode 100644
index 46ce053cf1d2..000000000000
Binary files a/docs/source/img/twitter-large-card.png and /dev/null differ
diff --git a/docs/source/index.blade.php b/docs/source/index.blade.php
deleted file mode 100644
index 29e17a172845..000000000000
--- a/docs/source/index.blade.php
+++ /dev/null
@@ -1,95 +0,0 @@
-@extends('_layouts.master')
-
-@section('meta')
-
-
-
-
-
-
-
-
-
-
-
-@endsection
-
-@section('body')
-
-