My brother in Christ TailwindCSS just gives classes that let you do inline styling in a shorter syntax! (and theme configuration, but mostly inline styling)
Replace width: ...px with w-..., margin-left: ... with ml-... and margin-right: ... with mr-....
Setting both horizontal margins is mx-... and both vertical margins is my-....
If you can do inline styling, TW just makes the syntax a bit shorter, but that’s it, really.
Okay but how do u center a div in 2025
If using plain CSS, usually it’s enough to set
width
appropriately, andmargin-left
andmargin-right
toauto
.If using a Modern Frontend/CSS Framework, then may God have mercy on your poor soul.
(Seriously I just started a new project with TailwindCSS and I’m so confused. But not entirely desperate yet.)
My brother in Christ TailwindCSS just gives classes that let you do inline styling in a shorter syntax! (and theme configuration, but mostly inline styling)
Replace
width: ...px
withw-...
,margin-left: ...
withml-...
andmargin-right: ...
withmr-...
. Setting both horizontal margins ismx-...
and both vertical margins ismy-...
.If you can do inline styling, TW just makes the syntax a bit shorter, but that’s it, really.
w-... mx-auto
, replace the 3 dots with your desired width value, and that’s it with tailwindI’m doing a small hobby project (a ladder/ranking system for playing beer sports with my community), and I tried out Tailwind.
I gave up and loaded Bootstrap instead, but I will probably end up just writing all the CSS myself.
Seems so silly to have 15 CSS classes on a single DOM element…
If you define what you mean by centering I’ll give you a straight answer.
Vertically? Horizontally? Center the text or the entire box? Compared to the viewport, the parent container or the entire page?
“Centering” isn’t as straight forward as you’d think, and what you actually want usually depends on the situation.
Nah, just flex them boxes