Skip to content

Commit 289c25f

Browse files
adamwathanadamwathan
authored
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>
1 parent e14ab1f commit 289c25f

File tree

6 files changed

+163
-312
lines changed

6 files changed

+163
-312
lines changed

‎CHANGELOG.md

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

1212
- Support calling `config()` with no arguments in plugin API ([#14799](https://github.com/tailwindlabs/tailwindcss/pull/14799))
1313

14+
### Changed
15+
16+
- Use logical `*-inline` and `*-block` properties for all x/y utilities like `px-*`, `my-*`, `scroll-px-*`, and `inset-y-*` ([#14805](https://github.com/tailwindlabs/tailwindcss/pull/14805))
17+
1418
## [4.0.0-alpha.30] - 2024-10-24
1519

1620
### Added

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

Lines changed: 64 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -856,133 +856,101 @@ exports[`border-x-* 1`] = `
856856
}
857857
858858
.border-x {
859-
border-left-style: var(--tw-border-style);
860-
border-right-style: var(--tw-border-style);
861-
border-left-width: 1px;
862-
border-right-width: 1px;
859+
border-inline-style: var(--tw-border-style);
860+
border-inline-width: 1px;
863861
}
864862
865863
.border-x-0 {
866-
border-left-style: var(--tw-border-style);
867-
border-right-style: var(--tw-border-style);
868-
border-left-width: 0;
869-
border-right-width: 0;
864+
border-inline-style: var(--tw-border-style);
865+
border-inline-width: 0;
870866
}
871867
872868
.border-x-2 {
873-
border-left-style: var(--tw-border-style);
874-
border-right-style: var(--tw-border-style);
875-
border-left-width: 2px;
876-
border-right-width: 2px;
869+
border-inline-style: var(--tw-border-style);
870+
border-inline-width: 2px;
877871
}
878872
879873
.border-x-4 {
880-
border-left-style: var(--tw-border-style);
881-
border-right-style: var(--tw-border-style);
882-
border-left-width: 4px;
883-
border-right-width: 4px;
874+
border-inline-style: var(--tw-border-style);
875+
border-inline-width: 4px;
884876
}
885877
886878
.border-x-123 {
887-
border-left-style: var(--tw-border-style);
888-
border-right-style: var(--tw-border-style);
889-
border-left-width: 123px;
890-
border-right-width: 123px;
879+
border-inline-style: var(--tw-border-style);
880+
border-inline-width: 123px;
891881
}
892882
893883
.border-x-\\[12px\\] {
894-
border-left-style: var(--tw-border-style);
895-
border-right-style: var(--tw-border-style);
896-
border-left-width: 12px;
897-
border-right-width: 12px;
884+
border-inline-style: var(--tw-border-style);
885+
border-inline-width: 12px;
898886
}
899887
900888
.border-x-\\[length\\:var\\(--my-width\\)\\], .border-x-\\[line-width\\:var\\(--my-width\\)\\] {
901-
border-left-style: var(--tw-border-style);
902-
border-right-style: var(--tw-border-style);
903-
border-left-width: var(--my-width);
904-
border-right-width: var(--my-width);
889+
border-inline-style: var(--tw-border-style);
890+
border-inline-width: var(--my-width);
905891
}
906892
907893
.border-x-\\[medium\\] {
908-
border-left-style: var(--tw-border-style);
909-
border-right-style: var(--tw-border-style);
910-
border-left-width: medium;
911-
border-right-width: medium;
894+
border-inline-style: var(--tw-border-style);
895+
border-inline-width: medium;
912896
}
913897
914898
.border-x-\\[thick\\] {
915-
border-left-style: var(--tw-border-style);
916-
border-right-style: var(--tw-border-style);
917-
border-left-width: thick;
918-
border-right-width: thick;
899+
border-inline-style: var(--tw-border-style);
900+
border-inline-width: thick;
919901
}
920902
921903
.border-x-\\[thin\\] {
922-
border-left-style: var(--tw-border-style);
923-
border-right-style: var(--tw-border-style);
924-
border-left-width: thin;
925-
border-right-width: thin;
904+
border-inline-style: var(--tw-border-style);
905+
border-inline-width: thin;
926906
}
927907
928908
.border-x-\\[\\#0088cc\\] {
929-
border-left-color: #08c;
930-
border-right-color: #08c;
909+
border-inline-color: #08c;
931910
}
932911
933912
.border-x-\\[\\#0088cc\\]\\/50 {
934-
border-left-color: oklch(59.9824% .14119 241.555 / .5);
935-
border-right-color: oklch(59.9824% .14119 241.555 / .5);
913+
border-inline-color: oklch(59.9824% .14119 241.555 / .5);
936914
}
937915
938916
.border-x-\\[color\\:var\\(--my-color\\)\\] {
939-
border-left-color: var(--my-color);
940-
border-right-color: var(--my-color);
917+
border-inline-color: var(--my-color);
941918
}
942919
943920
.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
944-
border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
945-
border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
921+
border-inline-color: color-mix(in oklch, var(--my-color) 50%, transparent);
946922
}
947923
948924
.border-x-\\[var\\(--my-color\\)\\] {
949-
border-left-color: var(--my-color);
950-
border-right-color: var(--my-color);
925+
border-inline-color: var(--my-color);
951926
}
952927
953928
.border-x-\\[var\\(--my-color\\)\\]\\/50 {
954-
border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
955-
border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
929+
border-inline-color: color-mix(in oklch, var(--my-color) 50%, transparent);
956930
}
957931
958932
.border-x-current {
959-
border-left-color: currentColor;
960-
border-right-color: currentColor;
933+
border-inline-color: currentColor;
961934
}
962935
963936
.border-x-current\\/50 {
964-
border-left-color: color-mix(in oklch, currentColor 50%, transparent);
965-
border-right-color: color-mix(in oklch, currentColor 50%, transparent);
937+
border-inline-color: color-mix(in oklch, currentColor 50%, transparent);
966938
}
967939
968940
.border-x-inherit {
969-
border-left-color: inherit;
970-
border-right-color: inherit;
941+
border-inline-color: inherit;
971942
}
972943
973944
.border-x-red-500 {
974-
border-left-color: var(--color-red-500, #ef4444);
975-
border-right-color: var(--color-red-500, #ef4444);
945+
border-inline-color: var(--color-red-500, #ef4444);
976946
}
977947
978948
.border-x-red-500\\/50 {
979-
border-left-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
980-
border-right-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
949+
border-inline-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
981950
}
982951
983952
.border-x-transparent {
984-
border-left-color: #0000;
985-
border-right-color: #0000;
953+
border-inline-color: #0000;
986954
}
987955
988956
@supports (-moz-orient: inline) {
@@ -1009,133 +977,101 @@ exports[`border-y-* 1`] = `
1009977
}
1010978
1011979
.border-y {
1012-
border-top-style: var(--tw-border-style);
1013-
border-bottom-style: var(--tw-border-style);
1014-
border-top-width: 1px;
1015-
border-bottom-width: 1px;
980+
border-block-style: var(--tw-border-style);
981+
border-block-width: 1px;
1016982
}
1017983
1018984
.border-y-0 {
1019-
border-top-style: var(--tw-border-style);
1020-
border-bottom-style: var(--tw-border-style);
1021-
border-top-width: 0;
1022-
border-bottom-width: 0;
985+
border-block-style: var(--tw-border-style);
986+
border-block-width: 0;
1023987
}
1024988
1025989
.border-y-2 {
1026-
border-top-style: var(--tw-border-style);
1027-
border-bottom-style: var(--tw-border-style);
1028-
border-top-width: 2px;
1029-
border-bottom-width: 2px;
990+
border-block-style: var(--tw-border-style);
991+
border-block-width: 2px;
1030992
}
1031993
1032994
.border-y-4 {
1033-
border-top-style: var(--tw-border-style);
1034-
border-bottom-style: var(--tw-border-style);
1035-
border-top-width: 4px;
1036-
border-bottom-width: 4px;
995+
border-block-style: var(--tw-border-style);
996+
border-block-width: 4px;
1037997
}
1038998
1039999
.border-y-123 {
1040-
border-top-style: var(--tw-border-style);
1041-
border-bottom-style: var(--tw-border-style);
1042-
border-top-width: 123px;
1043-
border-bottom-width: 123px;
1000+
border-block-style: var(--tw-border-style);
1001+
border-block-width: 123px;
10441002
}
10451003
10461004
.border-y-\\[12px\\] {
1047-
border-top-style: var(--tw-border-style);
1048-
border-bottom-style: var(--tw-border-style);
1049-
border-top-width: 12px;
1050-
border-bottom-width: 12px;
1005+
border-block-style: var(--tw-border-style);
1006+
border-block-width: 12px;
10511007
}
10521008
10531009
.border-y-\\[length\\:var\\(--my-width\\)\\], .border-y-\\[line-width\\:var\\(--my-width\\)\\] {
1054-
border-top-style: var(--tw-border-style);
1055-
border-bottom-style: var(--tw-border-style);
1056-
border-top-width: var(--my-width);
1057-
border-bottom-width: var(--my-width);
1010+
border-block-style: var(--tw-border-style);
1011+
border-block-width: var(--my-width);
10581012
}
10591013
10601014
.border-y-\\[medium\\] {
1061-
border-top-style: var(--tw-border-style);
1062-
border-bottom-style: var(--tw-border-style);
1063-
border-top-width: medium;
1064-
border-bottom-width: medium;
1015+
border-block-style: var(--tw-border-style);
1016+
border-block-width: medium;
10651017
}
10661018
10671019
.border-y-\\[thick\\] {
1068-
border-top-style: var(--tw-border-style);
1069-
border-bottom-style: var(--tw-border-style);
1070-
border-top-width: thick;
1071-
border-bottom-width: thick;
1020+
border-block-style: var(--tw-border-style);
1021+
border-block-width: thick;
10721022
}
10731023
10741024
.border-y-\\[thin\\] {
1075-
border-top-style: var(--tw-border-style);
1076-
border-bottom-style: var(--tw-border-style);
1077-
border-top-width: thin;
1078-
border-bottom-width: thin;
1025+
border-block-style: var(--tw-border-style);
1026+
border-block-width: thin;
10791027
}
10801028
10811029
.border-y-\\[\\#0088cc\\] {
1082-
border-top-color: #08c;
1083-
border-bottom-color: #08c;
1030+
border-block-color: #08c;
10841031
}
10851032
10861033
.border-y-\\[\\#0088cc\\]\\/50 {
1087-
border-top-color: oklch(59.9824% .14119 241.555 / .5);
1088-
border-bottom-color: oklch(59.9824% .14119 241.555 / .5);
1034+
border-block-color: oklch(59.9824% .14119 241.555 / .5);
10891035
}
10901036
10911037
.border-y-\\[color\\:var\\(--my-color\\)\\] {
1092-
border-top-color: var(--my-color);
1093-
border-bottom-color: var(--my-color);
1038+
border-block-color: var(--my-color);
10941039
}
10951040
10961041
.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
1097-
border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
1098-
border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
1042+
border-block-color: color-mix(in oklch, var(--my-color) 50%, transparent);
10991043
}
11001044
11011045
.border-y-\\[var\\(--my-color\\)\\] {
1102-
border-top-color: var(--my-color);
1103-
border-bottom-color: var(--my-color);
1046+
border-block-color: var(--my-color);
11041047
}
11051048
11061049
.border-y-\\[var\\(--my-color\\)\\]\\/50 {
1107-
border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
1108-
border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
1050+
border-block-color: color-mix(in oklch, var(--my-color) 50%, transparent);
11091051
}
11101052
11111053
.border-y-current {
1112-
border-top-color: currentColor;
1113-
border-bottom-color: currentColor;
1054+
border-block-color: currentColor;
11141055
}
11151056
11161057
.border-y-current\\/50 {
1117-
border-top-color: color-mix(in oklch, currentColor 50%, transparent);
1118-
border-bottom-color: color-mix(in oklch, currentColor 50%, transparent);
1058+
border-block-color: color-mix(in oklch, currentColor 50%, transparent);
11191059
}
11201060
11211061
.border-y-inherit {
1122-
border-top-color: inherit;
1123-
border-bottom-color: inherit;
1062+
border-block-color: inherit;
11241063
}
11251064
11261065
.border-y-red-500 {
1127-
border-top-color: var(--color-red-500, #ef4444);
1128-
border-bottom-color: var(--color-red-500, #ef4444);
1066+
border-block-color: var(--color-red-500, #ef4444);
11291067
}
11301068
11311069
.border-y-red-500\\/50 {
1132-
border-top-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
1133-
border-bottom-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
1070+
border-block-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
11341071
}
11351072
11361073
.border-y-transparent {
1137-
border-top-color: #0000;
1138-
border-bottom-color: #0000;
1074+
border-block-color: #0000;
11391075
}
11401076
11411077
@supports (-moz-orient: inline) {

0 commit comments

Comments
 (0)