diff --git a/src/app/(docs)/docs/installation/(tabs)/framework-guides/page.tsx b/src/app/(docs)/docs/installation/(tabs)/framework-guides/page.tsx index eb296df35..d4968272a 100644 --- a/src/app/(docs)/docs/installation/(tabs)/framework-guides/page.tsx +++ b/src/app/(docs)/docs/installation/(tabs)/framework-guides/page.tsx @@ -79,7 +79,7 @@ function GuideTile({ guide }: { guide: Guide }) {

{guide.tile.description}

-
+
{LogoDark ? ( <> diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 25e875fd7..843d7a4c3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -77,50 +77,52 @@ const ubuntuMono = localFont({ const js = String.raw; let darkModeScript = js` - try { - _updateTheme(localStorage.currentTheme) - } catch (_) {} + if (!('_updateTheme' in window)) { + window._updateTheme = function updateTheme(theme) { + let classList = document.documentElement.classList; - try { - if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { - document.documentElement.classList.add('os-macos') - } - } catch (_) {} + classList.remove("light", "dark", "system"); + document.querySelectorAll('meta[name="theme-color"]').forEach(el => el.remove()) + if (theme === 'dark') { + classList.add('dark') - function _updateTheme(theme) { - let classList = document.documentElement.classList; + let meta = document.createElement('meta') + meta.name = 'theme-color' + meta.content = 'oklch(.13 .028 261.692)' + document.head.appendChild(meta) + } else if (theme === 'light') { + classList.add('light') - classList.remove("light", "dark", "system"); - document.querySelectorAll('meta[name="theme-color"]').forEach(el => el.remove()) - if (theme === 'dark') { - classList.add('dark') + let meta = document.createElement('meta') + meta.name = 'theme-color' + meta.content = 'white' + document.head.appendChild(meta) + } else { + classList.add('system') - let meta = document.createElement('meta') - meta.name = 'theme-color' - meta.content = 'oklch(.13 .028 261.692)' - document.head.appendChild(meta) - } else if (theme === 'light') { - classList.add('light') + let meta1 = document.createElement('meta') + meta1.name = 'theme-color' + meta1.content = 'oklch(.13 .028 261.692)' + meta1.media = '(prefers-color-scheme: dark)' + document.head.appendChild(meta1) - let meta = document.createElement('meta') - meta.name = 'theme-color' - meta.content = 'white' - document.head.appendChild(meta) - } else { - classList.add('system') + let meta2 = document.createElement('meta') + meta2.name = 'theme-color' + meta2.content = 'white' + meta2.media = '(prefers-color-scheme: light)' + document.head.appendChild(meta2) + } + } - let meta1 = document.createElement('meta') - meta1.name = 'theme-color' - meta1.content = 'oklch(.13 .028 261.692)' - meta1.media = '(prefers-color-scheme: dark)' - document.head.appendChild(meta1) + try { + _updateTheme(localStorage.currentTheme) + } catch (_) {} - let meta2 = document.createElement('meta') - meta2.name = 'theme-color' - meta2.content = 'white' - meta2.media = '(prefers-color-scheme: light)' - document.head.appendChild(meta2) - } + try { + if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { + document.documentElement.classList.add('os-macos') + } + } catch (_) {} } `; @@ -159,7 +161,11 @@ export default async function RootLayout({ - + + {/* + We inject the script via the tag again, since we found the regular `` + tag to not execute when rendering a not-found page. + */} diff --git a/src/blog/building-react-and-vue-support-for-tailwind-ui/index.mdx b/src/blog/building-react-and-vue-support-for-tailwind-ui/index.mdx index 7ce1c6c40..29eb4e892 100644 --- a/src/blog/building-react-and-vue-support-for-tailwind-ui/index.mdx +++ b/src/blog/building-react-and-vue-support-for-tailwind-ui/index.mdx @@ -296,7 +296,7 @@ export default function Example() { >
@@ -377,7 +377,7 @@ Here's what one of our dropdown examples looks like in our internal authoring fo leave-end="transform opacity-0 scale-95" >
diff --git a/src/blog/tailwind-ui-now-with-react-and-vue-support/index.mdx b/src/blog/tailwind-ui-now-with-react-and-vue-support/index.mdx index e8ebb27c2..5472959fc 100644 --- a/src/blog/tailwind-ui-now-with-react-and-vue-support/index.mdx +++ b/src/blog/tailwind-ui-now-with-react-and-vue-support/index.mdx @@ -64,7 +64,7 @@ export default function Example() { aria-hidden="true" className={classNames( enabled ? "translate-x-5" : "translate-x-0", - "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white ring-0 shadow transition duration-200 ease-in-out", + "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out", )} /> diff --git a/src/blog/tailwindcss-v4/index.mdx b/src/blog/tailwindcss-v4/index.mdx index 4393cee52..90823cf26 100644 --- a/src/blog/tailwindcss-v4/index.mdx +++ b/src/blog/tailwindcss-v4/index.mdx @@ -564,7 +564,7 @@ The new `starting` variant adds support for the new CSS [`@starting-style`](http
diff --git a/src/components/header.tsx b/src/components/header.tsx index 6da75e2e9..013e57096 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -61,7 +61,7 @@ function VersionPicker() {
diff --git a/src/components/home/transforms-3d.tsx b/src/components/home/transforms-3d.tsx index 0344a033c..1db974e0d 100644 --- a/src/components/home/transforms-3d.tsx +++ b/src/components/home/transforms-3d.tsx @@ -29,7 +29,7 @@ export function Transforms3d() { src={_3dTransformsImg.src} className="absolute inset-0 size-82 rounded-2xl shadow-2xl outline outline-gray-950/5 transition duration-300 transform-3d" /> -
+
diff --git a/src/components/home/why-tailwind-css-section.tsx b/src/components/home/why-tailwind-css-section.tsx index ac544d132..8e3bcd96f 100644 --- a/src/components/home/why-tailwind-css-section.tsx +++ b/src/components/home/why-tailwind-css-section.tsx @@ -284,7 +284,7 @@ export default function WhyTailwindCssSection() { return (
{name} -
+
@@ -617,7 +617,7 @@ export default function WhyTailwindCssSection() {
-
+
{[ { src: avatar4.src, name: "Will Winton", role: "Director of Operations" }, { src: avatar5.src, name: "Kristin Yardly", role: "Marketing Coordinator" }, @@ -641,7 +641,7 @@ export default function WhyTailwindCssSection() { ); })}
-
+
{[ { src: avatar1.src, name: "سارة أحمد", role: "مديرة مشاريع" }, { src: avatar2.src, name: "علي محمد", role: "مطور برمجيات" }, diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx index ec8405496..812098f22 100644 --- a/src/components/theme-toggle.tsx +++ b/src/components/theme-toggle.tsx @@ -38,7 +38,7 @@ function onChange(theme: Theme, setTheme: (theme: Theme) => void) { function ThemeToggleButton(props: React.ComponentProps) { return ( ); diff --git a/src/docs/background-position.mdx b/src/docs/background-position.mdx index 65167181f..07da9d15d 100644 --- a/src/docs/background-position.mdx +++ b/src/docs/background-position.mdx @@ -164,7 +164,13 @@ Use utilities like `bg-center`, `bg-right`, and `bg-left-top` to control the pos ### Using a custom value - + ### Responsive design diff --git a/src/docs/box-shadow.mdx b/src/docs/box-shadow.mdx index 54e23a23d..453c16b83 100644 --- a/src/docs/box-shadow.mdx +++ b/src/docs/box-shadow.mdx @@ -182,15 +182,15 @@ Use utilities like `inset-shadow-xs` and `inset-shadow-sm` to apply an inset box

inset-shadow-2xs

-
+

inset-shadow-xs

-
+

inset-shadow-sm

-
+
} diff --git a/src/docs/box-sizing.mdx b/src/docs/box-sizing.mdx index a70396f6e..8bd55e569 100644 --- a/src/docs/box-sizing.mdx +++ b/src/docs/box-sizing.mdx @@ -43,7 +43,7 @@ This means a 100px × 100px element with a 2px border and 4px of padding on
{/* Right chip */}
-
+
@@ -121,7 +121,7 @@ This means a 100px × 100px element with a 2px border and 4px of padding on
{/* Right chip */}
-
+
diff --git a/src/docs/colors.mdx b/src/docs/colors.mdx index c22a2898d..e3d327163 100644 --- a/src/docs/colors.mdx +++ b/src/docs/colors.mdx @@ -356,7 +356,7 @@ Use the `dark` variant to write classes like `dark:bg-gray-800` that only apply

Light mode

-
+

Dark mode

-
+

Light mode

-
+

Dark mode

-
+
+ ### Responsive design diff --git a/src/docs/hover-focus-and-other-states.mdx b/src/docs/hover-focus-and-other-states.mdx index e9d237bab..15f5efaaf 100644 --- a/src/docs/hover-focus-and-other-states.mdx +++ b/src/docs/hover-focus-and-other-states.mdx @@ -744,7 +744,7 @@ When you need to style an element based on the state of some _parent_ element, m {
@@ -1572,7 +1572,7 @@ Use utilities with no variant to target light mode, and use the `dark` variant t

Light mode

-
+

Dark mode

-
+
{ -
+
{ -
+
{ -
+
{ -
+
{ -
+
{ -
+
{
-
+
Contacts
@@ -248,7 +248,7 @@ Use the `sticky` utility to position an element as `relative` until it crosses a {
-
+
A diff --git a/src/docs/responsive-design.mdx b/src/docs/responsive-design.mdx index 86f373638..4adb3b9a2 100644 --- a/src/docs/responsive-design.mdx +++ b/src/docs/responsive-design.mdx @@ -109,7 +109,7 @@ Here's a simple example of a marketing page component that uses a stacked layout {