refactor: update configuration files to use ES module syntax and integrate Tailwind CSS

postcss.config.js

@@ -1,6 +1,5 @@
-module.exports = {
+export default {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
 };

src/assets/main.css

@@ -1,7 +1,5 @@
-@import './base.css';
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "./base.css" layer(base);
+@import "tailwindcss";
 
 #app {
   width: 100%;

tailwind.config.js

@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "./src/**/*.vue"],
   theme: {
     extend: {},

vite.config.ts

@@ -4,6 +4,7 @@ import { execSync } from "node:child_process";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
+import tailwindcss from "@tailwindcss/vite";
 import svgLoader from "vite-svg-loader";
 
 function sh(cmd: string): string {
@@ -46,7 +47,7 @@ export default defineConfig({
       },
     },
   },
-  plugins: [vue(), vueJsx(), svgLoader()],
+  plugins: [vue(), vueJsx(), tailwindcss(), svgLoader()],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),