Tailwind CSS v4如何自定义间距值？原v3配置方法失效

Tailwind CSS v4并未完全取消配置文件，只是调整了部分配置逻辑，你可以通过以下两种方式实现和v3版本相同的自定义间距效果：

方法一：通过配置文件扩展间距系统 #

在项目根目录的tailwind.config.js中，使用theme.extend.spacing生成所需的间距值，代码可以简化为：

export default {
  theme: {
    extend: {
      spacing: Object.fromEntries(
        Array.from({ length: 1001 }, (_, idx) => [idx, `${idx / 10}rem`])
      ),
    },
  },
}

这段代码会生成从0到1000的间距类，比如p-10对应1rem内边距、m-50对应5rem外边距，和你之前的实现效果完全一致。

方法二：通过自定义CSS工具类实现 #

如果不想依赖配置文件，可以在Tailwind入口CSS文件中，用@layer utilities结合循环生成工具类：

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

@layer utilities {
  /* 生成所有方向的内边距类 */
  @for $i from 0 through 1000 {
    .p-#{$i} { padding: #{$i / 10}rem; }
    .px-#{$i} { padding-left: #{$i / 10}rem; padding-right: #{$i / 10}rem; }
    .py-#{$i} { padding-top: #{$i / 10}rem; padding-bottom: #{$i / 10}rem; }
    .pt-#{$i} { padding-top: #{$i / 10}rem; }
    .pb-#{$i} { padding-bottom: #{$i / 10}rem; }
    .pl-#{$i} { padding-left: #{$i / 10}rem; }
    .pr-#{$i} { padding-right: #{$i / 10}rem; }

    /* 生成所有方向的外边距类 */
    .m-#{$i} { margin: #{$i / 10}rem; }
    .mx-#{$i} { margin-left: #{$i / 10}rem; margin-right: #{$i / 10}rem; }
    .my-#{$i} { margin-top: #{$i / 10}rem; margin-bottom: #{$i / 10}rem; }
    .mt-#{$i} { margin-top: #{$i / 10}rem; }
    .mb-#{$i} { margin-bottom: #{$i / 10}rem; }
    .ml-#{$i} { margin-left: #{$i / 10}rem; }
    .mr-#{$i} { margin-right: #{$i / 10}rem; }
  }
}

生成的工具类和Tailwind原生间距类用法完全一致，无需修改配置文件即可使用。

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