Skip to content

Commit ca4e4ae

Browse files
adamwathanadamwathan
authored
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>
1 parent 5f3630b commit ca4e4ae

File tree

7 files changed

+61
-54
lines changed

7 files changed

+61
-54
lines changed

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2424
### Changed
2525

2626
- Remove `--drop-shadow-none` from the default theme in favor of a static `drop-shadow-none` utility ([#14847](https://github.com/tailwindlabs/tailwindcss/pull/14847))
27+
- Rename `shadow` to `shadow-sm`, `shadow-sm` to `shadow-xs`, and `shadow-xs` to `shadow-2xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
28+
- Rename `inset-shadow` to `inset-shadow-sm`, `inset-shadow-sm` to `inset-shadow-xs`, and `inset-shadow-xs` to `inset-shadow-2xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
29+
- Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
30+
- Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
31+
- Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
2732

2833
## [4.0.0-alpha.31] - 2024-10-29
2934

‎packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -264,34 +264,34 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
264264
--animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
265265
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
266266
--animate-bounce: bounce 1s infinite;
267-
--blur: 8px;
268-
--blur-sm: 4px;
267+
--blur-xs: 4px;
268+
--blur-sm: 8px;
269269
--blur-md: 12px;
270270
--blur-lg: 16px;
271271
--blur-xl: 24px;
272272
--blur-2xl: 40px;
273273
--blur-3xl: 64px;
274-
--radius: .25rem;
275-
--radius-sm: .125rem;
274+
--radius-xs: .125rem;
275+
--radius-sm: .25rem;
276276
--radius-md: .375rem;
277277
--radius-lg: .5rem;
278278
--radius-xl: .75rem;
279279
--radius-2xl: 1rem;
280280
--radius-3xl: 1.5rem;
281281
--radius-4xl: 2rem;
282-
--shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
283-
--shadow-xs: 0 1px #0000000d;
284-
--shadow-sm: 0 1px 2px 0 #0000000d;
282+
--shadow-2xs: 0 1px #0000000d;
283+
--shadow-xs: 0 1px 2px 0 #0000000d;
284+
--shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
285285
--shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
286286
--shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
287287
--shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
288288
--shadow-2xl: 0 25px 50px -12px #00000040;
289289
--shadow-inner: inset 0 2px 4px 0 #0000000d;
290-
--inset-shadow-xs: inset 0 1px #0000000d;
291-
--inset-shadow-sm: inset 0 1px 1px #0000000d;
292-
--inset-shadow: inset 0 2px 4px #0000000d;
293-
--drop-shadow: 0 1px 2px #0000001a, 0 1px 1px #0000000f;
294-
--drop-shadow-sm: 0 1px 1px #0000000d;
290+
--inset-shadow-2xs: inset 0 1px #0000000d;
291+
--inset-shadow-xs: inset 0 1px 1px #0000000d;
292+
--inset-shadow-sm: inset 0 2px 4px #0000000d;
293+
--drop-shadow-xs: 0 1px 1px #0000000d;
294+
--drop-shadow-sm: 0 1px 2px #0000001a, 0 1px 1px #0000000f;
295295
--drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f;
296296
--drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
297297
--drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;

‎packages/tailwindcss/src/__snapshots__/index.test.ts.snap

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -263,34 +263,34 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
263263
--animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
264264
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
265265
--animate-bounce: bounce 1s infinite;
266-
--blur: 8px;
267-
--blur-sm: 4px;
266+
--blur-xs: 4px;
267+
--blur-sm: 8px;
268268
--blur-md: 12px;
269269
--blur-lg: 16px;
270270
--blur-xl: 24px;
271271
--blur-2xl: 40px;
272272
--blur-3xl: 64px;
273-
--radius: .25rem;
274-
--radius-sm: .125rem;
273+
--radius-xs: .125rem;
274+
--radius-sm: .25rem;
275275
--radius-md: .375rem;
276276
--radius-lg: .5rem;
277277
--radius-xl: .75rem;
278278
--radius-2xl: 1rem;
279279
--radius-3xl: 1.5rem;
280280
--radius-4xl: 2rem;
281-
--shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
282-
--shadow-xs: 0 1px #0000000d;
283-
--shadow-sm: 0 1px 2px 0 #0000000d;
281+
--shadow-2xs: 0 1px #0000000d;
282+
--shadow-xs: 0 1px 2px 0 #0000000d;
283+
--shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
284284
--shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
285285
--shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
286286
--shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
287287
--shadow-2xl: 0 25px 50px -12px #00000040;
288288
--shadow-inner: inset 0 2px 4px 0 #0000000d;
289-
--inset-shadow-xs: inset 0 1px #0000000d;
290-
--inset-shadow-sm: inset 0 1px 1px #0000000d;
291-
--inset-shadow: inset 0 2px 4px #0000000d;
292-
--drop-shadow: 0 1px 2px #0000001a, 0 1px 1px #0000000f;
293-
--drop-shadow-sm: 0 1px 1px #0000000d;
289+
--inset-shadow-2xs: inset 0 1px #0000000d;
290+
--inset-shadow-xs: inset 0 1px 1px #0000000d;
291+
--inset-shadow-sm: inset 0 2px 4px #0000000d;
292+
--drop-shadow-xs: 0 1px 1px #0000000d;
293+
--drop-shadow-sm: 0 1px 2px #0000001a, 0 1px 1px #0000000f;
294294
--drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f;
295295
--drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
296296
--drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
@@ -412,7 +412,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
412412
background-color: var(--color-red-500, oklch(.637 .237 25.331));
413413
}
414414
415-
.shadow {
415+
.shadow-sm {
416416
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
417417
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
418418
}

‎packages/tailwindcss/src/index.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ describe('compiling CSS', () => {
111111
${defaultTheme}
112112
@tailwind utilities;
113113
`,
114-
['bg-red-500', 'w-4', 'sm:flex', 'shadow'],
114+
['bg-red-500', 'w-4', 'sm:flex', 'shadow-sm'],
115115
),
116116
).toMatchSnapshot()
117117
})

‎packages/tailwindcss/src/utilities.test.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14559,14 +14559,14 @@ test('shadow', async () => {
1455914559
css`
1456014560
@theme {
1456114561
--color-red-500: #ef4444;
14562-
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
14562+
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1456314563
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1456414564
}
1456514565
@tailwind utilities;
1456614566
`,
1456714567
[
1456814568
// Shadows
14569-
'shadow',
14569+
'shadow-sm',
1457014570
'shadow-xl',
1457114571
'shadow-none',
1457214572
'shadow-[12px_12px_#0088cc]',
@@ -14598,15 +14598,10 @@ test('shadow', async () => {
1459814598
).toMatchInlineSnapshot(`
1459914599
":root {
1460014600
--color-red-500: #ef4444;
14601-
--shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
14601+
--shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
1460214602
--shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
1460314603
}
1460414604
14605-
.shadow {
14606-
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
14607-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
14608-
}
14609-
1461014605
.shadow-\\[10px_10px\\] {
1461114606
--tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor);
1461214607
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -14627,6 +14622,11 @@ test('shadow', async () => {
1462714622
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1462814623
}
1462914624
14625+
.shadow-sm {
14626+
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
14627+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
14628+
}
14629+
1463014630
.shadow-xl {
1463114631
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
1463214632
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

‎packages/tailwindcss/tests/ui.spec.ts

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) =>
214214
page,
215215
html`<div
216216
id="x"
217-
class="shadow shadow-[#f00] inset-shadow inset-shadow-[#0f0] ring ring-[#fff] inset-ring inset-ring-[#00f]"
217+
class="shadow-sm shadow-[#f00] inset-shadow-sm inset-shadow-[#0f0] ring ring-[#fff] inset-ring inset-ring-[#00f]"
218218
></div>`,
219219
)
220220

@@ -233,11 +233,13 @@ test('shadow colors', async ({ page }) => {
233233
let { getPropertyValue } = await render(
234234
page,
235235
html`
236-
<div id="a" class="shadow shadow-red"></div>
236+
<div id="a" class="shadow-sm shadow-red"></div>
237237
<div id="b" class="shadow-xl shadow-red"></div>
238238
<div id="c" class="shadow-[0px_2px_4px] shadow-red"></div>
239-
<div id="d" class="shadow shadow-red hover:shadow-xl">Hello world</div>
240-
<div id="e" class="shadow shadow-red hover:shadow-xl hover:shadow-initial">Hello world</div>
239+
<div id="d" class="shadow-sm shadow-red hover:shadow-xl">Hello world</div>
240+
<div id="e" class="shadow-sm shadow-red hover:shadow-xl hover:shadow-initial">
241+
Hello world
242+
</div>
241243
`,
242244
)
243245

@@ -318,13 +320,13 @@ test('inset shadow colors', async ({ page }) => {
318320
let { getPropertyValue } = await render(
319321
page,
320322
html`
321-
<div id="a" class="inset-shadow-sm inset-shadow-red"></div>
322-
<div id="b" class="inset-shadow inset-shadow-red"></div>
323+
<div id="a" class="inset-shadow-xs inset-shadow-red"></div>
324+
<div id="b" class="inset-shadow-sm inset-shadow-red"></div>
323325
<div id="c" class="inset-shadow-[0px_3px_6px] inset-shadow-red"></div>
324-
<div id="d" class="inset-shadow-sm inset-shadow-red hover:inset-shadow">Hello world</div>
326+
<div id="d" class="inset-shadow-xs inset-shadow-red hover:inset-shadow-sm">Hello world</div>
325327
<div
326328
id="e"
327-
class="inset-shadow-sm inset-shadow-red hover:inset-shadow hover:inset-shadow-initial"
329+
class="inset-shadow-xs inset-shadow-red hover:inset-shadow-sm hover:inset-shadow-initial"
328330
>
329331
Hello world
330332
</div>

‎packages/tailwindcss/theme.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -291,17 +291,17 @@
291291
--animate-bounce: bounce 1s infinite;
292292

293293
/* Blurs */
294-
--blur: 8px;
295-
--blur-sm: 4px;
294+
--blur-xs: 4px;
295+
--blur-sm: 8px;
296296
--blur-md: 12px;
297297
--blur-lg: 16px;
298298
--blur-xl: 24px;
299299
--blur-2xl: 40px;
300300
--blur-3xl: 64px;
301301

302302
/* Radii */
303-
--radius: 0.25rem;
304-
--radius-sm: 0.125rem;
303+
--radius-xs: 0.125rem;
304+
--radius-sm: 0.25rem;
305305
--radius-md: 0.375rem;
306306
--radius-lg: 0.5rem;
307307
--radius-xl: 0.75rem;
@@ -310,23 +310,23 @@
310310
--radius-4xl: 2rem;
311311

312312
/* Shadows */
313-
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
314-
--shadow-xs: 0 1px rgb(0 0 0 / 0.05);
315-
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
313+
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
314+
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
315+
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
316316
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
317317
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
318318
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
319319
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
320320
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
321321

322322
/* Inset shadows */
323-
--inset-shadow-xs: inset 0 1px rgb(0 0 0 / 0.05);
324-
--inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
325-
--inset-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05);
323+
--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
324+
--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
325+
--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
326326

327327
/* Drop shadows */
328-
--drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
329-
--drop-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.05);
328+
--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
329+
--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
330330
--drop-shadow-md: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06);
331331
--drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1);
332332
--drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);

0 commit comments

Comments
 (0)