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;
相关推荐
securitor8 分钟前
【java】IP来源提取国家地址
java·前端·python
yqcoder43 分钟前
NPM 包管理问题汇总
前端·npm·node.js
程序菜鸟营1 小时前
nvm安装详细教程(安装nvm、node、npm、cnpm、yarn及环境变量配置)
前端·npm·node.js
bsr19831 小时前
前端路由的hash模式和history模式
前端·history·hash·路由模式
杨过姑父1 小时前
ES6 简单练习笔记--变量申明
前端·笔记·es6
Sunny_lxm2 小时前
<keep-alive> <component ></component> </keep-alive>缓存的组件实现组件,实现组件切换时每次都执行指定方法
前端·缓存·component·active
咔咔库奇3 小时前
【TypeScript】命名空间、模块、声明文件
前端·javascript·typescript
兩尛3 小时前
订单状态定时处理、来单提醒和客户催单(day10)
java·前端·数据库
又迷茫了3 小时前
vue + element-ui 组件样式缺失导致没有效果
前端·javascript·vue.js
哇哦Q3 小时前
原生HTML集合
前端·javascript·html