【Vue】Vue3 安装 Tailwind CSS 入门

初始化 Vue 3 项目

npm install -g @vue/cli
vue create my-project

安装 Tailwind CSS

进入你的项目目录，然后安装 Tailwind CSS 和其依赖项：

npm install -D tailwindcss postcss autoprefixer

配置 PostCSS

Tailwind CSS 需要通过 PostCSS 进行处理。你需要创建一个 postcss.config.js 文件，并添加以下配置：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

为什么需要在 Vue 3 项目中安装 Tailwind CSS 时配置 postcss.config.js

当你在项目中安装 Tailwind CSS 时，实际上是在安装一个包含多个 PostCSS 插件的集合。为了让这些插件能够正确工作，你需要告诉 PostCSS 如何找到和使用这些插件。postcss.config.js 文件就是用来配置这些信息的地方。

在 postcss.config.js 中，你指定了哪些插件应该被 PostCSS 使用，以及它们的顺序，比如你上面的两个配置。

tailwindcss 是 Tailwind CSS 的 PostCSS 插件，它负责解析 Tailwind 指令；

autoprefixer 是另一个常用的插件，它自动添加必要的浏览器前缀，以确保 CSS 在不同浏览器中的兼容性。

因此，当你在 Vue 3 项目中安装 Tailwind CSS 并配置 postcss.config.js 时，你实际上是在设置一个 CSS 处理流程，该流程利用 PostCSS 和相关插件来转换和优化你的 CSS 代码，使得 Tailwind CSS 能够正常工作，从而提供高效且易于维护的前端样式解决方案。

如果在最新的 vue3 + vite5 启动报错，请修改为 postcss.config.cjs

创建 Tailwind 配置文件

运行以下命令来生成默认的 Tailwind 配置文件：

npx tailwindcss init

TypeScript 配置文件 则使用 “ --ts”，具体其他配置文件请参考官网配置。

这将在项目根目录下创建一个 tailwind.config.js 文件。如果你希望自定义配置，你可以编辑这个文件。

当生成并出现后，需要在导出的对象中content[]数组配置添加所需模版文件的路径，即为将要写到哪类后缀模版文件，就需要写入该文件路径及后缀。

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

引入 Tailwind 到你的项目

你可以直接在 main.ts 中引入 tailwind.css，也可以创建一个 css 文件单独引入

import 'tailwindcss/tailwind.css';

/* src/assets/css/main.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

在 .vue 文件中使用

参考链接

tailwindcss
如何在Vue3项目中安装使用Tailwind CSS 以及通过Tailwind CSS插件实现卡片的3D翻转效果？