diff --git a/website/src/app/globals.css b/website/src/app/globals.css
index c3a040f5..44d0bf6a 100644
--- a/website/src/app/globals.css
+++ b/website/src/app/globals.css
@@ -1,44 +1,68 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
-html,
-body {
- height: 100%;
+@theme {
+ --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
+ --background-image-gradient-conic: conic-gradient(
+ from 180deg at 50% 50%,
+ var(--tw-gradient-stops)
+ );
}
-/*:root {*/
-/* --foreground-rgb: 0, 0, 0;*/
-/* --background-start-rgb: 255, 240, 251;*/
-/* --background-end-rgb: 255, 255, 255;*/
-/*}*/
+/*
+ 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.
-:root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
+ 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);
+ }
+}
+
+@utility text-balance {
+ text-wrap: balance;
}
-@media (prefers-color-scheme: dark) {
+@layer utilities {
+ html,
+ body {
+ height: 100%;
+ }
+
+ /*:root {*/
+ /* --foreground-rgb: 0, 0, 0;*/
+ /* --background-start-rgb: 255, 240, 251;*/
+ /* --background-end-rgb: 255, 255, 255;*/
+ /*}*/
+
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
-}
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
-}
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+ }
+ }
-@layer utilities {
- .text-balance {
- text-wrap: balance;
+ body {
+ color: rgb(var(--foreground-rgb));
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgb(var(--background-end-rgb))
+ )
+ rgb(var(--background-start-rgb));
}
}
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
deleted file mode 100644
index e9a0944e..00000000
--- a/website/tailwind.config.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
- content: [
- "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
- "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
- "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
- ],
- theme: {
- extend: {
- backgroundImage: {
- "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
- "gradient-conic":
- "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
- },
- },
- },
- plugins: [],
-};
-export default config;
diff --git a/website/tsconfig.json b/website/tsconfig.json
index 7b285893..51d0dbce 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -19,7 +19,8 @@
],
"paths": {
"@/*": ["./src/*"]
- }
+ },
+ "target": "ES2017"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]