- Instant help with your CSS coding problems

Set element width over 100% using Tailwind CSS

by Mike
Question:
How to set element width over 100% using Tailwind CSS?
Answer:
<div class="w-[125%]">I'm 125% wide</div>
Description:

TailwindCSS has a lot of predefined width utility classes. However, sometimes you may need to set a custom value other than these. In this case, you can use arbitrary values. 
Use the following syntax w-[ANY_CSS_VALUE]

For example:

<div class="w-[123px]">Width 123px</div>
<div class="w-[150%]">Width 150%</div>

To use arbitrary values you need to activate JIT mode, but from TailwindCSS v3 onwards this is activated by default.

Reference:
TailwindCSS width reference
Share "How to set element width over 100% using Tailwind CSS?"
Related snippets:
Tags:
width, over, arbitrary values, tailwind
Technical term:
Set element width over 100% using Tailwind CSS
Trending articles
Use clip path in TailwindCSSSet focus border in TailwindCSSCreate hover underline animation in TailwindCSSTruncate text in TailwindCSSCreate triangles with TailwindCSSCreate custom toggle button with TailwindCSSImplement Dark mode with TailwindCSSHow to create custom checkboxes in TailwindCSSFix the Unknown at rule @tailwind warning in VSCodeFix TailwindCSS breaks existing styles
Trending snippets
Remove focus border around input elementCreate endless rotation animation in CSSAdd a box shadow to only one side of an elementCenter an absolute element in TailwindCSSAdd dots if text is too longAdd class to child when hovering on parent in TailwindCSSAdd text shadow with Tailwind CSSForce line break in a long word using CSSSelect the nth child in TailwindCSSAccess child elements in TailwindCSSCreate a neon effect with TailwindCSSHow to use !important in TailwindCSSChange bullet size in HTMLHow to use CSS variables in TailwindCSSWrite vertical text in HTMLSet line spacing in CSSSelect first child in TailwindCSSDisable text selection with CSSHow to use calc() in TailwindCSSSet custom cursor in CSS
Network articles
Fix the ReactDOM.render is no longer supported in React 18How to run useEffect only once in ReactCreate HTML element with attributes in JavaScriptRemove whitespace from the beginning and end of a string in PHPFix the *.ps1 cannot be loaded because running scripts is disabled on this systemAdd CSS class to body with JavaScriptChange syntax highlighting in VS CodeAccess object property with hyphen in PHPGet current year in MySQLCount the number of words in a string using JavaScriptConvert string to uppercase with JavaScriptToggle fullscreen and normal mode with JavaScriptUse for loop in Pug templateAdd vertical rulers in VS CodeBackup MySQL database without locking tablesCreate a link to call phone numberPHP in_array function use and examplesRedirect www to non-www on Apache webserversCreate drop down list in HTMLUse inline style in React
Interesting things
OpanAi's ChatGPT