🖤 一个专注于「Vue3 + TailwindCSS」的 50 天极简开发挑战，探索组件边界，打磨技术锋芒。
🎉 欢迎来到 50 个小项目的第一天！今天我们将从零开始搭建一个 Vue3 项目，并引入 Tailwind CSS v4，为后续项目做好技术准备。
💻 技术点
- 组合式API：使用Vue3的Composition API进行状态管理
- Tailwind CSS：采用实用优先的CSS框架，提高开发效率
- 响应式设计：适配不同屏幕尺寸的布局
- 路由管理：使用Vue Router实现SPA导航
- 模块化组织：清晰的项目结构和组件分层
📂项目结构
50days50projects/
├── public/ # 静态资源目录
├── src/ # 源代码目录
│ ├── assets/ # 项目资源文件
│ ├── components/ # 通用组件
│ ├── constants/ # 常量定义
│ ├── projects/ # 50个项目组件
│ ├── router/ # 路由配置
│ ├── sections/ # 页面区块组件
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ └── style.css # 全局样式
├── index.html # HTML 模板
├── package.json # 项目依赖
└── vite.config.js # Vite 配置
📦 项目搭建
1. Vite 创建 vue 项目：
pnpm create vite 50-vue-projects --template vue
cd 50-vue-projects
pnpm install
pnpm dev
- 访问
http://localhost:5173🎉
2. 集成 Tailwindcss v4
npm install -D tailwindcss@4 @tailwindcss/vite
配置vite.config.js
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [vue(), tailwindcss()],
resolve: {
alias: {
'@': '/src',
},
},
})
编辑style.css（Tailwind CSS v4 主题化实践入门（自定义 Theme + 主题模式切换）✨）
@import 'tailwindcss';
@custom-variant dark (&:is(.dark *));
@theme inline {
--font-sans:
ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-mono:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.439 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);
}
@layer base {
body {
@apply bg-black;
}
}
@layer utilities {
.c-space {
@apply px-5 sm:px-10;
}
.head-text {
@apply bg-gradient-to-r from-[#BEC1CF] from-60% via-[#D5D8EA] via-60% to-[#D5D8EA] to-100% bg-clip-text text-3xl font-semibold text-transparent sm:text-4xl;
}
.btn {
@apply mx-auto flex cursor-pointer items-center justify-center gap-4 rounded-md bg-black p-3 text-white transition-all active:scale-95;
}
.btn-ping_dot {
@apply relative inline-flex h-3 w-3 rounded-full bg-green-500;
}
}
验证是否成功 App.vue
<template>
<div class="min-h-screen bg-gray-900 text-white flex items-center justify-center">
<h1 class="text-3xl font-bold text-purple-400">✅ Tailwind v4 + Vue3 已集成成功！</h1>
</div>
</template>
3. 集成 vue router
npm install vue-router@4
src下新增router/index.js
import { createWebHistory, createRouter } from 'vue-router'
const routes = [
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
4. 集成prettier (可选)
pnpm install -D prettier prettier-plugin-tailwindcss
根目录新增.prettierrc
{
"printWidth": 100,
"tabWidth": 4,
"useTabs": false,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "ignore",
"vueIndentScriptAndStyle": true,
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"plugins": ["prettier-plugin-tailwindcss"]
}
根目录新增.prettierignore
node_modules
dist
*.log
🚀 小结
今天我们完成了：
- 搭建项目框架
- 集成
Tailwindcssvue routerprettier
📅 明日预告：构建网页主题框架！
🧠 每天进步一点点，50 天后惊艳所有人！