设置最小宽度使用无全局配置的顺风间距单位？

Question

是否有一种方法可以将空间单元从tailwind.config.js应用到例如min-width，而不是全局配置？这是我所能看到的唯一方法，但这意味着复制所有(必要的)间隔单元，这是从我的pov潜在的错误源，因为每个相关的空间必须被复制。

// 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类。但是，如果由于某种原因，尾风改变了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 这里的文章

请告诉我，如果我的回答不是你在寻找什么，因为我可能误解了问题。

Answer 2

min-w-[theme('spacing[11]')]也能工作，在Tailwind v3中进行了测试。