第四章：样式系统搭建🎯本章目标：安装配置 Tailwind CSS，定制主题色彩，实现深色模式支持。4.1 安装 Tailwind CSS4.1.1 什么是 Tailwind CSS？Tailwind CSS 是一个原子化 CSS 框架，特点如下：特性说明原子化预定义的工具类，无需写 CSS可定制完全可配置的设计系统响应式内置响应式断点深色模式轻松实现深色主题Tree-shaking生产构建自动清除未使用的样式4.1.2 安装依赖pnpm add-D tailwindcss postcss autoprefixer4.1.3 创建配置文件npx tailwindcss init-p这会创建两个文件：tailwind.config.js- Tailwind 配置postcss.config.js- PostCSS 配置📸 [截图占位：Tailwind 配置文件创建成功]4.2 配置 Tailwind CSS4.2.1 配置扫描路径打开tailwind.config.js，修改内容：/** @type {import('tailwindcss').Config} */exportdefault{darkMode:'class',content:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}',],theme:{extend:{colors:{primary:{DEFAULT:'#2563EB',hover:'#1D4ED8',light:'#DBEAFE',dark:'#1E40AF',},secondary:'#3B82F6',cta:'#F97316',},fontFamily:{heading:['Poppins','Noto Sans SC','sans-serif'],body:['Open Sans','Noto Sans SC','sans-serif'],mono:['JetBrains Mono','monospace'],},boxShadow:{card:'0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)','card-hover':'0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05)',modal:'0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1)',}