xevion/grain
1
0
Fork 0
mirror of https://github.com/Xevion/grain.git synced 2025-12-05 23:15:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Xevion
2025-08-09 13:16:34 -05:00
parent 048701580d
commit 683e504c9c
8 changed files with 430 additions and 769 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@@ -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": "^3.4.17",
"tailwindcss": "^4.1.11",
"usehooks-ts": "^3.1.1"
},
"devDependencies": {

1073
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

6
src/components/App.tsx
View File

@@ -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">

2
src/components/Post.tsx
View File

@@ -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>

2
src/main.tsx
View File

@@ -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>

44
src/styles/index.css Normal file
View File

@@ -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;
}

47
src/styles/index.scss
View File

@@ -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;
}

19
vite.config.ts
View File

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