tailwindcss 简化css样式的使用

// 1.安装依赖
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

// 2.添加 postcss.config.js 文件
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

// 3. 在taillwind.config.js 文件中配置生效的文件和规则
const spaces = []
for (let i = 0; i <= 2000; i++) {
  if(i % 2 === 0 || i < 10){
    spaces.push(i)
  }
}
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue}"],
  theme: {
    extend: {
      width: Object.fromEntries(
          spaces.map(size => [size.toString(), `${size}px`])
      ),
      height: Object.fromEntries(
          spaces.map(size => [size.toString(), `${size}px`])
      ),
      padding: Object.fromEntries(
          spaces.map(size => [size.toString(), `${size}px`])
      ),
      margin: Object.fromEntries(
          spaces.map(size => [size.toString(), `${size}px`])
      ),
      fontSize: Object.fromEntries(
          spaces.map(size => [size.toString(), `${size}px`])
      ),
      lineHeight: Object.fromEntries(
          spaces.map(size => [size.toString(), `${size}px`])
      ),
      borderRadius: Object.fromEntries(
          spaces.map(size => [size.toString(), `${size}px`])
      ),
    },
  },
  plugins: [],
}

// 4. 新建一个index.css 文件,
@tailwind base;
@tailwind components;
@tailwind utilities;

// 5.在mian.js 文件中引入 @tailwind 指令 开始使用
import "./index.css"