fix: use @variant for tailwind 4.0

This commit is contained in:
ZhenShuo Leo
2025-07-13 21:31:59 +08:00
parent 2c71bda97f
commit 367be5c6d4
2 changed files with 24 additions and 24 deletions
+12 -12
View File
@@ -3746,7 +3746,7 @@ pre {
[id^="fn"], [id^="fnref"] { [id^="fn"], [id^="fnref"] {
scroll-margin-top: 145px; scroll-margin-top: 145px;
} }
@screen sm { @media (width >= 640px) {
.thumbnail { .thumbnail {
min-width: 100%; min-width: 100%;
height: 180px; height: 180px;
@@ -3755,7 +3755,7 @@ pre {
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
@screen md { @media (width >= 853px) {
.thumbnail { .thumbnail {
min-width: 300px; min-width: 300px;
min-height: 180px; min-height: 180px;
@@ -3873,7 +3873,7 @@ pre {
width: calc(100% - 5px); width: calc(100% - 5px);
margin: 0px !important; margin: 0px !important;
} }
@screen sm { @media (width >= 640px) {
.sm\:grid-w10 { .sm\:grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@@ -3959,7 +3959,7 @@ pre {
margin: 0px !important; margin: 0px !important;
} }
} }
@screen md { @media (width >= 853px) {
.md\:grid-w10 { .md\:grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@@ -4045,7 +4045,7 @@ pre {
margin: 0px !important; margin: 0px !important;
} }
} }
@screen lg { @media (width >= 1024px) {
.lg\:grid-w10 { .lg\:grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@@ -4131,7 +4131,7 @@ pre {
margin: 0px !important; margin: 0px !important;
} }
} }
@screen xl { @media (width >= 1280px) {
.xl\:grid-w10 { .xl\:grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@@ -4217,7 +4217,7 @@ pre {
margin: 0px !important; margin: 0px !important;
} }
} }
@screen 2xl { @media (width >= 1536px) {
.2xl\:grid-w10 { .2xl\:grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@@ -4312,7 +4312,7 @@ pre {
.ratio-32-9 { .ratio-32-9 {
padding-top: 28.125%; padding-top: 28.125%;
} }
@screen sm { @media (width >= 640px) {
.sm\:ratio-16-9 { .sm\:ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} }
@@ -4323,7 +4323,7 @@ pre {
padding-top: 28.125%; padding-top: 28.125%;
} }
} }
@screen md { @media (width >= 853px) {
.md\:ratio-16-9 { .md\:ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} }
@@ -4334,7 +4334,7 @@ pre {
padding-top: 28.125%; padding-top: 28.125%;
} }
} }
@screen lg { @media (width >= 1024px) {
.lg\:ratio-16-9 { .lg\:ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} }
@@ -4345,7 +4345,7 @@ pre {
padding-top: 28.125%; padding-top: 28.125%;
} }
} }
@screen xl { @media (width >= 1280px) {
.xl\:ratio-16-9 { .xl\:ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} }
@@ -4356,7 +4356,7 @@ pre {
padding-top: 28.125%; padding-top: 28.125%;
} }
} }
@screen 2xl { @media (width >= 1536px) {
.2xl\:ratio-16-9 { .2xl\:ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} }
+12 -12
View File
@@ -457,7 +457,7 @@ pre {
scroll-margin-top: 145px; scroll-margin-top: 145px;
} }
@screen sm { @variant sm {
.thumbnail { .thumbnail {
min-width: 100%; min-width: 100%;
height: 180px; height: 180px;
@@ -467,7 +467,7 @@ pre {
} }
} }
@screen md { @variant md {
.thumbnail { .thumbnail {
min-width: 300px; min-width: 300px;
min-height: 180px; min-height: 180px;
@@ -599,7 +599,7 @@ pre {
margin: 0px !important; margin: 0px !important;
} }
@screen sm { @variant sm {
.sm\:grid-w10 { .sm\:grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@@ -686,7 +686,7 @@ pre {
} }
} }
@screen md { @variant md {
.md\:grid-w10 { .md\:grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@@ -773,7 +773,7 @@ pre {
} }
} }
@screen lg { @variant lg {
.lg\:grid-w10 { .lg\:grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@@ -860,7 +860,7 @@ pre {
} }
} }
@screen xl { @variant xl {
.xl\:grid-w10 { .xl\:grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@@ -947,7 +947,7 @@ pre {
} }
} }
@screen 2xl { @variant 2xl {
.2xl\:grid-w10 { .2xl\:grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@@ -1045,7 +1045,7 @@ pre {
padding-top: 28.125%; padding-top: 28.125%;
} /* 32:9 Aspect Ratio */ } /* 32:9 Aspect Ratio */
@screen sm { @variant sm {
.sm\:ratio-16-9 { .sm\:ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} /* 16:9 Aspect Ratio */ } /* 16:9 Aspect Ratio */
@@ -1057,7 +1057,7 @@ pre {
} /* 32:9 Aspect Ratio */ } /* 32:9 Aspect Ratio */
} }
@screen md { @variant md {
.md\:ratio-16-9 { .md\:ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} /* 16:9 Aspect Ratio */ } /* 16:9 Aspect Ratio */
@@ -1069,7 +1069,7 @@ pre {
} /* 32:9 Aspect Ratio */ } /* 32:9 Aspect Ratio */
} }
@screen lg { @variant lg {
.lg\:ratio-16-9 { .lg\:ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} /* 16:9 Aspect Ratio */ } /* 16:9 Aspect Ratio */
@@ -1081,7 +1081,7 @@ pre {
} /* 32:9 Aspect Ratio */ } /* 32:9 Aspect Ratio */
} }
@screen xl { @variant xl {
.xl\:ratio-16-9 { .xl\:ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} /* 16:9 Aspect Ratio */ } /* 16:9 Aspect Ratio */
@@ -1093,7 +1093,7 @@ pre {
} /* 32:9 Aspect Ratio */ } /* 32:9 Aspect Ratio */
} }
@screen 2xl { @variant 2xl {
.2xl\:ratio-16-9 { .2xl\:ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} /* 16:9 Aspect Ratio */ } /* 16:9 Aspect Ratio */