Vue3中使用tailwindcss插件

1、下载依赖。

https://www.tailwindcss.cn/docs/border-collapse // 官网地址

npm install -D tailwindcss
npx tailwindcss init

目录中会新建一个tailwind.config.js配置文件。
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

2、在你的入口样式文件中添加代码。

@tailwind base;
@tailwind components;
@tailwind utilities;

3、页面中使用。

 <p class="flex flex-col justify-center items-center nodata"></p>
相关推荐
fxshy几秒前
01-Cesium添加泛光线
开发语言·前端·javascript
聊天宝快捷回复31 分钟前
必收藏,售后客服日常回复必备的话术 (精华版)
java·前端·数据库·经验分享·微信·职场发展·快捷回复
v(z_xiansheng88)33 分钟前
markdown
前端·macos
清灵xmf41 分钟前
在 Vue 3 中实现“折叠”与“展开”文本内容
前端·javascript·css·vue.js
我的椰子啊1 小时前
el-input仅限输入数字 (输入框仅支持输入数字)
前端·javascript·vue.js
pcplayer1 小时前
WEB 编程:富文本编辑器 Quill 配合 Pico.css 样式被影响的问题之Shadow DOM
前端·css
mez_Blog1 小时前
React学习笔记(3.0)
前端·笔记·学习·react.js·前端框架
用户75390019234811 小时前
在vercel部署项目时除首页外刷新报404
前端·vue.js
木子七2 小时前
JS数据类型&类型转换
前端·javascript
Манго нектар2 小时前
JavaScript的条件语句
前端·javascript