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

Question

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

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

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

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

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

Answer 1

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

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

w-[600px]

Answer 2

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

#1 您需要在 tailwind.config.js 中添加以下代码

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

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

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

Answer 3

您只是缺少括号 [ ]。尝试这个：

w-[600px]