tailwindcss

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

History

Adjust shadow, radius, and blur scales to ensure all utilities have a value suffix (#14849 )

This PR reworks the default `--shadow-*` and `--inset-shadow-*` scales
to remove the bare `shadow` and `inset-shadow` utilities, and ensure
every shadow has an explicit size as part of the utility name.

Here's a complete list of changes:

| v3                | v4 Alpha          | Proposed           |
| ----------------- | ----------------- | ------------------ |
| _N/A_             | `shadow-xs`       | `shadow-2xs`       |
| `shadow-sm`       | `shadow-sm`       | `shadow-xs`        |
| `shadow`          | `shadow`          | `shadow-sm`        |
| `shadow-md`       | `shadow-md`       | `shadow-md`        |
| `shadow-lg`       | `shadow-lg`       | `shadow-lg`        |
| `shadow-xl`       | `shadow-xl`       | `shadow-xl`        |
| _N/A_ | `inset-shadow-xs` | `inset-shadow-2xs` |
| _N/A_ | `inset-shadow-sm` | `inset-shadow-xs`  |
| `shadow-inner`    | `inset-shadow`    | `inset-shadow-sm`     |

The motivation for this change is just to make the scale more
predictable — it's never been intuitive to me that `shadow` sits in
between `shadow-sm` and `shadow-md`.

This PR doesn't remove the ability to create classes like `shadow` and
`inset-shadow` by adding bare `--shadow` and `--inset-shadow` theme
variables, but does remove them from the default theme.

## Impact

We'll include a codemod for this in our upgrade tool to automate this
change for people upgrading from v3 to v4, but this is still sort of an
annoying breaking change admittedly and will make lots of educational
resources, example components, and LLM tools out of date for v4 😕 At the
same time I don't want to feel like we can never correct regrettable
legacy decisions just to preserve backward compatibility.

We made a similar change like this when we went from the v0.x color
palette to the v1.x color palette changing names like `bg-red` to
`bg-red-500` and that proved to definitely be the right decision long
term, so want to rip the band-aid off here too if we can.

Planning to make the same change for `rounded`, `drop-shadow`, and
`blur` as well — maybe in separate PRs but maybe just all in this one as
well since I don't think we want to do one and not all.

_Update_: I've also made the same changes to the `--radius-*`,
`--drop-shadow-*`, and `--blur-*` scales now, effectively removed the
`rounded`, `drop-shadow`, and `blur` classes by default, and changing
the meaning `rounded-sm`, `drop-shadow-sm`, and `blur-sm`.

We'll put together a codemod to handle this stuff in a separate PR.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

2024-11-04 14:04:03 -05:00

src

Adjust shadow, radius, and blur scales to ensure all utilities have a value suffix (#14849 )

2024-11-04 14:04:03 -05:00

package.json

Prepare v4.0.0-alpha.31 release (#14823 )

2024-10-30 07:53:51 -04:00

README.md

Copy README file to every package (#13096 )

2024-03-06 08:49:31 -05:00

tsconfig.json

introduce v4 codebase