tailwind

安装 [Vue 2]

vue3直接参考官网

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

初始化

1. 配置文件

# 创建一个空的tainwind css配置文件
npx tailwindcss init
# or
# 你也可以创建一个包含有所有默认配置的文件
npx tailwindcss init -fill
# 两种方法效果一样

2. postcss.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

3. index.css

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. main.js

import './index.css'

5. 安装sass

    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^3.3.1",

hover尺寸放大

transition duration-150 ease-in-out transform hover:scale-110;

JIT

const colors = require('./node_modules/tailwindcss/colors');
const colorSaveList = [];
const extendeColors = {};

for (const key in colors) {
  extendeColors[key] = colors[key];

  // To avoid tailWind "Color deprecated" warning
  if (!['lightBlue', 'warmGray', 'trueGray', 'coolGray',  'blueGray'].includes(key))
  {
    colorSaveList.push(`text-${key}-${colorValue}`);
    colorSaveList.push(`bg-${key}-${colorValue}`);
  }
}


module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  safelist: colorSaveList,
  theme: {
   extend: {
      colors: extendeColors
   }
  },
  plugins: [
    require('tailwind-scrollbar'),
  ]

}