在没有全局配置的情况下使用顺风间距单位设置最小宽度？

Question

除了全局配置之外，是否有其他方法可以应用从tailwind.config.js到 例如的间隔间距单位？min-width到目前为止，这是我能看到的唯一方法，但这意味着复制所有（必要的）间距单位，这是我的观点的一个潜在的错误源，因为每个相关的空间都必须复制。

// Dummy code explaining what I want to achieve
.myButton{
  @apply bg-red-100 w-auto;
      
  min-width: @apply w-11 // Not working just for theoretical explanation 
     
} 

Answer 1

我将为我提供所有已知的选项

1 . 在配置中提供值

module.exports = {
  theme: {
    extend: {
      minWidth: {
        11: '2.75rem'
      }
    }
  }
}

这将生成min-w-11带有min-width: 2.75rem. 但是，如果由于某种原因 Tailwind 改变了11值，比如说197px，我们如何同步它呢？那么每个选项都可以访问默认主题选项，例如

module.exports = {
  theme: {
    extend: {
      minWidth: theme => ({
        11: theme('spacing[11]')
      })
    }
  }
}

这个时间min-w-11就定了min-width: 197px;。这里引用了

2 . 使用theme()指令 它在 CSS 文件中工作，例如 - 不需要设置配置，除非您需要默认主题中不存在的新值

.myButton{
  @apply bg-red-100 w-auto;
  min-width: theme('spacing[11]'); // 2.75rem
} 

theme()有关指令的更多信息请参见此处

3 . 启用 JIT 模式 - 需要 Tailwind 版本 2.1 或更高版本

module.exports = {
  mode: 'jit'
}

这本身就会动态生成 CSS 属性

<button class="myButton min-w-[2.75rem]">My Button</button>
<button class="myButton min-w-[197px]">My Button</button>

生成的属性是

.min-w-\[2\.75rem\] {
    min-width: 2.75rem;
}
.min-w-\[197px\] {
    min-width: 197px;
}

您可以在这里阅读有关 JIT 的信息

如果我的答案不是您想要的，请告诉我，因为我可能误解了问题