2024.12.01 | 作者：Adlerian
在上一篇文章中，我们成功搭建了 Laravel 11 和 Vue 3 的开发环境，并创建了基本的 Vue 组件。今天我们将进一步提升前端样式的开发效率，介绍如何将 Tailwind CSS 集成到我们的项目中，并基于 Vite 进行构建和优化。Tailwind CSS 是一款实用优先的 CSS 框架，它将帮助我们快速构建现代、响应式的 Web 界面。
1. 安装 Tailwind CSS
首先，我们需要确保项目中已安装 Node.js 和 npm，并且已经完成了 Vite 和 Vue 3 的安装（在之前的教程中已经完成）。接下来，我们将安装并配置 Tailwind CSS。
1.1：安装 Tailwind CSS 和相关依赖
打开项目终端，运行以下命令来安装 Tailwind CSS 及其相关工具：
pnpm install -D tailwindcss postcss autoprefixer
接着，初始化 Tailwind 配置：
npx tailwindcss init
这将在项目根目录下生成一个 tailwind.config.js 文件，用于配置 Tailwind 的样式。
1.2：配置 Tailwind CSS
打开 tailwind.config.js 文件，配置 Tailwind 的内容扫描路径，确保它能够识别到 .vue 和 .blade.php 文件。修改配置如下：
module.exports = {
content: [
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
theme: {
extend: {},
},
plugins: [],
}
1.3：创建 Tailwind CSS 文件
在 resources/css 目录下创建一个新的 CSS 文件 app.css，并添加以下内容：
/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
这三行代码分别引入了 Tailwind CSS 的基础样式、组件样式和实用工具类。
1.4：配置 Vite 以支持 Tailwind CSS
打开项目根目录下的 vite.config.js 文件，并进行以下修改，确保 Vite 配置支持 Vue 和 Tailwind CSS：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './resources/js'),
},
},
})
然后，我们需要在 resources/js 目录下安装并引入我们的 CSS 文件。在 resources/js/app.js 中，添加以下代码：
import '../css/app.css'; // 引入 Tailwind CSS
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
1.5：编译和运行项目
接下来，运行以下命令以启动 Vite 开发服务器：
npm run dev
此时，Tailwind CSS 已经集成成功，您可以通过 Vite 进行开发和调试。
2. 在 Vue 组件中使用 Tailwind CSS
现在，我们可以在 Vue 组件中使用 Tailwind CSS 提供的类来进行样式设计。在 Vue 3 中，我们可以使用类似的方式来处理样式，而无需编写大量自定义 CSS。
2.1：使用 Tailwind 样式
打开 resources/js/components 目录，创建或修改一个 Vue 组件。例如，我们可以修改之前创建的 BlogPost.vue，使用 Tailwind 来构建一个简单的布局：
<!-- resources/js/components/BlogPost.vue -->
<template>
<div class="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-lg">
<h1 class="text-4xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 mb-4">Welcome to the Laravel + Vue Blog!</h1>
<p class="text-gray-600 text-sm sm:text-base md:text-lg">This is a sample blog post using Vue 3 and Tailwind CSS.</p>
</div>
</template>
<script setup>
</script>
<style scoped>
/* 不需要添加额外的样式，Tailwind 已经为你提供了所有需要的实用类 */
</style>
我们使用了 Tailwind CSS 提供的多个实用类，如：
max-w-4xl: 设置最大宽度为 4xl。mx-auto: 水平居中。p-6: 设置内边距为 6。bg-white: 设置背景色为白色。shadow-md: 添加中等阴影。rounded-lg: 设置圆角。text-4xl: 设置文本大小为 4xl。font-bold: 设置字体加粗。text-gray-800: 设置文本颜色为深灰色。mb-4: 设置下边距。
2.2：响应式布局
Tailwind CSS 提供了强大的响应式设计支持。在 Vue 组件中，我们可以使用 Tailwind 的响应式工具类，使页面在不同设备上表现良好。例如：
<template>
<div class="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-lg">
<h1 class="text-4xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 mb-4">Welcome to the Laravel + Vue Blog!</h1>
<p class="text-gray-600 text-sm sm:text-base md:text-lg">This is a sample blog post using Vue 3 and Tailwind CSS.</p>
</div>
</template>
<script setup>
</script>
在这里，我们为不同屏幕尺寸使用了不同的文本大小。这样，您的应用在手机、平板和桌面上都会呈现出不同的样式，使其适应各种屏幕大小。
sm:text-3xl: 在小屏幕上设置文本大小为3xl。md:text-4xl: 在中等屏幕上设置文本大小为4xl。lg:text-5xl: 在大屏幕上设置文本大小为5xl。
3. 扩展 Tailwind 配置
Tailwind 提供了丰富的扩展功能，您可以通过修改 tailwind.config.js 文件来定制项目的设计系统。例如，您可以添加自己的品牌颜色、字体，或者配置其他 Tailwind 插件。
3.1：自定义主题
您可以在 tailwind.config.js 文件中自定义主题。例如，添加自己的颜色：
module.exports = {
theme: {
extend: {
colors: {
brand: '#4CAF50', // 添加品牌绿色
},
},
},
}
3.2：使用 Tailwind 插件
Tailwind 还有许多有用的插件，您可以轻松扩展其功能。例如，使用 @tailwindcss/forms 插件美化表单元素：
npm install @tailwindcss/forms
然后在 tailwind.config.js 文件中加载插件：
module.exports = {
plugins: [
require('@tailwindcss/forms'),
],
}
通过本篇文章，我们已经成功将 Tailwind CSS 集成到基于 Vite 的 Laravel 11 和 Vue 3 项目中。在使用 Tailwind 的过程中，我们通过实用类快速构建了响应式的页面，并且学会了如何自定义 Tailwind 的配置来满足项目需求。
接下来，可以开始构建更复杂的页面，并充分利用 Tailwind 的功能。
END
