详细先容 一下Tailwind CSS 在 Vite 项目中的设置和使用

1.安装步调

2. # 在你的 Vite 项目中安装 Tailwind CSS 及其依赖
3. npm install -D tailwindcss postcss autoprefixer
5. # 生成 Tailwind CSS 和 PostCSS 配置文件
6. npx tailwindcss init -p

复制代码

2. 设置文件设置

2. /** @type {import('tailwindcss').Config} */
3. export default {
4.   // 指定要处理的文件
5.   content: [
6.     "./index.html",
7.     "./src/**/*.{vue,js,ts,jsx,tsx}",  // 处理 src 目录下所有的相关文件
8.   ],
9.   theme: {
10.     extend: {
11.       // 在这里扩展 Tailwind 的默认配置
12.       colors: {
13.         'custom-blue': '#1234567',  // 自定义颜色
14.       },
15.       spacing: {
16.         '128': '32rem',  // 自定义间距
17.       },
18.       // 更多自定义配置...
19.     },
20.   },
21.   plugins: [
22.     // 这里可以添加 Tailwind 插件
23.   ],
24. }

复制代码

3.在主 CSS 文件中添加 Tailwind 指令

2. /* 导入 Tailwind 的基础样式 */
3. @tailwind base;
4. /* 导入组件样式 */
5. @tailwind components;
6. /* 导入功能类 */
7. @tailwind utilities;
9. /* 自定义 CSS 类 */
10. @layer components {
11.   .btn-primary {
12.     @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600;
13.   }
14. }

复制代码

4.使用示例

2. <template>
3.   <!-- 基础样式使用 -->
4.   <div class="flex min-h-screen bg-gray-100">
5.     <!-- 间距和尺寸 -->
6.     <div class="p-4 m-2 w-full max-w-md">
7.       <!-- 文字样式 -->
8.       <h1 class="text-2xl font-bold text-gray-800 mb-4">
9.         标题
10.       </h1>
11.       
12.       <!-- 响应式设计 -->
13.       <div class="md:flex md:space-x-4">
14.         <!-- 卡片示例 -->
15.         <div class="bg-white rounded-lg shadow-md p-6 mb-4 md:mb-0">
16.           <!-- 悬停和状态效果 -->
17.           <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
18.             点击我
19.           </button>
20.         </div>
21.       </div>
22.     </div>
23.   </div>
24. </template>

复制代码

5.常用类阐明

2. 布局类：
3. - flex: 弹性布局
4. - grid: 网格布局
5. - container: 容器
6. - hidden/block/inline: 显示方式
8. 间距：
9. - p-{size}: padding
10. - m-{size}: margin
11. - space-x/y-{size}: 子元素间距
13. 尺寸：
14. - w-{size}: 宽度
15. - h-{size}: 高度
16. - max-w-{size}: 最大宽度
18. 颜色：
19. - text-{color}: 文字颜色
20. - bg-{color}: 背景色
21. - border-{color}: 边框颜色
23. 响应式：
24. - sm: >= 640px
25. - md: >= 768px
26. - lg: >= 1024px
27. - xl: >= 1280px

复制代码

6.实用本事

2. <template>
3.   <!-- 组合使用 -->
4.   <div class="transition-all hover:scale-105 active:scale-95">
5.     <!-- 暗黑模式 -->
6.     <div class="dark:bg-gray-800 dark:text-white">
7.       内容
8.     </div>
9.    
10.     <!-- 自定义组合类 -->
11.     <button class="btn-primary">
12.       使用自定义类
13.     </button>
14.   </div>
15. </template>

复制代码