Merge branch 'development' into add_husky_script

Author: trillium

client/package.json

@@ -10,6 +10,7 @@
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.16.7",
     "@mui/x-date-pickers": "^7.21.0",
+    "@tailwindcss/vite": "^4.1.10",
     "@vitejs/plugin-react": "^4.0.3",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "classnames": "^2.2.6",
@@ -29,8 +30,9 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.3",
     "react-router-dom": "^5.1.2",
+    "tailwindcss": "^4.1.10",
     "validator": "^13.7.0",
-    "vite": "^4.5.14",
+    "vite": "^5.4.19",
     "vite-plugin-svgr": "^3.2.0"
   },
   "scripts": {

client/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('autoprefixer')],
+};

client/src/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.scss';
+import './tailwind.css';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 import { SnackbarProvider } from './context/snackbarContext';

client/src/tailwind.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

client/tailwind.config.js

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

client/vite.config.mjs

@@ -1,15 +1,18 @@
-import { defineConfig, loadEnv } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-import svgr from "vite-plugin-svgr";
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import svgr from 'vite-plugin-svgr';
+import tailwindcss from '@tailwindcss/vite';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 export default defineConfig(({ mode }) => {
   // Load env file based on`mode in the current working directory.
-  const env = loadEnv(mode, process.cwd(), '');
+  const env = loadEnv(mode, __dirname, '');
   return {
-    plugins: [
-      svgr(),
-      react(),
-    ],
+    plugins: [svgr(), react(), tailwindcss()],
     server: {
       port: env.CLIENT_PORT,
       host: true,

client/yarn.lock

@@ -24,10 +24,10 @@
     "cross-env": "^7.0.2",
     "cross-var": "^1.1.0",
     "dotenv-cli": "^3.2.0",
-    "styled-components": "^6.1.13",
-    "vite": "^5.4.19"
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.21",
     "cypress": "^5.0.0",
     "eslint": "9.9.1",
     "eslint-config-prettier": "9.1.0",