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

4
votes

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?

2
tailwind-css
Possible duplicate, this might help you: stackoverflow.com/questions/54618144/… – juliomalves

2 Answers

1
votes

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-[400px]

5
votes

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: {
    width: {
     '600': '600px',
    }
  }
}

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

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