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;
相关推荐
UrbanJazzerati1 分钟前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉11 分钟前
5分钟上手LangChain.js:用DeepSeek给你的App加上AI能力
前端·人工智能·langchain
wuhen_n12 分钟前
双端 Diff 算法详解
前端·javascript·vue.js
UrbanJazzerati12 分钟前
Vue 3 纯小白快速入门指南
前端·面试
雮尘13 分钟前
手把手带你玩转Android gRPC:一篇搞定原理、配置与客户端开发
android·前端·grpc
光影少年13 分钟前
说说闭包的理解和应用场景?
前端·javascript·掘金·金石计划
是一碗螺丝粉14 分钟前
LangChain 核心组件深度解析:模型与提示词模板
前端·langchain·aigc
狗哥哥14 分钟前
微前端架构下的平台级公共组件资源体系设计
前端·架构
MQliferecord15 分钟前
首屏轮播图使用cdn加载webp图片的代码案例
前端
菜鸟shuai16 分钟前
如何在老项目中使用AI实现智能问答
前端