当前位置: 首页 > article >正文

vue2使用tailwindcss

安装包

npm install -D tailwindcss

初始化配置文件tailwindcss.config.js

npx tailwindcss init

tailwind.config.js 文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 这里配置的是src文件夹下面所有的html被匹配到
  content: ["./src/**/*.{vue,js,ts,jsx,tsx}",'./public/index.html'],
  important:true,
  theme: {
    extend: {},
  },
  plugins: [],
}

/src/assets下面新建index.css,内容如下

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

package.json里面新增如下

"scripts":{
    "watch":"npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
}

main.js引入

import '@/assets/output.css'

运行

// 先运行
npm run watch
// 在运行启动项目的命令
npm run serve

http://www.kler.cn/a/459833.html

相关文章:

  • 【华为OD-E卷 - 最优资源分配 100分(python、java、c++、js、c)】
  • leetcode 173.二叉搜索树迭代器栈绝妙思路
  • 运算符重载 - 自定义运算符行为
  • 大模型系列——旋转位置编码和长度外推
  • Linux之ARM(MX6U)裸机篇----5.仿stm32的LED驱动实验
  • PostgreSQL的备份方式
  • 地理数据库Telepg面试内容整理-描述你如何在GIS应用中使用空间数据进行分析并生成可视化结果
  • nvidia_gpu_exporter 显卡监控
  • 基于python大数据的体育用品营销支撑系统研究
  • Vue.js组件开发-实现列表无缝动态滚动
  • Kafka 幂等性与事务
  • VIM: Vision Mamba基于双向状态空间模型的高效视觉表示学习
  • STM32完全学习——FLASH上FATFS文件管理系统
  • OpenHarmony源码编译后烧录镜像教程,RK3566鸿蒙开发板演示
  • 本地创建了一个 Git 仓库推送到GitHub中
  • Android笔试面试题AI答之非技术问题(2)
  • OPPO手机如何正确使用金融理财计算器
  • vue3学习笔记(11)-组件通信
  • XL系列433芯片、2.4G收发芯片 通讯对码说明
  • 【LeetCode 面试经典150题】详细题解之矩阵篇
  • 人民医院网络安全规划与设计
  • 正大的资产配置理念解析
  • day-102 二进制矩阵中的最短路径
  • STM32 高级 WIFi案例1:测试AT指令
  • 数据库自增 id 过大导致前端时数据丢失
  • 活动预告 |【Part1】Microsoft Azure 在线技术公开课:数据基础知识