Skip to content

Commit 5b3b79d

Browse files
danhollickdanhollick
committed
WIP
1 parent 96f56bb commit 5b3b79d

File tree

1 file changed

+18
-73
lines changed

1 file changed

+18
-73
lines changed

‎src/pages/docs/v4-beta.mdx

Lines changed: 18 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description: Preview what's coming in the next version of Tailwind CSS.
66

77
import { Heading } from '@/components/Heading'
88
import { TipGood, TipBad } from '@/components/Tip'
9-
import {ClassTable} from '@/components/ClassTable'
9+
import { ClassTable } from '@/components/ClassTable'
1010

1111
export function ColorPalette() {
1212
const colors = {
@@ -266,12 +266,12 @@ export function ColorPalette() {
266266
Object.entries(colors).map(([color, values]) =>
267267
<div className="grid grid-cols-1 gap-2" key={color}>
268268
{Object.values(values).map((value, i) =>
269-
<div className="aspect-square rounded" key={i} style={{backgroundColor:value}}/>
269+
<div className="aspect-square rounded" key={i} style={{ backgroundColor: value }} />
270270
)}
271271
</div>
272272
)
273273
}
274-
</div>
274+
</div>
275275
}
276276

277277

@@ -699,8 +699,8 @@ Browser support for container queries is [really great](https://caniuse.com/css-
699699
We've finally added APIs for doing 3D transforms, like `rotate-x-*`, `rotate-y-*`, `scale-z-*`, `translate-z-*`, and tons more.
700700

701701
```html {{ example: true }}
702-
<div class="grid">
703-
<article class="transition-all relative isolate z-10 flex w-full max-w-80 justify-self-center [transform-style:_preserve-3d] [transform:rotateX(51deg)_rotateZ(43deg)] flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 shadow-xl duration-500 [perspective:800px] [perspective-origin:top_left] hover:-translate-y-4 hover:[transform:rotateX(49deg)__rotateZ(38deg)] hover:shadow-2xl">
702+
<div class="grid [perspective:1200px]">
703+
<article class="transition-all relative isolate z-10 flex w-full max-w-80 justify-self-center [transform-style:_preserve-3d] [transform:rotateX(51deg)_rotateZ(43deg)] flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 shadow-xl duration-500 hover:-translate-y-4 hover:[transform:rotateX(49deg)__rotateZ(38deg)] hover:shadow-2xl">
704704
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 -z-10 size-full object-cover" />
705705
<div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
706706
<div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
@@ -724,9 +724,11 @@ We've finally added APIs for doing 3D transforms, like `rotate-x-*`, `rotate-y-*
724724

725725

726726
```html
727-
<article class="relative isolate z-10 flex w-full max-w-80 **transform-3d rotate-x-51 rotate-z-43 perspective-distant perspective-origin-top-left** flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 shadow-xl transition-all duration-500 **hover:-translate-y-4 hover:rotate-x-49 hover:rotate-z-38** hover:shadow-2xl">
728-
<!-- ... -->
729-
</article>
727+
<div class="**perspective-distant**">
728+
<article class="... **transform-3d rotate-x-51 rotate-z-43** shadow-xl transition-all duration-500 **hover:-translate-y-4 hover:rotate-x-49 hover:rotate-z-38** hover:shadow-2xl">
729+
<!-- ... -->
730+
</article>
731+
</div>
730732
```
731733

732734
Use the `transform-3d` utility to enable 3D transforms by setting the right `transform-style`
@@ -917,7 +919,7 @@ We've added dedicated `inset-shadow-*` and `inset-ring-*` utilities in v4.0 that
917919
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" /></svg>
918920
<p>Send</p>
919921
</div>
920-
<div class="absolute bottom-[50%] translate-y-[70%] left-1/2 size-40 overflow-hidden rounded-full border-2 shadow-lg border-black/20">
922+
<div class="absolute bottom-[50%] translate-y-[70%] left-[56%] size-40 overflow-hidden rounded-full border-2 shadow-lg border-black/20">
921923
<div class="absolute right-[190%] bottom-[80%] grid h-16 w-40 scale-[400%] grid-flow-col grid-cols-[auto_auto] items-center justify-center gap-2 rounded-2xl bg-blue-600 text-2xl text-blue-100 ring shadow-md ring-black/10 [box-shadow:oklch(1_5.96046e-8_none_/_0.4)_0px_2px_4px_0px_inset,_oklch(1_5.96046e-8_none_/_0.2)_0px_0px_0px_1px_inset,_rgba(0,_0,_0,_0)_0px_0px_0px_0px,_oklch(0_0_none_/_0.1)_0px_0px_0px_1px,_oklch(0_0_none_/_0.2)_0px_10px_15px_-3px,_oklch(0_0_none_/_0.2)_0px_4px_6px_-4px]
922924
]">
923925
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" /></svg>
@@ -953,75 +955,18 @@ We've added utilities for the new `field-sizing` property that lets you create a
953955

954956
```html {{example: {hint: 'Type in the textarea to see the effect'}}}
955957
<div class="py-8 grid">
956-
<form action="#" class="relative w-full max-w-xl justify-self-center">
957-
<div class="overflow-hidden rounded-lg border bg-white border-gray-300 shadow-sm p-4 pb-0">
958-
<label for="title" class="sr-only">Title</label>
959-
<input value='Replace all uniforms with cotton' type="text" name="title" id="title" class="bg-white block w-full border-0 pt-2.5 text-lg font-medium placeholder:text-gray-400 focus:bg-gray-100 focus:ring-0" placeholder="Title">
960-
<label for="description" class="sr-only">Description</label>
961-
<textarea rows="2" name="description" id="description" class="bg-white block w-full resize-none border-0 py-0 text-gray-700 placeholder:text-gray-400 focus:ring-0 focus:bg-gray-50 sm:text-sm/6 [field-sizing:content]" placeholder="Write a description...">
962-
- Must be high-grade cotton
963-
- Special attention to breathability</textarea>
964-
<div aria-hidden="true">
965-
<div class="py-2">
966-
<div class="h-9"></div>
967-
</div>
968-
<div class="h-px"></div>
969-
<div class="py-2">
970-
<div class="py-px">
971-
<div class="h-9"></div>
972-
</div>
973-
</div>
958+
<div class="relative w-full max-w-96 justify-self-center">
959+
<label for="comment" class="block text-sm/6 font-medium text-gray-900">Add your comment</label>
960+
<div class="mt-2">
961+
<textarea rows="2" placeholder="Write something..." name="comment" id="comment" class="block w-full resize-none min-h-16 rounded-md border-0 px-2 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6 [field-sizing:content]"></textarea>
974962
</div>
975-
</div>
976-
<div class="absolute inset-x-px bottom-0">
977-
<div class="flex flex-nowrap justify-end space-x-2 px-2 py-2 sm:px-3">
978-
<div class="shrink-0">
979-
<label id="listbox-label" class="sr-only">Assign</label>
980-
<div class="relative">
981-
<button type="button" class="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
982-
<svg class="size-5 shrink-0 text-gray-300 sm:-ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z" clip-rule="evenodd" /></svg>
983-
<img src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-5 shrink-0 rounded-full">
984-
<span class="hidden truncate sm:ml-2 sm:block">Assign</span>
985-
</button>
986-
</div>
987-
</div>
988-
<div class="shrink-0">
989-
<label id="listbox-label" class="sr-only">Add a label</label>
990-
<div class="relative">
991-
<button type="button" class="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
992-
<svg class="size-5 shrink-0 text-gray-300 sm:-ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"><path fill-rule="evenodd" d="M4.5 2A2.5 2.5 0 0 0 2 4.5v3.879a2.5 2.5 0 0 0 .732 1.767l7.5 7.5a2.5 2.5 0 0 0 3.536 0l3.878-3.878a2.5 2.5 0 0 0 0-3.536l-7.5-7.5A2.5 2.5 0 0 0 8.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" /></svg>
993-
<span class="hidden truncate sm:ml-2 sm:block">Label</span>
994-
</button>
995-
</div>
996-
</div>
997-
<div class="shrink-0">
998-
<label id="listbox-label" class="sr-only">Add a due date</label>
999-
<div class="relative">
1000-
<button type="button" class="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
1001-
<svg class="size-5 shrink-0 text-gray-300 sm:-ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"><path fill-rule="evenodd" d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2Zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75Z" clip-rule="evenodd" /></svg>
1002-
<span class="hidden truncate sm:ml-2 sm:block">Due date</span>
1003-
</button>
1004-
</div>
1005-
</div>
1006-
</div>
1007-
<div class="flex items-center justify-between space-x-3 border-t border-gray-200 px-2 py-2 sm:px-3">
1008-
<div class="flex">
1009-
<button type="button" class="group -my-2 -ml-2 inline-flex items-center rounded-full px-3 py-2 text-left text-gray-400">
1010-
<svg class="-ml-1 mr-2 size-5 group-hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"><path fill-rule="evenodd" d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" /></svg>
1011-
<span class="text-sm italic text-gray-500 group-hover:text-gray-600">Attach a file</span>
1012-
</button>
1013-
</div>
1014-
<div class="shrink-0">
1015-
<button type="submit" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create</button>
1016-
</div>
1017-
</div>
1018-
</div>
1019-
</form>
963+
</div>
1020964
</div>
1021965
```
1022966

1023967
```html
1024-
<textarea class="field-sizing-content"></textarea>
968+
<label for="comment" class="block text-sm/6 font-medium text-gray-900">Add your comment</label>
969+
<textarea name="comment" id="comment" class="...**field-sizing-content**"></textarea>
1025970
```
1026971

1027972
Use `field-sizing-content` to make the control resize to fit its contents, or `field-sizing-fixed` to give the control a fixed size.

0 commit comments

Comments
 (0)