Beloved Manhattan soup stand closes
+
New Yorkers are facing the winter chill...
+
+
+
+```
+
+We've added the following new classes by default:
+
+| Class | CSS |
+| ----------- | -------------------- |
+| `h-svh` | `height: 100svh` |
+| `h-lvh` | `height: 100lvh` |
+| `h-dvh` | `height: 100dvh` |
+| `min-h-svh` | `min-height: 100svh` |
+| `min-h-lvh` | `min-height: 100lvh` |
+| `min-h-dvh` | `min-height: 100dvh` |
+| `max-h-svh` | `max-height: 100svh` |
+| `max-h-lvh` | `max-height: 100lvh` |
+| `max-h-dvh` | `max-height: 100dvh` |
+
+If you need other values, you can always use arbitrary values too like `min-h-[75dvh]`.
+
+Browser support is [pretty great](https://caniuse.com/viewport-unit-variants) for these nowadays, so unless you need to support Safari 14 you can start using these right away.
+
+---
+
+## New `:has()` variant
+
+The [`:has()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) is the most powerful thing that's been added to CSS since flexbox. For the first time ever, you can style an element based on its _children_, not just based on its parents. It even makes it possible to style based on subsequent siblings.
+
+Here's an example where the parent gets a colored ring if the radio button inside of it is checked:
+
+```html {{ example: { p: 'none' } }}
+
+
+
+```
+
+```html
+
+```
+
+I feel like I've found a new use-case for `:has()` every week while working on this new UI kit we've been building for the last few months, and it's replaced a crazy amount of JavaScript in our code.
+
+For example, our text inputs are pretty complicated design-wise and require a little wrapper element to build. Without `:has()`, we had no way of styling the wrapper based on things like the `:disabled` state of the input, but now we can:
+
+```jsx {{ filename: 'input.jsx', style: 'framed', color: 'sky' }}
+export function Input({ ... }) {
+ return (
+
+
+
+ )
+}
+```
+
+This one is pretty bleeding edge but as of literally today it's now supported in the latest version of all major browsers. Give it a few weeks for any Firefox users to install today's update and we should be able to go wild with it.
+
+---
+
+## Style children with the `*` variant
+
+Here's one people have wanted for literally ever — a way to style children from the parent using utility classes.
+
+We've added a new `*` variant that targets direct children, letting you do stuff like this:
+
+```html {{ example: { p: 'none' } }}
+
+
+```
+
+```html
+Categories
+
+
+Sales
+ Marketing
+ SEO
+ Analytics
+ Design
+ Strategy
+ Security
+ Growth
+ Mobile
+ UX/UI
+
+ Categories:
+```
+
+Generally I'd recommend just styling the children directly, but this can be useful when you don't control those elements or need to make a conditional tweak because of the context the element is used in.
+
+It can be composed with other variants too, for instance `hover:*:underline` will style any child when the child is hovered.
+
+Here's a cool way we're using that to conditionally add layout styles to different child elements in the new UI kit we're working on:
+
+```jsx {{ filename: 'JSX', style: 'framed', color: 'pink' }}
+function Field({ children }) {
+ return (
+ Categories:
+
+ - Sales
+ - Marketing
+ - SEO
+
+
+
-
+
- Sales +
- Marketing +
- SEO + +
+ {children}
+
+ )
+}
+
+function Description({ children }) {
+ return (
+ {children}
+ ) +} + +function Example() { + return ( +
+ 
+
+
+
+```
+
+```diff-html {{ filename: 'HTML' }}
+
+
+
+
+- ![]()
+- ![]()
+- ![]()
++ ![]()
++ ![]()
++ ![]()
+
+```
+
+We've wanted to add this forever but have always been hung up on the exact name — `size-*` felt like so much to type compared to `w-*` or `h-*` and `s-*` felt way too cryptic.
+
+After using it for a few weeks though I can say decisively that even with the longer name, it's way better than separate width and height utilities. Super convenient, especially if you're combining it with variants or using a complex arbitrary value.
+
+---
+
+## Balanced headlines with `text-wrap` utilities
+
+How much time have you spent fiddling with `max-width` or inserting responsive line breaks to try and make those little section headings wrap nicely on your landing pages? Well now you can spend zero time on it, because the browser can do it for you with `text-wrap: balance`:
+
+```html {{ example: { p: 'none' } }}
+
+
+```
+
+```html
+
+ Beloved Manhattan soup stand closes
+Beloved Manhattan soup stand closes
+
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
+Beloved Manhattan soup stand closes
+
+```
+
+```html
+
+ Beloved Manhattan soup stand closes
+Beloved Manhattan soup stand closes
+
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
+Beloved Manhattan soup stand closes
+
New Yorkers are facing the winter chill...
+
+
+
+```
+
+We're using subgrid in the new UI kit we're working on for example in [dropdown menus](https://twitter.com/adamwathan/status/1717576154008240615), so that if any item has an icon, all of the other items are indented to keep the text aligned:
+
+```html {{ filename: 'HTML', style: 'framed', color: 'indigo' }}
+
+```
+
+When none of the items have an icon, the first column shrinks to 0px and the text is aligned all the way to left.
+
+Check out the [MDN documentation on subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) for a full primer — it's a bit of a tricky feature to wrap your head around at first, but once it clicks it's a game-changer.
+
+---
+
+## Extended min-width, max-width, and min-height scales
+
+We've finally extended the `min-width`, `max-width`, and `min-height` scales to include the full spacing scale, so classes like `min-w-12` are actually a real thing now:
+
+```html {{ filename: 'HTML', style: 'framed', color: 'fuchsia' }}
+
+
+
+06
+
+
+
+```
+
+We should've just done this for v3.0 but never really got around to it — I'm sorry and you're welcome.
+
+---
+
+## Extended opacity scale
+
+We've also extended the opacity scale to include every step of 5 out of the box:
+
+```html {{ filename: 'HTML', style: 'framed', color: 'sky' }}
+
+
+
+```
+
+Hopefully that means a few less arbitrary values in your markup. I'm coming for you next 2.5%.
+
+---
+
+## Extended `grid-rows-*` scale
+
+We've also bumped the baked-in number of grid rows from 6 to 12 because why not:
+
+```html {{ filename: 'HTML', style: 'framed', color: 'purple' }}
+
+
+
+```
+
+Maybe we'll get even crazier and bump it to 16 in the next release.
+
+---
+
+## New `forced-colors` variant
+
+Ever heard of [forced colors mode](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors)? Your site probably looks pretty bad in it.
+
+Well now you can't blame us at least, because Tailwind CSS v3.4 includes a `forced-colors` variant for adjusting styles for forced colors mode:
+
+```html {{ filename: 'HTML', style: 'framed', color: 'pink' }}
+
+```
+
+It's really useful for fine-tuning totally custom controls, especially combined with arbitrary values and a working knowledge of [CSS system colors](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color).
+
+---
+
+## New `forced-color-adjust` utilities
+
+We've also added new `forced-color-adjust-auto` and `forces-color-adjust-none` utilities to control how forced colors mode affects your design:
+
+```html {{ filename: 'HTML', style: 'framed', color: 'sky' }}
+
+```
+
+These should be used pretty sparingly, but they can be useful when it's critical that something is rendered in a specific color no matter what, like choosing the color of something someone is buying in an online store.
+
+To learn more about all this forced colors stuff, I recommend reading ["Forced colors explained: A practical guide"](https://polypane.app/blog/forced-colors-explained-a-practical-guide/) on the Polypane blog — by far the most useful post I've found on this topic.
+
+---
+
+If you've been paying close attention, you might be wondering about [Oxide](https://youtu.be/CLkxRnRQtDE?t=2146), the engine improvements we previewed at [Tailwind Connect](https://tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap) this summer.
+
+We'd originally slated those improvements for v3.4, but we have a few things still to iron out and so many of these other improvements had been piling up that we felt it made sense to get it all out the door instead of holding it back. The Oxide stuff is still coming, and will be the headlining improvement for the next Tailwind CSS release in the new year.
+
+In the mean time, dig in to Tailwind CSS v3.4 by updating to the latest version with npm:
+
+```bash
+$ npm install tailwindcss@latest
+```
+
+With `:has()` and the new `*` variant, your HTML is about get more out of control than ever.
\ No newline at end of file
diff --git a/src/pages/docs/appearance.mdx b/src/pages/docs/appearance.mdx
index b73f6de59..0a4565cf3 100644
--- a/src/pages/docs/appearance.mdx
+++ b/src/pages/docs/appearance.mdx
@@ -4,7 +4,6 @@ description: "Utilities for suppressing native form control styling."
---
import utilities from 'utilities?plugin=appearance'
-import { ArbitraryValues } from '@/components/ArbitraryValues'
import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries'
import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates'
@@ -19,7 +18,7 @@ Use `appearance-none` to reset any browser specific styling on an element. This
```html {{ example: true }}
-
-
+
+
+
+
- Default styles removed
+ Remove default browser styles
-
+
+ 
+