Lazy loaded image
学习笔记
Tailwindcss使用
Words 162Read Time 1 min
2025-3-8
2025-3-20
type
status
date
slug
summary
tags
category
icon
password

一.在vue3中使用Tailwindcss

1. 安装Tailwindcss

2. 生成 Tailwind 配置文件

运行以下命令生成 tailwind.config.jspostcss.config.js

3. 配置 Tailwind

修改 tailwind.config.js,在 content 数组中指定 Vue 组件和页面文件:

4. 在 main.css 中导入 Tailwind

src/assets/main.css(或 src/style.css)中引入 Tailwind 的基础样式:

5. 在 main.ts/main.js 中导入 CSS

src/main.ts(或 src/main.js)中引入 CSS:

6.再vite.config.ts中引入

上一篇
Vue3
下一篇
书签