chore: update tailwindcss to v4, remove sass, use vite plugin for tailwindcss

package.json

@@ -10,14 +10,12 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "@tailwindcss/vite": "^4.1.11",
     "@use-it/event-listener": "^0.1.7",
-    "autoprefixer": "^10.4.21",
     "chance": "^1.1.13",
-    "postcss": "^8.5.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "sass": "^1.90.0",
+    "tailwindcss": "^4.1.11",
-    "tailwindcss": "^3.4.17",
     "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {

src/components/App.tsx

@@ -35,7 +35,7 @@ function App() {
   return (
     <div
       style={style}
-      className="text-zinc-800 gradient max-w-[100vw] max-h-[100vh] overflow-clip"
+      className="text-zinc-800 gradient max-w-screen max-h-screen overflow-clip"
     >
       <div className="font-inter w-full h-full bg-zinc-800/50 bg-blend-overlay">
         <div className="grid grid-cols-12 w-full">
@@ -61,9 +61,9 @@ function App() {
             </button>
           </div>
           <div
-            className={`h-[100vh] transition-opacity ease-in-out duration-75 ${
+            className={`h-screen transition-opacity ease-in-out duration-75 ${
               postHidden ? "opacity-0 pointer-events-none" : ""
-            } flex col-span-9 sm:col-span-6 md:col-span-5 w-full min-h-[100vh]`}
+            } flex col-span-9 sm:col-span-6 md:col-span-5 w-full min-h-screen`}
             
           >
             <div className="bg-white overflow-y-auto">

src/components/Post.tsx

@@ -62,7 +62,7 @@ const Post = () => {
           </p>
           <div className="pt-3">
             <a href="https://github.com/Xevion/grain">
-              <div className="inline text-white text-medium drop-shadow-lg rounded border-2 shadow-xl border-zinc-600/75 m-2 p-2 bg-gradient-to-r from-red-500 via-orange-500 to-orange-700">
+              <div className="inline text-white text-medium drop-shadow-lg rounded border-2 shadow-xl border-zinc-600/75 m-2 p-2 bg-linear-to-r from-red-500 via-orange-500 to-orange-700">
                 In Progress
                 <ShieldExclamationIcon className="inline h-[1.4rem] ml-3 drop-shadow-2xl" />
               </div>

src/main.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "@/components/App";
-import "@/styles/index.scss";
+import "@/styles/index.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>

src/styles/index.css

@@ -0,0 +1,44 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
+@import "tailwindcss";
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  @apply text-zinc-800 bg-zinc-400;
+}
+
+body {
+  @apply min-w-screen min-h-screen;
+}
+
+.gradient {
+  filter: contrast(150%) brightness(90%);
+  background-blend-mode: overlay;
+}
+
+.button {
+  @apply border-zinc-50/70 border outline-none focus:outline-2 outline-offset-2 focus:outline-fuchsia-500;
+}
+
+.semibold-children {
+  & b {
+    font-weight: 600;
+  }
+}
+
+pre.inline {
+  @apply text-zinc-900;
+}

src/styles/index.scss

@@ -1,47 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-
-    color-scheme: light dark;
-
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
-
-    @apply text-zinc-800 bg-zinc-400;
-}
-
-body {
-    @apply min-w-[100vw] min-h-[100vh];
-}
-
-.gradient {
-    filter: contrast(150%) brightness(90%);
-    background-blend-mode: overlay;
-}
-
-.button {
-    @apply border-zinc-50/70 border outline-none focus:outline-2 outline-offset-2 focus:outline-fuchsia-500;
-}
-
-.semibold-children {
-    & b {
-        font-weight: 600;
-    }
-}
-
-pre.inline {
-    @apply text-zinc-900;
-}

vite.config.ts

@@ -1,13 +1,14 @@
-import { defineConfig, loadEnv  } from 'vite'
+import { defineConfig, loadEnv } from "vite";
-import react from '@vitejs/plugin-react'
+import react from "@vitejs/plugin-react";
-import tsconfigPaths from 'vite-tsconfig-paths'
+import tsconfigPaths from "vite-tsconfig-paths";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
-export default ({mode }) => {
+export default ({ mode }) => {
-  process.env = {...process.env, ...loadEnv(mode, process.cwd())};
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
   return defineConfig({
-    base: '/',
+    base: "/",
-    plugins: [react(), tsconfigPaths()],
+    plugins: [react(), tsconfigPaths(), tailwindcss()],
-  })
+  });
-}
+};