tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

Go to file

Use inline and block for x/y utilities (#14805 )

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>

2024-10-28 13:08:39 -04:00

.github

Add CODEOWNERS file (#14701 )

2024-10-17 09:05:44 -04:00

crates

Prepare v4.0.0-alpha.30 release (#14789 )

2024-10-24 16:22:08 -04:00

integrations

Revert "Fix Astro integration test by pinning zod-to-json-schema" (#14792 )

2024-10-25 11:31:34 +02:00

packages

Use inline and block for x/y utilities (#14805 )