Skip to content

Commit 17f8b60

Browse files
adamwathanadamwathan
committed
Use variables with fallbacks for utility classes
1 parent 65f6f7c commit 17f8b60

File tree

8 files changed

+307
-289
lines changed

8 files changed

+307
-289
lines changed

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -581,12 +581,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
581581
582582
@layer utilities {
583583
.text-2xl {
584-
font-size: 1.5rem;
585-
line-height: 2rem;
584+
font-size: var(--font-size-2xl, 1.5rem);
585+
line-height: var(--font-size-2xl--line-height, 2rem);
586586
}
587587
588588
.text-black\\/50 {
589-
color: #00000080;
589+
color: color-mix(in srgb, var(--color-black, #000) 50%, transparent);
590590
}
591591
592592
.underline {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
104104

105105
expect(result.css.trim()).toMatchInlineSnapshot(`
106106
".foo {
107-
color: #ef4444;
107+
color: var(--color-red-500, #ef4444);
108108
}"
109109
`)
110110
})

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -400,11 +400,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
400400
}
401401
402402
.w-4 {
403-
width: 1rem;
403+
width: var(--spacing-4, 1rem);
404404
}
405405
406406
.bg-red-500 {
407-
background-color: #ef4444;
407+
background-color: var(--color-red-500, #ef4444);
408408
}
409409
410410
.shadow {

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

+22-22
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,11 @@ exports[`border-* 1`] = `
9191
}
9292
9393
.border-red-500 {
94-
border-color: #ef4444;
94+
border-color: var(--color-red-500, #ef4444);
9595
}
9696
9797
.border-red-500\\/50 {
98-
border-color: #ef444480;
98+
border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
9999
}
100100
101101
.border-transparent {
@@ -200,11 +200,11 @@ exports[`border-b-* 1`] = `
200200
}
201201
202202
.border-b-red-500 {
203-
border-bottom-color: #ef4444;
203+
border-bottom-color: var(--color-red-500, #ef4444);
204204
}
205205
206206
.border-b-red-500\\/50 {
207-
border-bottom-color: #ef444480;
207+
border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
208208
}
209209
210210
.border-b-transparent {
@@ -309,11 +309,11 @@ exports[`border-e-* 1`] = `
309309
}
310310
311311
.border-e-red-500 {
312-
border-inline-end-color: #ef4444;
312+
border-inline-end-color: var(--color-red-500, #ef4444);
313313
}
314314
315315
.border-e-red-500\\/50 {
316-
border-inline-end-color: #ef444480;
316+
border-inline-end-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
317317
}
318318
319319
.border-e-transparent {
@@ -418,11 +418,11 @@ exports[`border-l-* 1`] = `
418418
}
419419
420420
.border-l-red-500 {
421-
border-left-color: #ef4444;
421+
border-left-color: var(--color-red-500, #ef4444);
422422
}
423423
424424
.border-l-red-500\\/50 {
425-
border-left-color: #ef444480;
425+
border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
426426
}
427427
428428
.border-l-transparent {
@@ -527,11 +527,11 @@ exports[`border-r-* 1`] = `
527527
}
528528
529529
.border-r-red-500 {
530-
border-right-color: #ef4444;
530+
border-right-color: var(--color-red-500, #ef4444);
531531
}
532532
533533
.border-r-red-500\\/50 {
534-
border-right-color: #ef444480;
534+
border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
535535
}
536536
537537
.border-r-transparent {
@@ -636,11 +636,11 @@ exports[`border-s-* 1`] = `
636636
}
637637
638638
.border-s-red-500 {
639-
border-inline-start-color: #ef4444;
639+
border-inline-start-color: var(--color-red-500, #ef4444);
640640
}
641641
642642
.border-s-red-500\\/50 {
643-
border-inline-start-color: #ef444480;
643+
border-inline-start-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
644644
}
645645
646646
.border-s-transparent {
@@ -745,11 +745,11 @@ exports[`border-t-* 1`] = `
745745
}
746746
747747
.border-t-red-500 {
748-
border-top-color: #ef4444;
748+
border-top-color: var(--color-red-500, #ef4444);
749749
}
750750
751751
.border-t-red-500\\/50 {
752-
border-top-color: #ef444480;
752+
border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
753753
}
754754
755755
.border-t-transparent {
@@ -882,13 +882,13 @@ exports[`border-x-* 1`] = `
882882
}
883883
884884
.border-x-red-500 {
885-
border-left-color: #ef4444;
886-
border-right-color: #ef4444;
885+
border-left-color: var(--color-red-500, #ef4444);
886+
border-right-color: var(--color-red-500, #ef4444);
887887
}
888888
889889
.border-x-red-500\\/50 {
890-
border-left-color: #ef444480;
891-
border-right-color: #ef444480;
890+
border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
891+
border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
892892
}
893893
894894
.border-x-transparent {
@@ -1022,13 +1022,13 @@ exports[`border-y-* 1`] = `
10221022
}
10231023
10241024
.border-y-red-500 {
1025-
border-top-color: #ef4444;
1026-
border-bottom-color: #ef4444;
1025+
border-top-color: var(--color-red-500, #ef4444);
1026+
border-bottom-color: var(--color-red-500, #ef4444);
10271027
}
10281028
10291029
.border-y-red-500\\/50 {
1030-
border-top-color: #ef444480;
1031-
border-bottom-color: #ef444480;
1030+
border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
1031+
border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
10321032
}
10331033
10341034
.border-y-transparent {

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

+29-29
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ describe('compiling CSS', () => {
4444
4545
@media (prefers-color-scheme: dark) {
4646
.dark\\:bg-black {
47-
background-color: #000;
47+
background-color: var(--color-black, #000);
4848
}
4949
}
5050
}"
@@ -186,28 +186,28 @@ describe('@apply', () => {
186186
.foo {
187187
--tw-translate-x: 100%;
188188
translate: var(--tw-translate-x) var(--tw-translate-y);
189-
background-color: #ef4444;
189+
animation: var(--animate-spin, spin 1s linear infinite);
190+
background-color: var(--color-red-500, #ef4444);
190191
text-decoration-line: underline;
191-
animation: 1s linear infinite spin;
192192
}
193193
194194
.foo:hover {
195-
background-color: #3b82f6;
195+
background-color: var(--color-blue-500, #3b82f6);
196196
}
197197
198198
@media (width >= 768px) {
199199
.foo {
200-
background-color: #22c55e;
200+
background-color: var(--color-green-500, #22c55e);
201201
}
202202
}
203203
204204
.foo:hover:focus {
205-
background-color: #fecaca;
205+
background-color: var(--color-red-200, #fecaca);
206206
}
207207
208208
@media (width >= 768px) {
209209
.foo:hover:focus {
210-
background-color: #bbf7d0;
210+
background-color: var(--color-green-200, #bbf7d0);
211211
}
212212
}
213213
@@ -412,7 +412,7 @@ describe('important', () => {
412412
}
413413
414414
.animate-spin\\! {
415-
animation: 1s linear infinite spin !important;
415+
animation: var(--animate-spin, spin 1s linear infinite) !important;
416416
}
417417
418418
@keyframes spin {
@@ -458,16 +458,16 @@ describe('sorting', () => {
458458
}
459459
460460
.p-1 {
461-
padding: .25rem;
461+
padding: var(--spacing-1, .25rem);
462462
}
463463
464464
.px-1 {
465-
padding-left: .25rem;
466-
padding-right: .25rem;
465+
padding-left: var(--spacing-1, .25rem);
466+
padding-right: var(--spacing-1, .25rem);
467467
}
468468
469469
.pl-1 {
470-
padding-left: .25rem;
470+
padding-left: var(--spacing-1, .25rem);
471471
}"
472472
`)
473473
})
@@ -516,17 +516,17 @@ describe('sorting', () => {
516516
}
517517
518518
.mx-0 {
519-
margin-left: 0;
520-
margin-right: 0;
519+
margin-left: var(--spacing-0, 0px);
520+
margin-right: var(--spacing-0, 0px);
521521
}
522522
523523
.gap-4 {
524-
gap: 1rem;
524+
gap: var(--spacing-4, 1rem);
525525
}
526526
527527
:where(.space-x-2 > :not([hidden]) ~ :not([hidden])) {
528-
margin-inline-start: calc(.5rem * calc(1 - var(--tw-space-x-reverse)));
529-
margin-inline-end: calc(.5rem * var(--tw-space-x-reverse));
528+
margin-inline-start: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse)));
529+
margin-inline-end: calc(var(--spacing-2, .5rem) * var(--tw-space-x-reverse));
530530
}
531531
532532
@property --tw-space-x-reverse {
@@ -707,7 +707,7 @@ describe('Parsing themes values from CSS', () => {
707707
}
708708
709709
.accent-red-500 {
710-
accent-color: red;
710+
accent-color: var(--color-red-500, red);
711711
}"
712712
`)
713713
})
@@ -730,7 +730,7 @@ describe('Parsing themes values from CSS', () => {
730730
}
731731
732732
.accent-red-500 {
733-
accent-color: #f10;
733+
accent-color: var(--color-red-500, #f10);
734734
}"
735735
`)
736736
})
@@ -756,11 +756,11 @@ describe('Parsing themes values from CSS', () => {
756756
}
757757
758758
.accent-blue-500 {
759-
accent-color: #00f;
759+
accent-color: var(--color-blue-500, #00f);
760760
}
761761
762762
.accent-red-500 {
763-
accent-color: red;
763+
accent-color: var(--color-red-500, red);
764764
}"
765765
`)
766766
})
@@ -785,11 +785,11 @@ describe('Parsing themes values from CSS', () => {
785785
}
786786
787787
.w-1\\/2 {
788-
width: 75%;
788+
width: var(--width-1\\/2, 75%);
789789
}
790790
791791
.w-75\\% {
792-
width: 50%;
792+
width: var(--width-75\\%, 50%);
793793
}"
794794
`)
795795
})
@@ -822,11 +822,11 @@ describe('Parsing themes values from CSS', () => {
822822
}
823823
824824
.text-lg {
825-
font-size: 20px;
825+
font-size: var(--font-size-lg, 20px);
826826
}
827827
828828
.accent-red {
829-
accent-color: red;
829+
accent-color: var(--color-red, red);
830830
}
831831
832832
@keyframes foo {
@@ -865,11 +865,11 @@ describe('Parsing themes values from CSS', () => {
865865
}
866866
867867
.text-sm {
868-
font-size: 13px;
868+
font-size: var(--font-size-sm, 13px);
869869
}
870870
871871
.accent-green {
872-
accent-color: #0f0;
872+
accent-color: var(--color-green, #0f0);
873873
}"
874874
`)
875875
})
@@ -900,7 +900,7 @@ describe('Parsing themes values from CSS', () => {
900900
}
901901
902902
.accent-green {
903-
accent-color: #0f0;
903+
accent-color: var(--color-green, #0f0);
904904
}"
905905
`)
906906
})
@@ -938,7 +938,7 @@ describe('Parsing themes values from CSS', () => {
938938
}
939939
940940
.animate-foobar {
941-
animation: 1s infinite foobar;
941+
animation: var(--animate-foobar, foobar 1s infinite);
942942
}
943943
944944
@keyframes foobar {

0 commit comments

Comments
 (0)