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

Question

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

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

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

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

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

Answer 1

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

#1 您需要在 tailwind.config.js

中添加以下代码

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

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

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

Answer 2

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

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

h-[600px]

Answer 3

您只是漏掉了方括号 [ ]。试试这个：

w-[600px]

How can I specify exactly 600px width in Tailwind CSS?