feat(build): integrate Tailwind CSS

This commit integrates Tailwind CSS into the project for utility-first styling. - Adds `tailwindcss` and `@tailwindcss/vite` as dependencies. - Configures the Vite build process to use the Tailwind plugin. - Sets up the main CSS entry point to import Tailwind styles. - Adds a new route and a `TailwindcssDemo` component to verify the setup.
2025-09-17 21:39:24 +08:00
parent db25c5beff
commit 782d1d8cbc
10 changed files with 415 additions and 34 deletions
--- a/package.json
+++ b/package.json
@@ -16,7 +16,9 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
+    "@tailwindcss/vite": "^4.1.13",
    "pinia": "^3.0.3",
+    "tailwindcss": "^4.1.13",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,15 @@ importers:

  .:
    dependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.1.13
+        version: 4.1.13(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))
      pinia:
        specifier: ^3.0.3
        version: 3.0.3(typescript@5.8.3)(vue@3.5.21(typescript@5.8.3))
+      tailwindcss:
+        specifier: ^4.1.13
+        version: 4.1.13
      vue:
        specifier: ^3.5.18
        version: 3.5.21(typescript@5.8.3)
@@ -26,10 +32,10 @@ importers:
        version: 22.18.5
      '@vitejs/plugin-vue':
        specifier: ^6.0.1
-        version: 6.0.1(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))(vue@3.5.21(typescript@5.8.3))
+        version: 6.0.1(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))(vue@3.5.21(typescript@5.8.3))
      '@vitejs/plugin-vue-jsx':
        specifier: ^5.0.1
-        version: 5.1.1(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))(vue@3.5.21(typescript@5.8.3))
+        version: 5.1.1(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))(vue@3.5.21(typescript@5.8.3))
      '@vue/eslint-config-prettier':
        specifier: ^10.2.0
        version: 10.2.0(eslint@9.35.0(jiti@2.5.1))(prettier@3.6.2)
@@ -59,10 +65,10 @@ importers:
        version: 5.8.3
      vite:
        specifier: ^7.0.6
-        version: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)
+        version: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)
      vite-plugin-vue-devtools:
        specifier: ^8.0.0
-        version: 8.0.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))(vue@3.5.21(typescript@5.8.3))
+        version: 8.0.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))(vue@3.5.21(typescript@5.8.3))
      vue-tsc:
        specifier: ^3.0.4
        version: 3.0.7(typescript@5.8.3)
@@ -419,6 +425,10 @@ packages:
    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
    engines: {node: '>=18.18'}

+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
  '@jridgewell/gen-mapping@0.3.13':
    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}

@@ -572,6 +582,96 @@ packages:
    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
    engines: {node: '>=18'}

