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;
相关推荐
木斯佳5 小时前
前端八股文面经大全:腾讯WXG暑期前端一面(2026-05-15)·面经深度解析
前端·面试·笔试
canonical_entropy6 小时前
NOP Chaos Flux 架构演变史:从 AMIS 重写到现代低代码运行时
前端·aigc·ai编程
张元清6 小时前
useEffect 之外:专门处理异步、深比较和 SSR 的 Effect Hook
前端·javascript·面试
小小小小宇7 小时前
前端双Token机制无感刷新(二)
前端
zhangxingchao7 小时前
AI Agent 基础问题系统整理:从 LangChain、LangGraph、MCP 到 Agent 架构、记忆、工具调用与评估体系
前端·人工智能·后端
Moment7 小时前
AI 为什么总喜欢写防御性代码?
前端·后端·面试
浑手营销7 小时前
浑手科技案例分享:133个精准询盘短视频玩法
前端·人工智能·科技
IT_陈寒7 小时前
SpringBoot自动配置的坑,差点让我加班到天亮
前端·人工智能·后端
LucianaiB8 小时前
【Dify + EdgeOne】你奶奶也会做一个“智票通”,轻松票据自定义提取+防数据泄露
前端·后端
python在学ing8 小时前
前端-CSS学习笔记
前端·css·python·学习