diff --git a/source/docs/positioning.blade.md b/source/docs/positioning.blade.md index b16732f0a..1bf18f208 100644 --- a/source/docs/positioning.blade.md +++ b/source/docs/positioning.blade.md @@ -37,45 +37,75 @@ features: "Position an element relatively until its containing block crosses a specified threshold, then position it relative to the viewport.", ], [ - '.pin-t', + '.top-0', "top: 0;", "Anchor absolutely positioned element to the top edge of the nearest positioned parent.", ], [ - '.pin-r', + '.right-0', "right: 0;", "Anchor absolutely positioned element to the right edge of the nearest positioned parent.", ], [ - '.pin-b', + '.bottom-0', "bottom: 0;", "Anchor absolutely positioned element to the bottom edge of the nearest positioned parent.", ], [ - '.pin-l', + '.left-0', "left: 0;", "Anchor absolutely positioned element to the left edge of the nearest positioned parent.", ], [ - '.pin-y', + '.inset-y-0', "top: 0;\nbottom: 0;", "Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.", ], [ - '.pin-x', + '.inset-x-0', "right: 0;\nleft: 0;", "Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.", ], [ - '.pin', + '.inset-0', "top: 0;\nright: 0;\nbottom: 0;\nleft: 0;", "Anchor absolutely positioned element to all the edges of the nearest positioned parent.", ], [ - '.pin-none', + '.inset-auto', "top: auto;\nright: auto;\nbottom: auto;\nleft: auto;", "Reset absolutely positioned element to all the edges from a given breakpoint onwards.", ], + [ + '.top-auto', + "top: auto;", + "Reset absolutely positioned element to the top edge", + ], + [ + '.bottom-auto', + "bottom: auto;", + "Reset absolutely positioned element to the bottom edge", + ], + [ + '.left-auto', + "left: auto;", + "Reset absolutely positioned element to the left edge", + ], + [ + '.right-auto', + "right: auto;", + "Reset absolutely positioned element to the right edge", + ], + [ + '.inset-y-auto', + "top: auto;\nbottom: auto;", + "Reset absolutely positioned element to the top and bottom edge", + ], + [ + '.inset-x-auto', + "left: auto;\nright: auto;", + "Reset absolutely positioned element to the left and right edge", + ], ] ]) @@ -89,7 +119,7 @@ Any offsets will be ignored and the element will not act as a position reference

Static parent

-
+

Absolute child

@@ -98,7 +128,7 @@ Any offsets will be ignored and the element will not act as a position reference @slot('code')
Static parent -
+
Absolute child
@@ -115,7 +145,7 @@ Offsets are calculated relative to the element's normal position and the element

Relative parent

-
+

Absolute child

@@ -124,7 +154,7 @@ Offsets are calculated relative to the element's normal position and the element @slot('code')
Relative parent -
+
Absolute child
@@ -144,7 +174,7 @@ Offsets are calculated relative to the nearest parent that has a position other

Relative parent

Static parent

-
+

Static child

@@ -158,7 +188,7 @@ Offsets are calculated relative to the nearest parent that has a position other

Relative parent

Static parent

-
+

Absolute child

@@ -172,7 +202,7 @@ Offsets are calculated relative to the nearest parent that has a position other Relative parent
Static parent -
+
Absolute child
@@ -203,13 +233,13 @@ Offsets are calculated relative to the viewport and the element *will* act as a -
+
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.

@@ -227,7 +257,7 @@ Offsets are calculated relative to the viewport and the element *will* act as a
Fixed child -
+
Absolute child
@@ -262,15 +292,15 @@ Offsets are calculated relative to the element's normal position and the element @slot('code')
-
Sticky Heading 1
+
Sticky Heading 1

Quisque cursus...

-
Sticky Heading 2
+
Sticky Heading 2

Integer lacinia...

-
Sticky Heading 3
+
Sticky Heading 3

Nullam mauris...

@@ -279,83 +309,80 @@ Offsets are calculated relative to the element's normal position and the element ## Pinning edges -Use the `.pin{-edge?}` utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent. +Use the `.{top|right|bottom|left|inset}-{value}` 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
+
top|right|bottom|left|inset
-
Edge (optional)
-
  All (default)
-
t Top
-
r Right
-
b Bottom
-
l Left
-
y Top and Bottom
-
x Left and Right
+
+ space +
+
0 0
+
auto auto
@component('_partials.code-sample')
-

.pin-x.pin-t

+

.inset-x-0.top-0

-
+
-

.pin-y.pin-r

+

.inset-y-0.right-0

-
+
-

.pin-x.pin-b

+

.inset-x-0.bottom-0

-
+
-

.pin-y.pin-l

+

.inset-y-0.left-0

-
+
-

.pin

+

.inset-0

-
+
-

.pin-l.pin-t

+

.left-0.top-0

-
+
-

.pin-t.pin-r

+

.top-0.right-0

-
+
-

.pin-r.pin-b

+

.right-0.bottom-0

-
+
-

.pin-b.pin-l

+

.bottom-0.left-0

-
+
@@ -364,54 +391,54 @@ Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably fin @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. +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:inset-y-0` would apply `inset-y-0` at large screens and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @@ -424,43 +451,66 @@ For more information about Tailwind's responsive design features, check out the @slot('sm')
-
Responsive element
+
Responsive element
@endslot @slot('md')
-
Responsive element
+
Responsive element
@endslot @slot('lg')
-
Responsive element
+
Responsive element
@endslot @slot('xl')
-
Responsive element
+
Responsive element
@endslot @slot('code')
-
+
@endslot @endcomponent ## Customizing -@include('_partials.variants-and-disabling', [ - 'utility' => [ - 'name' => 'positioning', - 'property' => 'position', - ], - 'variants' => [ - 'responsive', - ], -]) +```javascript +module.exports = { + theme: { + position: { + '0': 0, + auto: 'auto', + }, + } +} +``` + +```javascript +module.exports = { + theme: { + inset: { + '0': 0, + auto: 'auto', + }, + } +} +``` + +The classes of the inset live in a new inset plugin instead of the position plugin, so their variants are also controlled separately: + +```javascript +module.exports = { + variants: { + position: ['responsive'], + inset: ['responsive'], + } +} +```