Menu
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?
558
You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file. To customize width separately, use the theme.width section of your tailwind.config.js file.
You can customize your min-width scale by editing theme. minWidth or theme. extend. minWidth in your tailwind.
To set the width of an element to 75%, use the . w-75 class in Bootstrap.
Although using PurgeCSS solves most of your size control needs, another way to reduce your Tailwind CSS file size is by removing unused styles configuration values from your tailwind. config,. js file such as: Removing unused colors from the default color palette to include only colors used in the project.
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]
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
