chore: install tailwindcss

Author: jason89521

dev/App.tsx

@@ -7,7 +7,7 @@ function App() {
   const [key, setKey] = useState(1);
 
   return (
-    <div className="App">
+    <div className="App text-blue-400">
       <button onClick={() => setKey(key + 1)}>key</button>
       <button onClick={() => setCount(count + 1)}>{count}</button>
       <br />

dev/index.css

@@ -1,11 +1,4 @@
-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;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}

package.json

@@ -59,6 +59,7 @@
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "@vitejs/plugin-react": "^2.0.0",
+    "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "3.3.0",
@@ -69,9 +70,11 @@
     "grapheme-splitter": "^1.0.4",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
+    "postcss": "^8.4.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
+    "tailwindcss": "^3.1.8",
     "ts-jest": "^28.0.7",
     "typescript": "^4.7.4",
     "vite": "^3.0.2"

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.js

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