mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
289c25f8e9
This PR updates all of our x/y named utilities (like `px-*`, `my-*`, `inset-y-*`, `scroll-px-*`, etc.) to use logical properties like `padding-inline` instead of separate `padding-left` and `padding-right` properties. We held off on this originally for a while because `inline` doesn't really mean _horizontal_ like the "x" in `px-*` implies, but I think in practice this change is fine — I'm comfortable with "x" meaning "in the inline direction" and "y" meaning "in the block direction" in Tailwind. This is technically a breaking change if anyone was depending on the fact that `px-*` for instance was always explicitly setting `padding-left` and `padding-right` even when building something in a vertical writing mode, but I kinda doubt there's a single real project on the internet that will actually be affected, so not too worried about it. If someone _really_ wants to set `padding-left` and `padding-right` they can always use `pl-4 pr-4` instead of `px-4`. Nice thing about this change is it produces quite a bit less CSS. To test this change, I re-generated all of the snapshots and made sure none of the generated utilities changed position or anything in the output (initially they did before I updated `property-order.ts` to add some missing properties). I also created a little demo locally in the Vite playground to test things manually and make sure I didn't make any obvious typos or anything that could slip through the snapshots: <img width="1223" alt="image" src="https://github.com/user-attachments/assets/0e9854ba-2b5b-4c8c-87b6-6eb7b7da84f2"> <details> <summary>Show code for playground demo</summary> ```jsx import React from 'react' export function App() { return ( <div className="p-12 gap-10 grid grid-cols-2 items-start"> <div className="grid grid-cols-1 gap-10 justify-start"> <div className="space-y-6"> <p className="font-semibold mb-6">Border Width</p> <div className="border-x w-48 h-12 flex items-center justify-center">border-x</div> <div className="border-y w-48 h-12 flex items-center justify-center">border-y</div> </div> <div className="space-y-6"> <p className="font-semibold mb-6">Border Color</p> <div className="border-2 border-x-red-500 w-48 h-12 flex items-center justify-center"> border-x-red-500 </div> <div className="border-2 border-y-red-500 w-48 h-12 flex items-center justify-center"> border-y-red-500 </div> </div> <div className="space-y-6"> <p className="font-semibold mb-6">Padding</p> <div> <div className="px-8 bg-yellow-300 inline-flex items-center justify-center">px-8</div> </div> <div> <div className="py-8 bg-yellow-300 inline-flex items-center justify-center">py-8</div> </div> </div> </div> <div className="grid grid-cols-1 gap-10 justify-start"> <div className="space-y-6"> <p className="font-semibold mb-6">Margin</p> <div> <div className="bg-red-400 inline-flex"> <div className="mx-8 bg-yellow-300 inline-flex items-center justify-center">mx-8</div> </div> </div> <div> <div className="bg-red-400 inline-flex"> <div className="my-8 bg-yellow-300 inline-flex items-center justify-center">my-8</div> </div> </div> </div> <div className="space-y-6"> <p className="font-semibold mb-6">Inset</p> <div className="relative bg-red-400 w-48 h-48"> <div className="inset-x-8 absolute bg-yellow-300 inline-flex items-center justify-center"> inset-x-8 </div> </div> <div className="relative bg-red-400 w-48 h-48"> <div className="inset-y-8 absolute bg-yellow-300 inline-flex items-center justify-center"> inset-y-8 </div> </div> </div> </div> </div> ) } ``` </details> I didn't manually test the scroll padding or scroll margin utilities because they are more annoying to set up, but I probably should. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>