Add the support of Tailwind CSS to the Project

elyse502 · Nov 4, 2024 · 496faf6 · 496faf6
1 parent 62052fe
commit 496faf6
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/admin/package.json b/admin/package.json
@@ -21,11 +21,14 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.13.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "vite": "^5.4.10"
   }
 }
diff --git a/admin/postcss.config.js b/admin/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/admin/src/App.jsx b/admin/src/App.jsx
@@ -2,8 +2,8 @@ import React from 'react'
 
 const App = () => {
   return (
-    <div>
-
+    <div className='text-3xl font-bold underline'>
+      Hello world!
     </div>
   )
 }

diff --git a/admin/src/index.css b/admin/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/admin/tailwind.config.js b/admin/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}