+  '@tailwindcss/node@4.1.13':
+    resolution: {integrity: sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.13':
+    resolution: {integrity: sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.13':
+    resolution: {integrity: sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.13':
+    resolution: {integrity: sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.13':
+    resolution: {integrity: sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
+    resolution: {integrity: sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
+    resolution: {integrity: sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
+    resolution: {integrity: sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
+    resolution: {integrity: sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.13':
+    resolution: {integrity: sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.13':
+    resolution: {integrity: sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
+    resolution: {integrity: sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
+    resolution: {integrity: sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.13':
+    resolution: {integrity: sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/vite@4.1.13':
+    resolution: {integrity: sha512-0PmqLQ010N58SbMTJ7BVJ4I2xopiQn/5i6nlb4JmxzQf8zcS5+m2Cv6tqh+sfDwtIdjoEnOvwsGQ1hkUi8QEHQ==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
  '@tsconfig/node22@22.0.2':
    resolution: {integrity: sha512-Kmwj4u8sDRDrMYRoN9FDEcXD8UpBSaPQQ24Gz+Gamqfm7xxn+GBR7ge/Z7pK8OXNGyUzbSwJj+TH6B+DS/epyA==}

@@ -847,6 +947,10 @@ packages:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
    engines: {node: '>=10'}

+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
  color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@@ -903,9 +1007,17 @@ packages:
    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
    engines: {node: '>=12'}

+  detect-libc@2.1.0:
+    resolution: {integrity: sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==}
+    engines: {node: '>=8'}
+
  electron-to-chromium@1.5.220:
    resolution: {integrity: sha512-TWXijEwR1ggr4BdAKrb1nMNqYLTx1/4aD1fkeZU+FVJGTKu53/T7UyHKXlqEX3Ub02csyHePbHmkvnrjcaYzMA==}

+  enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+    engines: {node: '>=10.13.0'}
+
  entities@4.5.0:
    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
    engines: {node: '>=0.12'}
@@ -1082,6 +1194,9 @@ packages:
    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
    engines: {node: '>=18'}

+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
  graphemer@1.4.0:
    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}

@@ -1209,6 +1324,70 @@ packages:
    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
    engines: {node: '>= 0.8.0'}

+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
  locate-path@6.0.0:
    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
    engines: {node: '>=10'}
@@ -1241,9 +1420,22 @@ packages:
    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
    engines: {node: '>=16 || 14 >=14.17'}

+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+
  mitt@3.0.1:
    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}

+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
  mrmime@2.0.1:
    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
    engines: {node: '>=10'}
@@ -1478,6 +1670,17 @@ packages:
    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
    engines: {node: ^14.18.0 || >=16.0.0}

+  tailwindcss@4.1.13:
+    resolution: {integrity: sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==}
+
+  tapable@2.2.3:
+    resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
+    engines: {node: '>=6'}
+
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
  tinyglobby@0.2.15:
    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
    engines: {node: '>=12.0.0'}
@@ -1659,6 +1862,10 @@ packages:
  yallist@3.1.1:
    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}

+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
  yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
@@ -1993,6 +2200,10 @@ snapshots:

  '@humanwhocodes/retry@0.4.3': {}

+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
  '@jridgewell/gen-mapping@0.3.13':
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5
@@ -2099,6 +2310,77 @@ snapshots:

  '@sindresorhus/merge-streams@4.0.0': {}

+  '@tailwindcss/node@4.1.13':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.5.1
+      lightningcss: 1.30.1
+      magic-string: 0.30.19
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.13
+
+  '@tailwindcss/oxide-android-arm64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.13':
+    dependencies:
+      detect-libc: 2.1.0
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.13
+      '@tailwindcss/oxide-darwin-arm64': 4.1.13
+      '@tailwindcss/oxide-darwin-x64': 4.1.13
+      '@tailwindcss/oxide-freebsd-x64': 4.1.13
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.13
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.13
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.13
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.13
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.13
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.13
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.13
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.13
+
+  '@tailwindcss/vite@4.1.13(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))':
+    dependencies:
+      '@tailwindcss/node': 4.1.13
+      '@tailwindcss/oxide': 4.1.13
+      tailwindcss: 4.1.13
+      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)
+
  '@tsconfig/node22@22.0.2': {}

  '@types/estree@1.0.8': {}
@@ -2202,22 +2484,22 @@ snapshots:
      '@typescript-eslint/types': 8.44.0
      eslint-visitor-keys: 4.2.1

-  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))(vue@3.5.21(typescript@5.8.3))':
+  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))(vue@3.5.21(typescript@5.8.3))':
    dependencies:
      '@babel/core': 7.28.4
      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
      '@rolldown/pluginutils': 1.0.0-beta.38
      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.4)
-      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)
+      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)
      vue: 3.5.21(typescript@5.8.3)
    transitivePeerDependencies:
      - supports-color

-  '@vitejs/plugin-vue@6.0.1(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))(vue@3.5.21(typescript@5.8.3))':
+  '@vitejs/plugin-vue@6.0.1(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))(vue@3.5.21(typescript@5.8.3))':
    dependencies:
      '@rolldown/pluginutils': 1.0.0-beta.29
-      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)
+      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)
      vue: 3.5.21(typescript@5.8.3)

  '@volar/language-core@2.4.23':
@@ -2302,14 +2584,14 @@ snapshots:
    dependencies:
      '@vue/devtools-kit': 7.7.7

-  '@vue/devtools-core@8.0.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))(vue@3.5.21(typescript@5.8.3))':
+  '@vue/devtools-core@8.0.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))(vue@3.5.21(typescript@5.8.3))':
    dependencies:
      '@vue/devtools-kit': 8.0.2
      '@vue/devtools-shared': 8.0.2
      mitt: 3.0.1
      nanoid: 5.1.5
      pathe: 2.0.3
-      vite-hot-client: 2.1.0(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))
+      vite-hot-client: 2.1.0(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))
      vue: 3.5.21(typescript@5.8.3)
    transitivePeerDependencies:
      - vite
@@ -2473,6 +2755,8 @@ snapshots:
      ansi-styles: 4.3.0
      supports-color: 7.2.0

+  chownr@3.0.0: {}
+
  color-convert@2.0.1:
    dependencies:
      color-name: 1.1.4
@@ -2514,8 +2798,15 @@ snapshots:

  define-lazy-prop@3.0.0: {}

+  detect-libc@2.1.0: {}
+
  electron-to-chromium@1.5.220: {}

+  enhanced-resolve@5.18.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.3
+
  entities@4.5.0: {}

  error-stack-parser-es@1.0.5: {}
@@ -2733,6 +3024,8 @@ snapshots:

  globals@14.0.0: {}

+  graceful-fs@4.2.11: {}
+
  graphemer@1.4.0: {}

  has-flag@4.0.0: {}
@@ -2815,6 +3108,51 @@ snapshots:
      prelude-ls: 1.2.1
      type-check: 0.4.0

+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.1.0
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+
  locate-path@6.0.0:
    dependencies:
      p-locate: 5.0.0
@@ -2846,8 +3184,16 @@ snapshots:
    dependencies:
      brace-expansion: 2.0.2

