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.

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>

src/main.ts

@@ -1,3 +1,5 @@
+import '@/styles/main.css'
+
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 

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

src/styles/main.css

@@ -0,0 +1,2 @@
+@import './base.css';
+@import 'tailwindcss';

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>