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>
相关推荐
ts码农3 分钟前
model层实现:
java·服务器·前端
修仙的人8 分钟前
【开发环境】 VSCode 快速搭建 Python 项目开发环境
前端·后端·python
泡芙牛牛11 分钟前
CSS动画:animation、transition、transform、translate的区别
前端·css
shenyi13 分钟前
openlayers实现高德地图区划+撒点+点击
前端
wwy_frontend13 分钟前
不想装 Redux?useContext + useReducer 就够了!
前端·react.js
前端老鹰23 分钟前
HTML <link rel="preload">:提前加载关键资源的性能优化利器
前端·性能优化·html
兰为鹏26 分钟前
react-quill使用服务端上传图片handlers导致中文输入问题-原理分析
前端
FanetheDivine29 分钟前
具有配置项和取消能力的防抖节流函数
前端·javascript
卸任34 分钟前
Docker打包并部署Next.js
前端·docker·next.js
行星飞行35 分钟前
使用 Figma mcp 和 Playwright mcp 提升 UI 开发与调试效率,附 rule 分享
前端