chore: set up tailwind

package-lock.json

@@ -24,6 +24,7 @@
       "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^5.33.0",
         "@typescript-eslint/parser": "^5.33.0",
+        "autoprefixer": "^10.4.8",
         "eslint": "^8.21.0",
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-import": "^2.26.0",
@@ -31,8 +32,10 @@
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "husky": "^8.0.1",
+        "postcss": "^8.4.16",
         "prettier": "^2.7.1",
-        "pretty-quick": "^3.1.3"
+        "pretty-quick": "^3.1.3",
+        "tailwindcss": "^3.1.8"
       },
       "engines": {
         "node": "18.x",

package.json

@@ -50,6 +50,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
+    "autoprefixer": "^10.4.8",
     "eslint": "^8.21.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.26.0",
@@ -57,7 +58,9 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
+    "postcss": "^8.4.16",
     "prettier": "^2.7.1",
-    "pretty-quick": "^3.1.3"
+    "pretty-quick": "^3.1.3",
+    "tailwindcss": "^3.1.8"
   }
 }

postcss.config.js

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

src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

tailwind.config.js

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