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>
相关推荐
小小小小宇10 分钟前
前端XSS和CSRF以及CSP
前端
UFIT14 分钟前
NoSQL之redis哨兵
java·前端·算法
超级土豆粉21 分钟前
CSS3 的特性
前端·css·css3
星辰引路-Lefan21 分钟前
深入理解React Hooks的原理与实践
前端·javascript·react.js
wyn2000112833 分钟前
JavaWeb的一些基础技术
前端
Hygge-star1 小时前
Flask音频处理:构建高效的Web音频应用指南
前端·flask·音视频·pygame·csdn开发云
江城开朗的豌豆1 小时前
JavaScript篇:回调地狱退散!6年老前端教你写出优雅异步代码
前端·javascript·面试
飞鸟malred1 小时前
vite+tailwind封装组件库
前端·react.js·npm
Angindem1 小时前
从零搭建uniapp项目
前端·vue.js·uni-app
java干货1 小时前
深度解析:Spring Boot 配置加载顺序、优先级与 bootstrap 上下文
前端·spring boot·bootstrap