如何在Tailwind CSS中添加自定义响应式类md:grid-flow-col？

我尝试使用<div class="md:grid-flow-col">时无任何效果，原因是该响应式类未包含在Tailwind CSS中。查看styles.css可见已有的Tailwind类，例如：

.md\:grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.md\:grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.md\:flex-row{
  flex-direction: row;
}

我想要添加：

.md\:grid-flow-col{
  grid-auto-flow: column;
}

以此实现预期的网格布局，但每次保存文档后，我的修改都会被自动清除。请问该如何添加可正常生效的自定义响应式类？

直接修改Tailwind生成的styles.css会被构建流程覆盖，必须通过Tailwind配置文件来添加自定义类，推荐两种实用方法：

方法一：扩展主题属性（简洁高效） #

打开项目根目录的tailwind.config.js（没有则新建），在theme.extend里扩展gridAutoFlow属性：

module.exports = {
  theme: {
    extend: {
      gridAutoFlow: {
        'col': 'column',
      },
    },
  },
};

保存后重新运行项目的构建命令（比如npm run build），Tailwind会自动生成.grid-flow-col以及md:grid-flow-col、lg:grid-flow-col等全断点的响应式类，直接使用即可。

方法二：通过插件添加工具类（灵活自定义） #

如果需要更个性化的样式控制，用Tailwind插件功能实现：

const plugin = require('tailwindcss/plugin');

module.exports = {
  // 保留原有配置内容...
  plugins: [
    plugin(function({ addUtilities }) {
      const customUtilities = {
        '.grid-flow-col': {
          'grid-auto-flow': 'column',
        },
      };
      // 启用响应式变体，自动生成各断点前缀的类
      addUtilities(customUtilities, { variants: ['responsive'] });
    }),
  ],
};

保存配置后重新构建项目，自定义的响应式类就不会再被自动清除了。

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