TailwindCSS 支持 ch 测量单位吗？

Question

Tailwind 新手，正在重写网站，但在我的样式组件文件中，我声明

ch

单位为 50，例如：

const Foobar = styled.div`
  max-width: 50ch;
`

在研究文档时，我不知道我的版本是否支持此功能：

"tailwindcss": "^3.4.6"

到目前为止，我只在这个讨论中看到这是一个功能请求。

在 TailwindCSS 中如何使用

ch

宽度测量单位？

Answer 1

您始终可以自定义您的 tailwindcss 主题并根据您的喜好扩展默认主题。

module.exports = {
  theme: {
    extend: {
      spacing: {
        'ch-25': '25ch',
        'ch-50': '50ch',
        'ch-75': '75ch',
      }
    }
  }
}

<div class="max-w-ch-50">Foobar</div>

此外，您还可以使用任意值。

<div class="max-w-[50ch]">Foobar</div>

游乐场