diff --git a/www/src/pages/en/usage/tailwind.md b/www/src/pages/en/usage/tailwind.md
index bdb355a4b0..7b367eca37 100644
--- a/www/src/pages/en/usage/tailwind.md
+++ b/www/src/pages/en/usage/tailwind.md
@@ -46,7 +46,7 @@ Equivalent in Tailwind:
```html
diff --git a/www/src/pages/es/usage/tailwind.md b/www/src/pages/es/usage/tailwind.md
index 802eab1e7a..116586cbc0 100644
--- a/www/src/pages/es/usage/tailwind.md
+++ b/www/src/pages/es/usage/tailwind.md
@@ -46,7 +46,7 @@ Equivalente en Tailwind:
```html
diff --git a/www/src/pages/fr/usage/tailwind.md b/www/src/pages/fr/usage/tailwind.md
index 635ea4a3c9..344775a863 100644
--- a/www/src/pages/fr/usage/tailwind.md
+++ b/www/src/pages/fr/usage/tailwind.md
@@ -45,7 +45,7 @@ import "./my-class.css";
1. Écrivez simplement des classes dans votre HTML
```jsx
-
+
...
```
diff --git a/www/src/pages/ja/usage/tailwind.md b/www/src/pages/ja/usage/tailwind.md
index d73a12b65d..c374fccb3c 100644
--- a/www/src/pages/ja/usage/tailwind.md
+++ b/www/src/pages/ja/usage/tailwind.md
@@ -46,7 +46,7 @@ Tailwind で同じことをするとこうなります：
```html
...
diff --git a/www/src/pages/no/usage/tailwind.md b/www/src/pages/no/usage/tailwind.md
index d134d3e84f..dc71f972b9 100644
--- a/www/src/pages/no/usage/tailwind.md
+++ b/www/src/pages/no/usage/tailwind.md
@@ -46,7 +46,7 @@ Tilsvarende i Tailwind:
```html
...
diff --git a/www/src/pages/pl/usage/tailwind.md b/www/src/pages/pl/usage/tailwind.md
index 0981109ef9..edc03330ba 100644
--- a/www/src/pages/pl/usage/tailwind.md
+++ b/www/src/pages/pl/usage/tailwind.md
@@ -46,7 +46,7 @@ Odpowiednik z Tailwindem:
```html
...
diff --git a/www/src/pages/pt/usage/tailwind.md b/www/src/pages/pt/usage/tailwind.md
index f5b71487be..862c4b4fce 100644
--- a/www/src/pages/pt/usage/tailwind.md
+++ b/www/src/pages/pt/usage/tailwind.md
@@ -46,7 +46,7 @@ Equivalente com Tailwind:
```html
...
diff --git a/www/src/pages/ru/usage/tailwind.md b/www/src/pages/ru/usage/tailwind.md
index 59d2444185..d45d1a488d 100644
--- a/www/src/pages/ru/usage/tailwind.md
+++ b/www/src/pages/ru/usage/tailwind.md
@@ -46,7 +46,7 @@ import "./my-class.css";
```html
...
diff --git a/www/src/pages/uk/usage/tailwind.md b/www/src/pages/uk/usage/tailwind.md
index 25bf66fc78..13dc2c116b 100644
--- a/www/src/pages/uk/usage/tailwind.md
+++ b/www/src/pages/uk/usage/tailwind.md
@@ -46,7 +46,7 @@ import "./my-class.css";
```html
...
diff --git a/www/src/pages/zh-hans/usage/tailwind.md b/www/src/pages/zh-hans/usage/tailwind.md
index f302665665..773274d17e 100644
--- a/www/src/pages/zh-hans/usage/tailwind.md
+++ b/www/src/pages/zh-hans/usage/tailwind.md
@@ -46,7 +46,7 @@ import "./my-class.css";
```html
...
diff --git a/www/src/styles/accessibility.css b/www/src/styles/accessibility.css
index ecff51873a..f6a9f30ab1 100644
--- a/www/src/styles/accessibility.css
+++ b/www/src/styles/accessibility.css
@@ -7,11 +7,11 @@
}
*:not(.focus-none) {
- @apply outline-2 outline-offset-2 !outline-t3-purple-400 transition-[outline-offset] focus-visible:outline;
+ @apply outline-2 outline-offset-2 outline-transparent transition-[outline-offset,outline-color] duration-200;
}
*:not(:active):focus-visible {
- @apply outline-offset-4;
+ @apply outline-offset-4 outline-(--color-t3-purple-400);
}
a:has(> img) {
diff --git a/www/src/styles/global.css b/www/src/styles/global.css
index 54b685a9a6..72f4b08477 100644
--- a/www/src/styles/global.css
+++ b/www/src/styles/global.css
@@ -1,6 +1,70 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+/* @custom-variant dark (&:where(.dark, .dark *)); */
+
+@plugin 'tailwind-scrollbar' {
+ nocompatible: true;
+}
+
+@theme {
+ --font-*: initial;
+ --font-sans: "InterVariable", ui-sans-serif, system-ui, -apple-system,
+ BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
+ sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+ "Noto Color Emoji";
+ --font-serif: ui-serif, Georgia;
+ --font-mono: "JetBrains Mono", monospace, ui-monospace, Menlo, Monaco,
+ "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono",
+ "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
+ "Courier New";
+
+ --color-default: rgb(var(--color-default));
+ --color-neutral: rgb(var(--color-neutral));
+ --color-primary: rgb(var(--color-primary));
+ --color-secondary: rgb(var(--color-secondary));
+ --color-accent: rgb(var(--color-accent));
+ --color-warning: rgb(var(--color-warning));
+ --color-error: rgb(var(--color-error));
+ --color-success: rgb(var(--color-success));
+ --color-info: rgb(var(--color-info));
+ --color-t3-purple-50: #f3eeff;
+ --color-t3-purple-100: #e8ddff;
+ --color-t3-purple-200: #c3b4fc;
+ --color-t3-purple-300: #9e8bf9;
+ --color-t3-purple-400: #7a62f6;
+ --color-t3-purple-500: #5749f3;
+ --color-t3-purple-600: #4a3eeb;
+ --color-t3-purple-700: #3d34e3;
+ --color-t3-purple-800: #3029db;
+ --color-t3-purple-900: #231ed3;
+ --color-t3-purple-1000: #1613cb;
+
+ --animate-draw: draw 2s linear normal;
+
+ @keyframes draw {
+ to {
+ stroke-dashoffset: 200;
+ }
+ }
+}
+
+/*
+ The default border color has changed to `currentColor` in Tailwind CSS v4,
+ so we've added these compatibility styles to make sure everything still
+ looks the same as it did with Tailwind CSS v3.
+
+ If we ever want to remove these styles, we need to add an explicit border
+ color utility to any element that depends on these defaults.
+*/
+@layer base {
+ *,
+ ::after,
+ ::before,
+ ::backdrop,
+ ::file-selector-button {
+ border-color: var(--color-gray-200, currentColor);
+ }
+}
@layer base {
/* Design System Theming */
@@ -37,7 +101,7 @@
}
html {
- @apply scroll-smooth accent-primary scrollbar-thin scrollbar-track-transparent scrollbar-thumb-t3-purple-300 dark:scrollbar-track-transparent dark:scrollbar-thumb-t3-purple-300;
+ @apply accent-primary scrollbar-thin scrollbar-track-transparent scrollbar-thumb-t3-purple-300 dark:scrollbar-track-transparent dark:scrollbar-thumb-t3-purple-300 scroll-smooth;
}
/* Typewriter */
@@ -147,7 +211,7 @@
/* Markdown Styling */
.markdown {
- @apply flex w-full flex-col items-start justify-start px-4 leading-relaxed text-slate-900 selection:bg-t3-purple-200 selection:text-t3-purple-500 dark:text-t3-purple-100 dark:selection:bg-t3-purple-100 dark:selection:text-slate-900;
+ @apply selection:bg-t3-purple-200 selection:text-t3-purple-500 dark:text-t3-purple-100 dark:selection:bg-t3-purple-100 flex w-full flex-col items-start justify-start px-4 leading-relaxed text-slate-900 dark:selection:text-slate-900;
}
.markdown h1 {
@apply mt-8 mb-4 text-3xl font-extrabold;
@@ -174,10 +238,7 @@
@apply mb-0 text-sm;
}
.markdown a:not(.heading-link--hidden---effects) {
- @apply text-t3-purple-500 underline decoration-slate-500
- decoration-dotted underline-offset-2
- hover:text-t3-purple-700 dark:text-t3-purple-200
- dark:decoration-t3-purple-200 dark:hover:text-t3-purple-300;
+ @apply text-t3-purple-500 hover:text-t3-purple-700 dark:text-t3-purple-200 dark:decoration-t3-purple-200 dark:hover:text-t3-purple-300 underline decoration-slate-500 decoration-dotted underline-offset-2;
}
:is([dir="rtl"]) .markdown a[rel~="noreferrer"] > span {
@@ -189,15 +250,15 @@
}
.markdown .code-wrapper {
- @apply inline rounded border border-t3-purple-200 bg-t3-purple-200/40 px-0.5 py-[0.5px] dark:border-t3-purple-400/30 dark:bg-t3-purple-400/20;
+ @apply border-t3-purple-200 bg-t3-purple-200/40 dark:border-t3-purple-400/30 dark:bg-t3-purple-400/20 inline rounded-sm border px-0.5 py-[0.5px];
}
.markdown .remark-code-title {
- @apply z-10 -mb-1 mt-3 w-full rounded-t-md border border-t3-purple-300/80 bg-[#191724] px-2 py-1 font-mono text-t3-purple-200;
+ @apply border-t3-purple-300/80 text-t3-purple-200 z-10 mt-3 -mb-1 w-full rounded-t-md border bg-[#191724] px-2 py-1 font-mono;
}
.markdown pre {
- @apply mx-auto mb-3 rounded border border-t3-purple-300/80 p-2 pl-3 font-mono shadow-xl sm:pt-2;
+ @apply border-t3-purple-300/80 mx-auto mb-3 rounded-sm border p-2 pl-3 font-mono shadow-xl sm:pt-2;
}
.markdown ol {
@@ -205,7 +266,7 @@
}
.markdown details {
- @apply mt-2 w-full rounded-md border border-t3-purple-300/80 bg-[#191724] px-3 transition-all duration-300 ease-in-out;
+ @apply border-t3-purple-300/80 mt-2 w-full rounded-md border bg-[#191724] px-3 transition-all duration-300 ease-in-out;
}
.markdown details[open] {
@apply bg-t3-purple-200/10;
@@ -233,7 +294,7 @@
@apply align-top;
}
.markdown blockquote a {
- @apply text-slate-900 dark:text-t3-purple-50;
+ @apply dark:text-t3-purple-50 text-slate-900;
}
.DocSearch-SearchBar {
@apply my-3 rounded-md bg-purple-400 p-2 text-sm;
diff --git a/www/tailwind.config.ts b/www/tailwind.config.ts
deleted file mode 100644
index 60b783dfe5..0000000000
--- a/www/tailwind.config.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import scrollbar from "tailwind-scrollbar";
-import { type Config } from "tailwindcss";
-
-export default {
- content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
- darkMode: "selector",
- theme: {
- extend: {
- colors: {
- default: "rgb(var(--color-default) /
)",
- neutral: "rgb(var(--color-neutral) / )",
- primary: "rgb(var(--color-primary) / )",
- secondary: "rgb(var(--color-secondary) / )",
- accent: "rgb(var(--color-accent) / )",
- warning: "rgb(var(--color-warning) / )",
- error: "rgb(var(--color-error) / )",
- success: "rgb(var(--color-success) / )",
- info: "rgb(var(--color-info) / )",
-
- "t3-purple-50": "#F3EEFF",
- "t3-purple-100": "#e8ddff",
- "t3-purple-200": "#c3b4fc",
- "t3-purple-300": "#9e8bf9",
- "t3-purple-400": "#7a62f6",
- "t3-purple-500": "#5749f3",
- "t3-purple-600": "#4a3eeb",
- "t3-purple-700": "#3d34e3",
- "t3-purple-800": "#3029db",
- "t3-purple-900": "#231ed3",
- "t3-purple-1000": "#1613cb",
- },
- animation: {
- draw: "draw 2s linear normal",
- },
- },
- keyframes: {
- draw: {
- to: { strokeDashoffset: "200" },
- },
- },
- fontFamily: {
- sans: [
- '"InterVariable"',
- "ui-sans-serif",
- "system-ui",
- "-apple-system",
- "BlinkMacSystemFont",
- '"Segoe UI"',
- "Roboto",
- '"Helvetica Neue"',
- "Arial",
- '"Noto Sans"',
- "sans-serif",
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- '"Noto Color Emoji"',
- ],
- serif: ["ui-serif", "Georgia"],
- mono: [
- '"JetBrains Mono"',
- "monospace",
- "ui-monospace",
- "Menlo",
- "Monaco",
- '"Cascadia Mono"',
- '"Segoe UI Mono"',
- '"Roboto Mono"',
- '"Oxygen Mono"',
- '"Ubuntu Monospace"',
- '"Source Code Pro"',
- '"Fira Mono"',
- '"Droid Sans Mono"',
- '"Courier New"',
- ],
- },
- },
- plugins: [scrollbar({ nocompatible: true })],
-} satisfies Config;