No description
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> |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.workspace.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For chatting with others using the framework:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.