build: + tailwind

package.json

@@ -25,10 +25,16 @@
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "vite": "^4.5.1"
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "vite": "^4.5.1",
+    "vite-plugin-css-modules": "^0.0.1",
+    "vite-plugin-windicss": "^1.9.3",
+    "windicss": "^3.5.6"
   }
 }

postcss.config.js

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

src/assets/index.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

src/main.jsx

@@ -18,6 +18,7 @@ import ErrorPage from '@/views/ErrorPage';
 
 import Conversations from '@/views/Conversations/ChatWindow';
 // import Conversations from '@/views/Conversations/ChatApp';
+import '@/assets/index.css';
 
 configure({
   useProxies: 'ifavailable',

src/views/Conversations/Components/CustomerProfile.jsx

@@ -27,7 +27,7 @@ const CustomerProfile = observer(({ customer }) => {
 
   return (
     <div className=' divide-x-0 divide-y divide-dotted divide-slate-400/[.24]'>
-      <Card
+      <Card className='p-2'
         bordered={false}
         title={order?.order_no}
         extra={<Radio.Group size={'small'} options={orderTags} value={'important'} onChange={({ target: { value } }) => {}} optionType='button' buttonStyle={'solid'} />}>

tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: false,
+  theme: {
+    extend: {
+      // gridTemplateColumns: {
+      //   'responsive':repeat(autofill,minmax('300px',1fr))
+      // }
+    },
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false
+  }
+};

vite.config.js

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import WindiCSS from 'vite-plugin-windicss'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), WindiCSS()],
   server: {
     host: "0.0.0.0",
   },