如何在Vite+Vue3项目中配置Tailwind CSS

Tailwind CSS就是一款很受欢迎的实用框架，今天就教大家在Vite项目结合Vue3的环境下，如何安装和配置Tailwind CSS。

一、Tailwind CSS 是什么？

Tailwind CSS的工作方式很特别，它会扫描项目里的HTML文件、JavaScript组件，还有各种模板中的CSS类名，然后依据这些类名生成对应的样式代码，并把它们写入到一个静态CSS文件中。这种方式让它具备快速、灵活、可靠的特点，而且没有运行时的额外负担，用起来非常方便。

二、安装Tailwind CSS

将Tailwind CSS作为PostCSS插件安装，是把它集成到像webpack、Rollup、Vite和Parcel这些构建工具里的最佳选择。在Vite项目里安装Tailwind CSS，主要有下面几个步骤：

初始化Vite项目（若未创建）：如果还没有Vite项目，可以使用Create Vite来创建。在终端执行npm create vite@latest my-project --template vue，这里的my-project是项目名称，你可以根据自己的需求修改。执行完这个命令后，进入项目目录cd my-project。
安装依赖：在项目目录下的终端执行npm install -D tailwindcss postcss autoprefixer。这一步会安装Tailwind CSS及其相关依赖，-D表示将这些依赖安装为开发依赖。
生成配置文件：运行npx tailwindcss init -p命令，这个命令会生成tailwind.config.js和postcss.config.js两个配置文件。其中，tailwind.config.js用于配置Tailwind CSS的各种选项，postcss.config.js则用于配置PostCSS相关的插件。

三、配置Tailwind CSS

（一）配置模板路径

打开生成的tailwind.config.js文件，在其中配置模板文件的路径。示例代码如下：

/** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}" ], theme: { extend: {}, }, plugins: [] }

在content数组里，列出项目中所有包含CSS类名的文件路径。这样Tailwind CSS就能找到这些文件，并为其中的类名生成样式。

（二）创建并引入样式文件

在项目的src/assets/styles目录下（你也可以根据项目结构自行选择目录）创建tailwind.css文件，在文件中写入以下内容：

@tailwind base; @tailwind components; @tailwind utilities;

这三行代码分别引入了Tailwind CSS的基础样式、组件样式和工具类样式。然后，在项目的main.ts文件中引入这个样式文件：

import '@/assets/styles/tailwind.css';

完成这些步骤后，就可以在项目中使用Tailwind CSS的类名来定义样式了。比如在某个Vue组件中添加如下代码：

<h1 class="text-3xl font-bold underline">Hello world!</h1>

这样，h1标签就会应用Tailwind CSS中定义的样式，显示为3倍大字体、加粗且带有下划线。

四、TS版本项目的特殊配置

如果你的项目是基于TypeScript开发的，还需要额外进行一些配置：

安装相关依赖：确保已经安装了TypeScript和Tailwind CSS的类型定义，在终端执行npm install -D typescript @types/node。
重命名配置文件：把tailwind.config.js重命名为tailwind.config.ts。
更新配置文件语法：修改tailwind.config.ts文件，使用TypeScript语法，并导入合适的类型定义。示例代码如下：

import type { Config } from 'tailwindcss'; const config: Config = { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: {}, }, plugins: [] }; export default config;