【Vue】Vue3 安装 Tailwind CSS 入门

初始化 Vue 3 项目

shell 复制代码
npm install -g @vue/cli
vue create my-project

安装 Tailwind CSS

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

shell 复制代码
npm install -D tailwindcss postcss autoprefixer

配置 PostCSS

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

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 能够正常工作,从而提供高效且易于维护的前端样式解决方案。

创建 Tailwind 配置文件

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

shell 复制代码
npx tailwindcss init

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

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

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

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

引入 Tailwind 到你的项目

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

ts 复制代码
import 'tailwindcss/tailwind.css';
css 复制代码
/* src/assets/css/main.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

在 .vue 文件中使用


参考链接

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

相关推荐
龙在天3 分钟前
vue 请求接口快慢 覆盖 解决方案
前端
跟橙姐学代码20 分钟前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_20 分钟前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou13724 分钟前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌24 分钟前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_26 分钟前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
云枫晖33 分钟前
JS核心知识-数据转换
前端·javascript
xuyanzhuqing34 分钟前
代码共享方案-多仓库合并单仓库
前端
RaidenLiu36 分钟前
Riverpod 3:重建控制的实践与性能优化指南
前端·flutter
学习中的小胖子36 分钟前
React的闭包陷阱
前端