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>
相关推荐
该用户已不存在1 分钟前
macOS是开发的终极进化版吗?
前端·后端
小豆包api17 分钟前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
布列瑟农的星空40 分钟前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天42 分钟前
Vue3 实现 B站 视差 动画
前端
KenXu43 分钟前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮1 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界1 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说1 小时前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
小鱼儿亮亮1 小时前
使用Redux的combineReducers对数据拆分
前端·react.js
定栓1 小时前
Typescript入门-类型断言讲解
前端·javascript·typescript