+  minipass@7.1.2: {}
+
+  minizlib@3.0.2:
+    dependencies:
+      minipass: 7.1.2
+
  mitt@3.0.1: {}

+  mkdirp@3.0.1: {}
+
  mrmime@2.0.1: {}

  ms@2.1.3: {}
@@ -3056,6 +3402,19 @@ snapshots:
    dependencies:
      '@pkgr/core': 0.2.9

+  tailwindcss@4.1.13: {}
+
+  tapable@2.2.3: {}
+
+  tar@7.4.3:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+
  tinyglobby@0.2.15:
    dependencies:
      fdir: 6.5.0(picomatch@4.0.3)
@@ -3109,17 +3468,17 @@ snapshots:

  util-deprecate@1.0.2: {}

-  vite-dev-rpc@1.1.0(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)):
+  vite-dev-rpc@1.1.0(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)):
    dependencies:
      birpc: 2.5.0
-      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)
-      vite-hot-client: 2.1.0(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))
+      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)
+      vite-hot-client: 2.1.0(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))

-  vite-hot-client@2.1.0(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)):
+  vite-hot-client@2.1.0(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)):
    dependencies:
-      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)
+      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)

-  vite-plugin-inspect@11.3.3(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)):
+  vite-plugin-inspect@11.3.3(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)):
    dependencies:
      ansis: 4.1.0
      debug: 4.4.3
@@ -3129,27 +3488,27 @@ snapshots:
      perfect-debounce: 2.0.0
      sirv: 3.0.2
      unplugin-utils: 0.3.0
-      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)
-      vite-dev-rpc: 1.1.0(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))
+      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)
+      vite-dev-rpc: 1.1.0(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))
    transitivePeerDependencies:
      - supports-color

-  vite-plugin-vue-devtools@8.0.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))(vue@3.5.21(typescript@5.8.3)):
+  vite-plugin-vue-devtools@8.0.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))(vue@3.5.21(typescript@5.8.3)):
    dependencies:
-      '@vue/devtools-core': 8.0.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))(vue@3.5.21(typescript@5.8.3))
+      '@vue/devtools-core': 8.0.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))(vue@3.5.21(typescript@5.8.3))
      '@vue/devtools-kit': 8.0.2
      '@vue/devtools-shared': 8.0.2
      execa: 9.6.0
      sirv: 3.0.2
-      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)
-      vite-plugin-inspect: 11.3.3(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))
-      vite-plugin-vue-inspector: 5.3.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1))
+      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)
+      vite-plugin-inspect: 11.3.3(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))
+      vite-plugin-vue-inspector: 5.3.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1))
    transitivePeerDependencies:
      - '@nuxt/kit'
      - supports-color
      - vue

-  vite-plugin-vue-inspector@5.3.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)):
+  vite-plugin-vue-inspector@5.3.2(vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)):
    dependencies:
      '@babel/core': 7.28.4
      '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.4)
@@ -3160,11 +3519,11 @@ snapshots:
      '@vue/compiler-dom': 3.5.21
      kolorist: 1.8.0
      magic-string: 0.30.19
-      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)
+      vite: 7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)
    transitivePeerDependencies:
      - supports-color

-  vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1):
+  vite@7.1.5(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1):
    dependencies:
      esbuild: 0.25.9
      fdir: 6.5.0(picomatch@4.0.3)
@@ -3176,6 +3535,7 @@ snapshots:
      '@types/node': 22.18.5
      fsevents: 2.3.3
      jiti: 2.5.1
+      lightningcss: 1.30.1

  vscode-uri@3.1.0: {}

@@ -3230,6 +3590,8 @@ snapshots:

  yallist@3.1.1: {}

+  yallist@5.0.0: {}
+
  yocto-queue@0.1.0: {}

  yoctocolors@2.1.2: {}
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,3 @@
 onlyBuiltDependencies:
+  - '@tailwindcss/oxide'
  - esbuild
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,7 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+
+</script>

 <template>
  <h1>You did it!</h1>
@@ -6,6 +9,7 @@
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
+  <RouterView />
 </template>

 <style scoped></style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,5 @@
+import '@/styles/main.css'
+
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [],
+  routes: [{ path: '/', name: 'home', component: import('@/views/TailwindcssDemo.vue') }],
 })

 export default router
--- a/src/styles/base.css
+++ b/src/styles/base.css
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -0,0 +1,2 @@
+@import './base.css';
+@import 'tailwindcss';
--- a/src/views/TailwindcssDemo.vue
+++ b/src/views/TailwindcssDemo.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const frameworkName = ref<string>('Tailwindcss');
+</script>
+
+<template>
+  <div class="tailwindcss-demo">
+    Hello, {{ frameworkName }}!
+  </div>
+</template>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,17 +4,14 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import tailwindcss from '@tailwindcss/vite'

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    vueJsx(),
-    vueDevTools(),
-  ],
+  plugins: [vue(), vueJsx(), vueDevTools(), tailwindcss()],
  resolve: {
    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
 })