如何在Tailwind中基于屏幕断点自定义不同间距类的对应值？

要让同一个间距类（比如p-6）在不同屏幕断点下自动对应不同像素值，不用重复写md:p-x这类响应式前缀，你可以通过CSS变量+Tailwind配置结合媒体查询的方式实现，具体步骤如下：

1. 定义全局CSS变量并通过媒体查询覆盖 #

在你的全局样式文件（比如src/index.css）中，先设置基础间距变量，再针对不同断点重新赋值：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 默认状态（非断点阈值下）的变量值 */
:root {
  --spacing-6: 20px; /* 可根据需求自定义默认值 */
}

/* sm断点（≥640px） */
@media (min-width: 640px) {
  :root {
    --spacing-6: 24px;
  }
}

/* md断点（≥768px） */
@media (min-width: 768px) {
  :root {
    --spacing-6: 28px;
  }
}

/* lg断点（≥1024px） */
@media (min-width: 1024px) {
  :root {
    --spacing-6: 30px;
  }
}

2. 修改Tailwind配置引用变量 #

在tailwind.config.js中，把需要动态变化的间距值替换为对应的CSS变量：

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
    spacing: {
      0: "0px",
      1: "5px",
      2: "10px",
      3: "15px",
      4: "20px",
      5: "25px",
      6: "var(--spacing-6)", // 引用全局CSS变量
    },
    extend: {
      colors: {
        "blue": "#243c5a",
      },
    },
    fontSize: {},
  },
  plugins: [],
};

3. 直接使用目标间距类 #

现在只需写一次p-6，它会自动根据屏幕尺寸切换对应的值：

<div className="p-6">CONTENT</div>

如果需要其他间距类也遵循此逻辑，只需重复上述步骤：在全局CSS中添加对应的--spacing-N变量并在断点中赋值，再在Tailwind配置的spacing对象中替换为该变量即可。

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