feat: upgrade to tailwind v4.0

Author: nxhawk

README.md

@@ -2,7 +2,7 @@
 
 # React Tailwindcss Boilerplate build with Vite
 
-This is a boilerplate build with Vite, React 18, TypeScript, Vitest, Testing Library, Commitlint, TailwindCSS 3, Eslint and Prettier.
+This is a boilerplate build with Vite, React 18, TypeScript, Vitest, Commitlint, TailwindCSS 3, Eslint and Prettier.
 
 ## What is inside?
 
@@ -12,8 +12,7 @@ This project uses many tools like:
 - [ReactJS](https://reactjs.org)
 - [TypeScript](https://www.typescriptlang.org)
 - [Vitest](https://vitest.dev)
-- [Testing Library](https://testing-library.com)
-- [Commitlint gitmoji](https://www.npmjs.com/package/commitlint-config-gitmoji)
+- [Commitlint Angular Conventional Commit](https://www.npmjs.com/package/@commitlint/config-conventional)
 - [Tailwindcss](https://tailwindcss.com)
 - [Eslint](https://eslint.org)
 - [Prettier](https://prettier.io)
@@ -62,24 +61,24 @@ yarn run build
 
 ### Commitlint 
 #### Structure
-The Gitmoji Structure of commit styles is below
+The Structure of commit styles is below
 
 ```bash
-:gitmoji: type(scope?): subject
+type(scope?): subject
 body?
 footer?
 ```
 
 Example
 
 ```bash
-:sparkles: feat(changelog): support chinese title
+feat(changelog): support chinese title
 
-:bug: fix(config): fix a subject bug
+fix(config): fix a subject bug
 
-:memo: docs: update README.md
+docs: update README.md
 
-:bulb: docs(plugin): update comments
+docs(plugin): update comments
 ```
 
 ## License

package.json

@@ -18,10 +18,12 @@
   "dependencies": {
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
+    "@tailwindcss/vite": "^4.0.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.10",
@@ -38,7 +40,6 @@
     "husky": "^8.0.0",
     "postcss": "^8.5.1",
     "prettier": "3.3.3",
-    "tailwindcss": "^3.4.17",
     "typescript": "^5.2.2",
     "vite": "^5.3.4"
   }

postcss.config.js

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

src/index.css

@@ -1,11 +1,12 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import tailwindcss from "@tailwindcss/vite";
 import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "/",
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   server: {
     port: 5173,
   },