vue2使用tailwindcss

安装包

js 复制代码
npm install -D tailwindcss

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

js 复制代码
npx tailwindcss init

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

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,内容如下

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

package.json里面新增如下

js 复制代码
"scripts":{
    "watch":"npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
}

main.js引入

js 复制代码
import '@/assets/output.css'

运行

bash 复制代码
// 先运行
npm run watch
// 在运行启动项目的命令
npm run serve
相关推荐
Asort1 天前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney1 天前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥1 天前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare1 天前
选择文件夹路径
前端
艾小码1 天前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月1 天前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁1 天前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅1 天前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸1 天前
Prompt结构化输出:从入门到精通的系统指南
前端