refactor(website): update tailwindcss to 4.0

Author: Rel1cx

pnpm-lock.yaml

@@ -8,7 +8,7 @@ export function Logo() {
   return (
     <div className="flex flex-col items-center gap-4 m-0 mx-auto p-8 w-fit">
       <Image src={logo as StaticImageData} alt="logo" width="150" height="150" />
-      <h1 className="text-2xl">ESLint React</h1>
+      <span className="text-2xl">ESLint React</span>
     </div>
   );
 }

website/components/logo.tsx

@@ -25,6 +25,7 @@
     "@mdx-js/mdx": "^3.1.0",
     "@next/bundle-analyzer": "^15.1.2",
     "@next/eslint-plugin-next": "^15.1.2",
+    "@tailwindcss/postcss": "^4.0.0-beta.8",
     "@tsconfig/node22": "^22.0.0",
     "@tsconfig/strictest": "^2.0.5",
     "@types/node": "^22.10.2",
@@ -33,7 +34,6 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@workspace/configs": "workspace:*",
     "@workspace/eslint-plugin-deps": "workspace:*",
-    "autoprefixer": "^10.4.20",
     "clsx": "2.1.1",
     "effect": "^3.11.9",
     "eslint": "^9.17.0",
@@ -47,7 +47,7 @@
     "rimraf": "^6.0.1",
     "sass": "^1.83.0",
     "tailwind-merge": "^2.5.5",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0-beta.8",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.1",
     "vite": "^6.0.5"

website/package.json

@@ -1,5 +1,4 @@
-import "#/styles/tw.css";
-import "#/styles/base.scss";
+import "#/styles/base.css";
 import "#/styles/overrides.scss";
 
 import type { AppProps } from "next/app";

website/pages/_app.tsx

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

website/postcss.config.js

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 :root {
   --font-family-body:
     "SF Pro Text",

website/styles/base.scss website/styles/base.csswebsite/styles/base.scss renamed to website/styles/base.css

@@ -1,3 +1,8 @@
+html {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
 .nextra-nav-container {
   nav {
     a {