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

user_11169941 0
Viewed 15982

In Tailwind Officail docs, there are lots of width utilities we can use.

However, the maximum fixed width I can specify is w-96, which is width: 24rem; (384px)

I've noticed a weird class called w-px, at first glance, I thought I can do w-600px, but it's not working, it is exactly 1px.

I am currently migrating my old project to Tailwind CSS, so there are going to have lots of weird widths I need to specify, but Tailwind CSS doesn't provide them by default.

If I can just do w-600px would be nice, or am I missing any other better approach?

tailwind-css
4 Answers

If you configure your Tailwind install to run in just-in-time mode, and you are running tailwind 2.1+, you can use their arbitrary value support. https://tailwindcss.com/docs/just-in-time-mode

For example, I needed a width of 600px, here is how I specified it:

h-[600px]

user_25540090

Can you please check the below code? Hope it will work for you.

#1 You need to add the below code in tailwind.config.js

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

#2 After that you can use w-600 in your HTML file like below.

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

You were just missing the brackets [ ]. Try this:

w-[600px]
user_132210730

Take a look on the section "Arbitrary values" that most part of Tailwind classes have. There you can see how you can set any value you want.

Arbitrary values for with https://tailwindcss.com/docs/width#arbitrary-values

If you need to use a one-off width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

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