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;
相关推荐
hao_04135 分钟前
elpis-core: 基于 Koa 实现 web 服务引擎架构设计解析
前端
码农黛兮_4641 分钟前
HTML、CSS 和 JavaScript 基础知识点
javascript·css·html
狂野小青年44 分钟前
npm 报错 gyp verb `which` failed Error: not found: python2 解决方案
前端·npm·node.js
鲁鲁5171 小时前
Windows 环境下安装 Node 和 npm
前端·npm·node.js
跑调却靠谱1 小时前
elementUI调整滚动条高度后与固定列冲突问题解决
前端·vue.js·elementui
呵呵哒( ̄▽ ̄)"1 小时前
React - 编写选择礼物组件
前端·javascript·react.js
Coding的叶子1 小时前
React Flow 简介:构建交互式流程图的最佳工具
前端·react.js·流程图·fgai·react agent
apcipot_rain6 小时前
【应用密码学】实验五 公钥密码2——ECC
前端·数据库·python
ShallowLin7 小时前
vue3学习——组合式 API:生命周期钩子
前端·javascript·vue.js
Nejosi_念旧7 小时前
Vue API 、element-plus自动导入插件
前端·javascript·vue.js