From 782d1d8cbc9dbd134757ca4e34e77c017ebfb019 Mon Sep 17 00:00:00 2001 From: xiaomai Date: Wed, 17 Sep 2025 21:39:24 +0800 Subject: [PATCH] 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. --- package.json | 2 + pnpm-lock.yaml | 414 +++++++++++++++++++++++++++++++--- pnpm-workspace.yaml | 1 + src/App.vue | 6 +- src/main.ts | 2 + src/router/index.ts | 2 +- src/styles/base.css | 0 src/styles/main.css | 2 + src/views/TailwindcssDemo.vue | 11 + vite.config.ts | 9 +- 10 files changed, 415 insertions(+), 34 deletions(-) create mode 100644 src/styles/base.css create mode 100644 src/styles/main.css create mode 100644 src/views/TailwindcssDemo.vue diff --git a/package.json b/package.json index e0699bf..7b3f988 100644 --- 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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3c57d5d..3d86122 100644 --- 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: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index efc037a..5b23a1c 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,2 +1,3 @@ onlyBuiltDependencies: + - '@tailwindcss/oxide' - esbuild diff --git a/src/App.vue b/src/App.vue index abfd315..70197a4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,4 +1,7 @@ - + diff --git a/src/main.ts b/src/main.ts index fda1e6e..b967962 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,3 +1,5 @@ +import '@/styles/main.css' + import { createApp } from 'vue' import { createPinia } from 'pinia' diff --git a/src/router/index.ts b/src/router/index.ts index e1eab52..0b74f6a 100644 --- 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 diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000..9a85760 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,2 @@ +@import './base.css'; +@import 'tailwindcss'; diff --git a/src/views/TailwindcssDemo.vue b/src/views/TailwindcssDemo.vue new file mode 100644 index 0000000..2ac8a9b --- /dev/null +++ b/src/views/TailwindcssDemo.vue @@ -0,0 +1,11 @@ + + + diff --git a/vite.config.ts b/vite.config.ts index d49d708..d6b83b7 100644 --- 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)), }, }, })