How can I specify exactly 600px width in tailwind CSS

在Tailwind CSS中，您可以通过使用预定义的宽度实用类或创建自定义宽度实用类来设置一个元素的宽度为600像素。

1. 使用预定义的宽度实用类（如果存在）： Tailwind CSS 为常用的宽度设置提供了一套预定义的宽度类。但是，在默认配置中，并没有直接对应于600px的宽度类。您可以查看文档或配置文件中的 theme.width 部分来确定是否存在适合的预定义宽度。

2. 创建自定义宽度实用类： 如果没有预定义宽度匹配600px，您可以在Tailwind的配置文件（tailwind.config.js）中扩展默认的宽度设置来添加一个自定义宽度。

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      width: {
        '600': '600px',
      },
    },
  },
  plugins: [],
}

这样配置之后，你就可以在HTML中使用 w-600 类来将一个元素的宽度设置为600像素了。

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

当你运行Tailwind CLI工具或者通过构建过程整合Tailwind CSS时，它会生成相应的CSS规则。

请注意，使用自定义值将使您的CSS文件的大小略有增加，因为它会添加额外的类定义。这样做是完全可以接受的，尤其是在项目中确实需要特定像素值的宽度时。

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

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

w-[600px]

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

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

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

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

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

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

shell
w-[600px]

看一下大多数 Tailwind 类都有的“任意值”部分。在那里您可以看到如何设置您想要的任何值。

任意值https://tailwindcss.com/docs/width# Arbitration-values

如果您需要使用一次性宽度值，而该值在主题中包含没有意义，请使用方括号使用任意值动态生成属性。

shell
<div class="w-[600px]">
  <!-- ... -->
</div>