在NextJS开发模式下如何引入Tailwind所有工具类？

方法一：通过tailwind.config.js配置开发环境专属规则 #

在项目根目录的tailwind.config.js中，根据当前环境调整规则，仅在开发模式下加载全量工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // 开发环境下通过safelist匹配所有类及常用变体
  safelist: process.env.NODE_ENV === 'development' ? [
    {
      pattern: /./,
      variants: ['hover', 'focus', 'active', 'sm', 'md', 'lg', 'xl', '2xl']
    }
  ] : [],
  theme: {
    extend: {},
  },
  plugins: [],
}

你可以根据需求缩小正则范围，比如只匹配间距类/^m[tbrlxy]-[\d\/]+$/，减少冗余CSS体积。

方法二：切换到Tailwind传统模式（仅开发环境） #

Tailwind v3默认是JIT按需生成模式，传统模式会预生成所有工具类。在开发环境下切换模式即可：

module.exports = {
  mode: process.env.NODE_ENV === 'development' ? 'classic' : 'jit',
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

注意：传统模式会生成几MB的CSS，可能略微影响开发环境初始加载速度，但配置成本极低。

核心说明 #

两种方法都能保证生产环境仍使用JIT按需生成CSS，不会影响最终构建体积；开发环境下则可直接在开发者控制台添加任意Tailwind类，无需修改源码重新构建。

内容的提问来源于stack exchange，提问作者chilly_maximus