fix(tailwindcss): tailwindcss works with vite, no custom theme

This commit is contained in:
JK-le-dev 2025-10-18 14:44:28 -05:00 committed by devaine
commit 85e65b6e75
No known key found for this signature in database
GPG key ID: 4BA6E50E8768348F
7 changed files with 99 additions and 70 deletions

42
package.json Normal file
View file

@ -0,0 +1,42 @@
{
"name": "codered-astra",
"private": true,
"scripts": {
"build": "vite build",
"dev": "vite",
"host": "vite host",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
"clean-dist": "find apps/ -type d -name 'dist' -print0 | xargs -r0 -- rm -r",
"clean-all": "find apps/ -type d -name 'dist' -print0 | xargs -r0 -- rm -r && find . -path ./node_modules -prune -o -name 'node_modules' | xargs rm -rf "
},
"license": "ISC",
"dependencies": {
"@google/genai": "^1.25.0",
"@tailwindcss/postcss": "^4.1.14",
"@tailwindcss/vite": "^4.1.14",
"@vitejs/plugin-react": "^5.0.4",
"cors": "^2.8.5",
"dotenv": "^17.2.3",
"express": "^5.1.0",
"helmet": "^8.1.0",
"lucide-react": "^0.546.0",
"pg": "^8.16.3",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-router": "^7.9.4",
"react-router-dom": "^7.9.4",
"vite-jsconfig-paths": "^2.0.1"
},
"packageManager": ">=npm@10.9.0",
"devDependencies": {
"eslint": "^9.38.0",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^7.0.0",
"eslint-plugin-react-refresh": "^0.4.24",
"nodemon": "^3.1.10",
"prettier": "^3.6.2",
"tailwindcss": "^4.1.14",
"vite": "^7.1.10"
}
}

11
src/App.jsx Normal file
View file

@ -0,0 +1,11 @@
import React from "react";
function App() {
return (
<div className="min-h-screen bg-blue-500 flex items-center justify-center">
<p className="text-3xl font-bold text-primary">Hello, world!</p>
</div>
);
}
export default App;

14
src/index.css Normal file
View file

@ -0,0 +1,14 @@
@import "tailwindcss";
body {
margin: 0;
background: rgba(var(--background));
}
@theme {
--color-primary: 15, 40, 98;
--color-secondary: 79, 95, 118;
--color-accent: 158, 54, 58;
--color-paragraph: 255, 255, 255;
--color-background: 9, 31, 54;
}

7
src/styles/theme.css Normal file
View file

@ -0,0 +1,7 @@
@theme {
--color-paragraph: 255, 255, 255;
--color-background: 9, 31, 54;
--color-primary: 15, 40, 98;
--color-secondary: 79, 95, 118;
--color-accent: 158, 54, 58;
}

9
vite.config.js Normal file
View file

@ -0,0 +1,9 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import jsconfigPaths from "vite-jsconfig-paths";
import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [tailwindcss(), react(), jsconfigPaths()],
});

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/src/index.css" rel="stylesheet" />
<title>codered-astra</title>
</head>
<body>

View file

@ -9,6 +9,7 @@
"dependencies": {
"@google/genai": "^1.25.0",
"@tailwindcss/postcss": "^4.1.14",
"@tailwindcss/vite": "^4.1.14",
"@vitejs/plugin-react": "^5.0.4",
"cors": "^2.8.5",
"dotenv": "^17.2.3",
@ -23,7 +24,6 @@
"vite-jsconfig-paths": "^2.0.1"
},
"devDependencies": {
"autoprefixer": "^10.4.21",
"eslint": "^9.38.0",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-react": "^7.37.5",
@ -1605,6 +1605,20 @@
"tailwindcss": "4.1.14"
}
},
"node_modules/@tailwindcss/vite": {
"version": "4.1.14",
"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.14.tgz",
"integrity": "sha512-BoFUoU0XqgCUS1UXWhmDJroKKhNXeDzD7/XwabjkDIAbMnc4ULn5e2FuEuBbhZ6ENZoSYzKlzvZ44Yr6EUDUSA==",
"license": "MIT",
"dependencies": {
"@tailwindcss/node": "4.1.14",
"@tailwindcss/oxide": "4.1.14",
"tailwindcss": "4.1.14"
},
"peerDependencies": {
"vite": "^5.2.0 || ^6 || ^7"
}
},
"node_modules/@types/babel__core": {
"version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@ -1984,44 +1998,6 @@
"node": ">= 0.4"
}
},
"node_modules/autoprefixer": {
"version": "10.4.21",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
"integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"browserslist": "^4.24.4",
"caniuse-lite": "^1.0.30001702",
"fraction.js": "^4.3.7",
"normalize-range": "^0.1.2",
"picocolors": "^1.1.1",
"postcss-value-parser": "^4.2.0"
},
"bin": {
"autoprefixer": "bin/autoprefixer"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"peerDependencies": {
"postcss": "^8.1.0"
}
},
"node_modules/available-typed-arrays": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@ -3459,20 +3435,6 @@
"node": ">= 0.6"
}
},
"node_modules/fraction.js": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
"dev": true,
"license": "MIT",
"engines": {
"node": "*"
},
"funding": {
"type": "patreon",
"url": "https://github.com/sponsors/rawify"
}
},
"node_modules/fresh": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
@ -5201,16 +5163,6 @@
"node": ">=0.10.0"
}
},
"node_modules/normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@ -5661,13 +5613,6 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true,
"license": "MIT"
},
"node_modules/postgres-array": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",