vu2 下载使用tailwind css

命令

复制代码
# Vue2 

# 安装talwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 -D

# 生成tailwind.config.js 和 postcss.config.js
npx tailwindcss init -p

main.js

复制代码
import "tailwindcss/tailwind.css";

postcss.config.js

复制代码
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

tailwind.config.js

复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  content: [],
  purge: ["./src/**/*.html", "./src/**/*.js", "./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.vue"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: "#F58848",
        success: "#54d880",
        "primary-sub": "#5FB671",
        danger: "#E24C52",
        "success-light": "#EEF8F0"
      }
    }
  },
  corePlugins: {
    aspectRatio: false
  },
  plugins: []
};

添加完上面的 就可以正常使用

以下 是多余的 已测试删除后还能继续使用

src/input.css

复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;
相关推荐
brzhang20 小时前
ChatGPT Pulse来了:AI 每天替你做研究,这事儿你该高兴还是该小心?
前端·后端·架构
泉城老铁20 小时前
springboot+vue 文件下载,实现大文件的分片压缩和下载,避免内存溢出
前端·spring boot·后端
用户2037355498120 小时前
Vue+Node+MongoDB高级全栈开发视频教程 完整版
前端
我是天龙_绍21 小时前
setup 函数 和 setup 语法糖
前端
泉城老铁21 小时前
Spring Boot和Vue.js项目中实现文件压缩下载功能
前端·spring boot·后端
我是天龙_绍21 小时前
vue3 中,setup 函数 和 <script setup> 的区别
前端
krifyFan21 小时前
vue3+elementPlus el-date-picker 自定义禁用状态hook 实现结束时间不能小于开始时间
前端·vue.js·elementui
卷Java21 小时前
WXML 编译错误修复总结
xml·java·前端·微信小程序·uni-app·webview
SevgiliD21 小时前
解决使用 fixed固定列时el-table导致纵向滚动条问题
前端·vue.js·elementui
天蓝色的鱼鱼21 小时前
🚀 告别 Electron 的臃肿:用 Tauri 打造「轻如鸿毛」的桌面应用
前端