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;
相关推荐
小毛驴8503 分钟前
典型的 Vue 3 项目目录结构详解
前端·javascript·vue.js
德育处主任3 分钟前
p5.js 四边形(quad)的基础用法
前端·数据可视化·canvas
半生过往9 分钟前
Vue 项目动态接口获取翻译数据实现方案(前端处理语言翻译 vue-i18n)
前端·javascript·vue.js·i18n
德育处主任21 分钟前
p5.js 入门:用 point () 绘制点的超简单教程
前端·javascript·canvas
yume_sibai39 分钟前
Vue 插槽
前端·javascript·vue.js
O败者食尘D1 小时前
【Vue2】结合chrome与element-ui的网页端条码打印
前端·vue.js·chrome
橘颂TA2 小时前
【C++】C++11特性的介绍和使用(第三篇)
前端·c++·算法·c++11
爷_8 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee4410 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro11 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs