Skip to content

Commit aa7775f

Browse files
marshalhayesmarshalhayes
authored
Merge branch 'tailwindlabs:main' into dotnet
2 parents d43512a + 794640d commit aa7775f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+347
-161
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"react": "^19.0.0",
2828
"react-dom": "^19.0.0",
2929
"shiki": "^1.26.1",
30-
"tailwindcss": "4.0.1"
30+
"tailwindcss": "4.0.7"
3131
},
3232
"devDependencies": {
3333
"@svgr/webpack": "^8.1.0",

‎pnpm-lock.yaml

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/(docs)/docs/installation/(tabs)/using-vite/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ const steps: Step[] = [
106106
<meta charset="UTF-8">
107107
<meta name="viewport" content="width=device-width, initial-scale=1.0">
108108
<!-- [!code highlight:2] -->
109-
<link href="/dist/styles.css" rel="stylesheet">
109+
<link href="/src/styles.css" rel="stylesheet">
110110
</head>
111111
<body>
112112
<!-- [!code highlight:4] -->

‎src/app/(docs)/docs/installation/framework-guides/astro.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export let steps: Step[] = [
2020
body: (
2121
<p>
2222
Start by creating a new Astro project if you don't have one set up already. The most common approach is to use{" "}
23-
<a href="https://docs.astro.build/en/getting-started/#start-your-first-project">create astro</a>.
23+
<a href="https://docs.astro.build/en/install-and-setup/#install-from-the-cli-wizard">create astro</a>.
2424
</p>
2525
),
2626
code: {

‎src/app/(docs)/docs/installation/framework-guides/sveltekit.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export let steps: Step[] = [
140140
Hello world!
141141
</h1>
142142
143-
<style>
143+
<style lang="postcss">
144144
/* [!code highlight:2] */
145145
@reference "tailwindcss/theme";
146146

‎src/app/api/og/route.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export async function GET(req: NextRequest) {
114114
"Cache-Control":
115115
process.env.NODE_ENV === "development"
116116
? "no-cache, no-store"
117-
: "public, immutable, no-transform, s-maxage=31536000, max-age=600",
117+
: "public, no-transform, s-maxage=31536000, max-age=600",
118118
},
119119
fonts: [
120120
{

‎src/app/layout.tsx

Lines changed: 50 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import localFont from "next/font/local";
44
import { SearchProvider } from "@/components/search";
55
import { ThemeProvider } from "@/components/theme-toggle";
66
import Fathom from "@/components/fathom";
7+
import Script from "next/script";
78

89
const inter = localFont({
910
src: [
@@ -73,7 +74,55 @@ const ubuntuMono = localFont({
7374
],
7475
variable: "--font-ubuntu-mono",
7576
});
77+
7678
const js = String.raw;
79+
let darkModeScript = js`
80+
try {
81+
_updateTheme(localStorage.currentTheme)
82+
} catch (_) {}
83+
84+
try {
85+
if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
86+
document.documentElement.classList.add('os-macos')
87+
}
88+
} catch (_) {}
89+
90+
function _updateTheme(theme) {
91+
let classList = document.documentElement.classList;
92+
93+
classList.remove("light", "dark", "system");
94+
document.querySelectorAll('meta[name="theme-color"]').forEach(el => el.remove())
95+
if (theme === 'dark') {
96+
classList.add('dark')
97+
98+
let meta = document.createElement('meta')
99+
meta.name = 'theme-color'
100+
meta.content = 'oklch(.13 .028 261.692)'
101+
document.head.appendChild(meta)
102+
} else if (theme === 'light') {
103+
classList.add('light')
104+
105+
let meta = document.createElement('meta')
106+
meta.name = 'theme-color'
107+
meta.content = 'white'
108+
document.head.appendChild(meta)
109+
} else {
110+
classList.add('system')
111+
112+
let meta1 = document.createElement('meta')
113+
meta1.name = 'theme-color'
114+
meta1.content = 'oklch(.13 .028 261.692)'
115+
meta1.media = '(prefers-color-scheme: dark)'
116+
document.head.appendChild(meta1)
117+
118+
let meta2 = document.createElement('meta')
119+
meta2.name = 'theme-color'
120+
meta2.content = 'white'
121+
meta2.media = '(prefers-color-scheme: light)'
122+
document.head.appendChild(meta2)
123+
}
124+
}
125+
`;
77126

78127
export const metadata: Metadata = {
79128
metadataBase: new URL("https://tailwindcss.com"),
@@ -111,57 +160,7 @@ export default async function RootLayout({
111160
<meta name="msapplication-TileColor" content="#38bdf8" />
112161
<meta name="msapplication-config" content={v("/favicons/browserconfig.xml")} />
113162

114-
<script
115-
dangerouslySetInnerHTML={{
116-
__html: js`
117-
try {
118-
_updateTheme(localStorage.currentTheme)
119-
} catch (_) {}
120-
121-
try {
122-
if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
123-
document.documentElement.classList.add('os-macos')
124-
}
125-
} catch (_) {}
126-
127-
function _updateTheme(theme) {
128-
let classList = document.documentElement.classList;
129-
130-
classList.remove("light", "dark", "system");
131-
document.querySelectorAll('meta[name="theme-color"]').forEach(el => el.remove())
132-
if (theme === 'dark') {
133-
classList.add('dark')
134-
135-
let meta = document.createElement('meta')
136-
meta.name = 'theme-color'
137-
meta.content = 'oklch(.13 .028 261.692)'
138-
document.head.appendChild(meta)
139-
} else if (theme === 'light') {
140-
classList.add('light')
141-
142-
let meta = document.createElement('meta')
143-
meta.name = 'theme-color'
144-
meta.content = 'white'
145-
document.head.appendChild(meta)
146-
} else {
147-
classList.add('system')
148-
149-
let meta1 = document.createElement('meta')
150-
meta1.name = 'theme-color'
151-
meta1.content = 'oklch(.13 .028 261.692)'
152-
meta1.media = '(prefers-color-scheme: dark)'
153-
document.head.appendChild(meta1)
154-
155-
let meta2 = document.createElement('meta')
156-
meta2.name = 'theme-color'
157-
meta2.content = 'white'
158-
meta2.media = '(prefers-color-scheme: light)'
159-
document.head.appendChild(meta2)
160-
}
161-
}
162-
`,
163-
}}
164-
/>
163+
<Script src={`data:text/javascript;base64,${btoa(darkModeScript)}`} />
165164
</head>
166165
<body>
167166
<Fathom />

‎src/app/search.css

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -134,20 +134,22 @@
134134
@apply ml-12;
135135
}
136136

137-
.DocSearch-Hit--Result.DocSearch-Hit--Child::before {
138-
content: "";
139-
position: absolute;
140-
top: -0.25rem;
141-
bottom: -0.25rem;
142-
left: -1rem;
143-
width: 1px;
144-
background: var(--color-gray-200);
137+
.DocSearch-Hit--Result.DocSearch-Hit--Child {
138+
&::before {
139+
content: "";
140+
position: absolute;
141+
top: -0.25rem;
142+
bottom: -0.25rem;
143+
left: -1rem;
144+
width: 1px;
145+
background: var(--color-gray-200);
146+
}
145147

146-
.dark & {
148+
.dark &::before {
147149
background: color-mix(in oklab, var(--color-gray-200) 20%, transparent);
148150
}
149151
@media (prefers-color-scheme: dark) {
150-
.system & {
152+
.system &::before {
151153
background: color-mix(in oklab, var(--color-gray-200) 20%, transparent);
152154
}
153155
}
@@ -672,17 +674,19 @@
672674
}
673675
}
674676

675-
.DocSearch-Hit-action [title="Remove this search from favorites"]::before {
676-
pointer-events: none;
677-
position: absolute;
678-
inset: calc(var(--spacing) * 0);
679-
background-color: var(--color-sky-50);
680-
content: "";
681-
.dark & {
677+
.DocSearch-Hit-action [title="Remove this search from favorites"] {
678+
&::before {
679+
pointer-events: none;
680+
position: absolute;
681+
inset: calc(var(--spacing) * 0);
682+
background-color: var(--color-sky-50);
683+
content: "";
684+
}
685+
.dark &::before {
682686
background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
683687
}
684688
@media (prefers-color-scheme: dark) {
685-
.system & {
689+
.system &::before {
686690
background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
687691
}
688692
}
@@ -692,45 +696,49 @@
692696
@apply bg-sky-100 dark:bg-gray-700/40;
693697
}
694698

695-
.DocSearch-Hit-action [title="Remove this search from favorites"]::after {
696-
content: "";
697-
position: absolute;
698-
pointer-events: none;
699-
width: calc(4.5rem + 1px);
700-
height: 1.5rem;
701-
margin-left: calc(-3rem - 1px);
702-
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
703-
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
704-
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
705-
background-repeat: no-repeat, repeat-y, no-repeat;
706-
background-position: left, center, right;
699+
.DocSearch-Hit-action [title="Remove this search from favorites"] {
700+
&::after {
701+
content: "";
702+
position: absolute;
703+
pointer-events: none;
704+
width: calc(4.5rem + 1px);
705+
height: 1.5rem;
706+
margin-left: calc(-3rem - 1px);
707+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
708+
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
709+
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
710+
background-repeat: no-repeat, repeat-y, no-repeat;
711+
background-position: left, center, right;
712+
}
707713

708-
.dark & {
714+
.dark &::after {
709715
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
710716
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' opacity='0.05' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
711717
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
712718
}
713719
@media (prefers-color-scheme: dark) {
714-
.system & {
720+
.system &::after {
715721
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
716722
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' opacity='0.05' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
717723
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
718724
}
719725
}
720726
}
721727

722-
.DocSearch-Hit-action [title="Remove this search from favorites"]:hover::after {
723-
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
724-
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
725-
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
728+
.DocSearch-Hit-action [title="Remove this search from favorites"]:hover {
729+
&::after {
730+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
731+
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
732+
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
733+
}
726734

727-
.dark & {
735+
.dark &::after {
728736
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
729737
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' opacity='0.05' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
730738
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
731739
}
732740
@media (prefers-color-scheme: dark) {
733-
.system & {
741+
.system &::after {
734742
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
735743
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' opacity='0.05' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
736744
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

‎src/app/typography.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,10 @@
8989
}
9090

9191
:is(h2, h3, h4):where(:not(.not-prose, .not-prose *)) {
92-
scroll-margin-top: calc(var(--spacing) * 18);
92+
scroll-margin-top: calc(var(--spacing) * 32);
93+
@variant lg {
94+
scroll-margin-top: calc(var(--spacing) * 18);
95+
}
9396
}
9497

9598
ul:where(:not(.not-prose, .not-prose *)) {

‎src/blog/headless-ui-v2/examples/HeadlessUIV2Examples.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export function ComboboxExample() {
157157
leaveTo="opacity-0"
158158
afterLeave={() => setQuery("")}
159159
>
160-
<ComboboxOptions className="mt-2 max-h-60 w-[--input-width] overflow-y-auto rounded-xl border border-gray-200 bg-white p-1 backdrop-blur empty:invisible dark:border-white/5 dark:bg-white/5">
160+
<ComboboxOptions className="mt-2 max-h-60 w-(--input-width) overflow-y-auto rounded-xl border border-gray-200 bg-white p-1 backdrop-blur empty:invisible dark:border-white/5 dark:bg-white/5">
161161
{({ option: person }) => (
162162
<ComboboxOption
163163
key={person.id}

0 commit comments

Comments
 (0)