如何在Tailwind CSS中定制断点并使用后缀替代前缀？

下面给你几个可行的方案，不用手动改完整个代码库：

1. 写个Tailwind插件自定义变体 #

Tailwind的插件机制可以直接改写类名生成逻辑，你可以在配置里加个插件，把断点前缀改成后缀。示例代码：

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      // 你的断点配置
    }
  },
  plugins: [
    function({ addVariant, e, config }) {
      Object.keys(config('theme.screens')).forEach(screen => {
        // 生成后缀式变体，比如p-4-md
        addVariant(screen, ({ modifySelectors, separator }) => {
          modifySelectors(({ className }) => {
            return `.${e(`${className}${separator}${screen}`)}`;
          });
        });
        // 可选：保留原前缀变体，避免现有代码失效
        addVariant(`old-${screen}`, ({ modifySelectors, separator }) => {
          modifySelectors(({ className }) => {
            return `.${e(`${screen}${separator}${className}`)}`;
          });
        });
      });
    }
  ]
};

配置完后，p-4-md这类后缀类就能正常生效，要是需要过渡，原md:p-4也能通过old-md:p-4继续用。

2. 用PostCSS插件自动转换类名 #

不想动Tailwind配置的话，直接在构建环节用PostCSS做转换。写个简单的PostCSS插件，自动把前缀类转成后缀类：

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    {
      postcssPlugin: 'tailwind-suffix-breakpoints',
      Rule(rule) {
        const breakpointRegex = /^\.([a-z0-9]+)\:(.*)$/;
        if (breakpointRegex.test(rule.selector)) {
          const [, screen, className] = rule.selector.match(breakpointRegex);
          // 生成后缀格式的选择器
          const newSelector = `.${className}-${screen}`;
          // 添加新的规则到样式表
          rule.parent.append(rule.clone({ selector: newSelector }));
          // 要是不需要保留原前缀类，就把这行注释打开
          // rule.remove();
        }
      }
    }
  ]
};

这样构建时，原md:p-4会自动生成对应的p-4-md样式，你代码里不用改，直接就能用后缀类，或者新旧类混用过渡。

3. 批量替换代码里的类名（过渡用） #

要是想逐步把代码里的类名换掉，可以用正则批量替换：

• 在代码编辑器的全局替换里，查找模式用(\w+\-\d+|\w+)\:([a-z0-9\-]+)，替换模式用$2-$1，就能把md:p-4换成p-4-md。
• 配合上面的插件确保新旧类都生效，直到全量替换完成。

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