常用配置

自定义样式

tailwind.config.js

module.exports = {
  content: [`${__dirname}/index.html`, `${__dirname}/src/**/*.{vue,js,ts,jsx,tsx}`],
  theme: {
    extend: {
      borderRadius: {
        "50%": "50%", // 添加 rounded-50% 的半圆效果
      },
    },
  },
  plugins: [],
};

添加新的断点尺寸

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        '2k': '2560px',   // 2K 分辨率（2560x1440）
        '4k': '3840px'    // 4K 分辨率（3840x2160）
      },
    },
  },
}

指定必然编译的类名

在 tailwind.config.js 中配置强制保留的类名：

module.exports = {
  safelist: [
    {
      pattern:
        /(transition|duration|ease|border|opacity|flex|max-w|justify|items|gap|rounded|hover|group-hover|xl|lg|md|sm|w|h|z|box|absolute|relative|text|pl|border)/, // 正则匹配所有用到的工具类
    },
    "custom-ease-smooth", // 明确指定自定义类
  ],
}