初始化 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翻转效果?