From 74ec5156581b7ad3e832102618c7c0592102e1d9 Mon Sep 17 00:00:00 2001 From: JK-le-dev Date: Sat, 18 Oct 2025 14:44:28 -0500 Subject: [PATCH] fix(tailwindcss): tailwindcss works with vite, no custom theme --- index.html | 1 + package-lock.json | 85 ++++++++------------------------------------ package.json | 2 +- postcss.config.js | 8 ----- src/App.jsx | 8 ++--- src/index.css | 18 +++++----- src/styles/theme.css | 10 +++--- tailwind.config.js | 19 ---------- vite.config.js | 3 +- 9 files changed, 36 insertions(+), 118 deletions(-) delete mode 100644 postcss.config.js delete mode 100644 tailwind.config.js diff --git a/index.html b/index.html index 12f80c9..ddadf4a 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + codered-astra diff --git a/package-lock.json b/package-lock.json index 48eceeb..c8c08ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 659e16b..1833938 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,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", @@ -28,7 +29,6 @@ }, "packageManager": ">=npm@10.9.0", "devDependencies": { - "autoprefixer": "^10.4.21", "eslint": "^9.38.0", "eslint-plugin-import": "^2.32.0", "eslint-plugin-react": "^7.37.5", diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 49ac4f3..0000000 --- a/postcss.config.js +++ /dev/null @@ -1,8 +0,0 @@ -// postcss.config.js -export default { - plugins: { - // Use the dedicated PostCSS plugin package - "@tailwindcss/postcss": {}, - autoprefixer: {}, - }, -}; diff --git a/src/App.jsx b/src/App.jsx index 29bbdf9..35aab7c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,10 @@ -import { useState } from "react"; +import React from "react"; function App() { return ( - <> -

heyo

- +
+

Hello, world!

+
); } diff --git a/src/index.css b/src/index.css index 80c49f7..f1f7c63 100644 --- a/src/index.css +++ b/src/index.css @@ -1,16 +1,14 @@ -@import "./styles/theme.css" layer(theme); @import "tailwindcss"; -@layer theme, components; -@tailwind base; -@tailwind components; -@tailwind utilities; body { margin: 0; - font-family: - -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", - "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; 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; +} diff --git a/src/styles/theme.css b/src/styles/theme.css index fa01b30..e9e4594 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -1,7 +1,7 @@ @theme { - --paragraph: 255, 255, 255; - --background: 9, 31, 54; - --primary: 15, 40, 98; - --secondary: 79, 95, 118; - --accent: 158, 54, 58; + --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; } diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 5b480dc..0000000 --- a/tailwind.config.js +++ /dev/null @@ -1,19 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: ["./src/**/*.{js,ts,jsx,tsx}"], - theme: { - extend: { - colors: { - background: "rgba(var(--background))", - paragraph: "rgba(var(--paragraph))", - primary: "rgba(var(--primary))", - secondary: "rgba(var(--secondary))", - accent: "rgba(var(--accent))", - }, - flex: { - 0: "0 0 100%", - }, - }, - }, - plugins: [], -}; diff --git a/vite.config.js b/vite.config.js index eebfd72..9632d41 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,8 +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: [react(), jsconfigPaths()], + plugins: [tailwindcss(), react(), jsconfigPaths()], });