Specify exact width value in TailwindCSS
Question:
How to specify exact width value in TailwindCSS? Answer:
<div class="w-[500px]">Element width is exactly 500px</div>Description:
To set a custom exact width value for the current element you can use arbitrary values, which is available by default from TailwindCSS version 3 onwards. Using it is simple, just enter the desired value between square brackets [] after the w- prefix like this:
<div class="w-[500px]">Element width is exactly 500px</div>
Extend Tailwind config
If you use an exact value a lot, you may want to extend the Tailwind utility classes.
To do this, you need to modify the tailwind configuration file:
module.exports = {
theme: {
extend: {
width: {
'500': '500px',
}
}
}
}After that, you can write code like this:
<div class="w-500">Element width is exactly 500px</div>
Reference:
TailwindCSS arbitrary values reference
Share "How to specify exact width value in TailwindCSS?"
Related snippets:
Tags:
exact, precise, fix, value, width, tailwind Technical term:
Specify exact width value in TailwindCSS