add tailwind

package.json

@@ -19,6 +19,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
@@ -26,7 +27,9 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.13",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function App() {
   const [count, setCount] = React.useState(0)
-  return <button onClick={() => setCount((count) => count + 1)}>
+  return <button className="p-4 bg-red-500 text-white" onClick={() => setCount((count) => count + 1)}>
     count is {count}
   </button>;
 }

src/main.tsx

@@ -2,5 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App';
 
+import "./tailwind.css";
+
 const root = document.getElementById('root');
 root && ReactDOM.createRoot(root).render(<React.StrictMode><App /></React.StrictMode>);

src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}