如何在 Tailwind CSS 中准确指定 600px 宽度？答案

【问题标题】：How can I specify exactly 600px width in Tailwind CSS?如何在 Tailwind CSS 中准确指定 600px 宽度？
【发布时间】：2021-04-06 01:29:22
【问题描述】：

在 Tailwind Officail docs 中，我们可以使用许多宽度实用程序。

但是，我可以指定的最大固定宽度是w-96，也就是width: 24rem; (384px)

我注意到一个奇怪的类叫w-px，乍一看，我以为我可以做到w-600px，但它不起作用，它正是1px。

我目前正在将我的旧项目迁移到 Tailwind CSS，因此我需要指定很多奇怪的宽度，但 Tailwind CSS 默认不提供它们。

如果我能做到w-600px 会很好，还是我错过了其他更好的方法？

【问题讨论】：

【解决方案1】：

你能检查下面的代码吗？希望它对你有用。

#1 你需要在tailwind.config.js中添加如下代码

module.exports = {
  theme: {
     extend: {
       width: {
        '600': '600px',
       }
    }
  }
}

#2 之后，您可以在 HTML 文件中使用w-600，如下所示。

<div class="w-600">...</div>

【讨论】：

【解决方案2】：

如果您将 Tailwind 安装配置为在即时模式下运行，并且您运行的是 tailwind 2.1+，则可以使用它们的任意值支持。 https://tailwindcss.com/docs/just-in-time-mode

例如，我需要一个 600px 的宽度，我是这样指定的：

h-[600px]

【讨论】：