【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翻转效果?

相关推荐
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6961 小时前
CSS-响应式布局
前端
三小河1 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法1 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku1 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6962 小时前
2025-35st-w-日常开发总结
前端
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js