Set element width over 100% using Tailwind CSS
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:
- Create blinking background with TailwindCSS
- Create a neon effect with TailwindCSS
- Rotate element with TailwindCSS
- Change SVG icon color with TailwindCSS
- Using :not in TailwindCSS
- Specify exact width value in TailwindCSS
- Set element width over 100% using Tailwind CSS
- Stretch children to fill horizontally
- Create a fixed navbar with TailwindCSS
- Use font from local files in TailwindCSS
- Make an element invisible in mobile size in Tailwind CSS
- Create a 20/80 grid with Tailwind CSS
- Select the nth child in TailwindCSS
- Add class to child when hovering on parent in TailwindCSS
- Fill the full height of the screen in TailwindCSS
- Create transition with TailwindCSS
- Create horizontal rule with text using TailwindCSS
- Set background image with TailwindCSS
- How to use CSS variables in TailwindCSS
- Center an absolute element in TailwindCSS
- Remove arrows from number input in TailwindCSS
- How to use !important in TailwindCSS
- Access child elements in TailwindCSS
- Select first child in TailwindCSS
- Create semi transparent background in TailwindCSS
- How to use calc() in TailwindCSS
- Add text shadow with Tailwind CSS
Tags:
width, over, arbitrary values, tailwind Technical term:
Set element width over 100% using Tailwind CSS