如何在Tailwind配置中定义自定义响应式间距值？

你完全可以通过在tailwind.config.js的theme.spacing中定义响应式对象值，让Tailwind自动生成对应的间距工具类（包括mt-sectionT、gap-sectionB这类），不需要编写自定义插件，也不用再写@apply的自定义类。

具体实现步骤 #

1. 在theme.spacing中添加带响应式配置的自定义间距名称，将值定义为包含断点的对象：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["./src/**/*.{html,js,vue,ts}"], // 根据你的项目文件类型调整
     theme: {
       spacing: {
         // 保留Tailwind默认的间距值（可选，也可以完全自定义）
         '1': '0.25rem',
         '2': '0.5rem',
         // 定义响应式的sectionT：基础断点用pt-16（4rem），lg断点用pt-20（5rem）
         'sectionT': {
           DEFAULT: '4rem',
           lg: '5rem'
         },
         // 定义响应式的sectionB：基础断点用pb-12（3rem），lg断点用pb-16（4rem）
         'sectionB': {
           DEFAULT: '3rem',
           lg: '4rem'
         }
       }
     },
     plugins: []
   }
   

2. 直接在HTML中使用生成的工具类：

   <section class="pt-sectionT pb-sectionB gap-sectionB">
     <!-- 你的内容 -->
   </section>
   

关键说明 #

• DEFAULT对应的是无断点前缀的基础样式，匹配Tailwind的默认断点范围。
• 对象中的其他键名必须和Tailwind内置的断点名称一致（如sm、md、lg、xl等），如果需要自定义断点，得先在theme.screens中定义。
• 所有基于spacing的工具类都会自动支持这些自定义值，包括margin（mt-、mb-）、padding（pt-、pb-）、gap（gap-）、inset等。

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