Does tailwind reset padding, margin, box-sizing?
Does tailwindCSS add these out of the box? I learned I should always add these styling to global css. After adding tailwind I added these to index.css but nothing happened. But I also didn't find in the code if it's added out of the box?
8 Replies
It's not something you allways need to do, or something that will allways have effect.
box-sizing: border-box is usefull when defining element sizes without having to worry about borders and padding sizes. If you don't set sizes, you won't notice a difference.
the reset of padding and margin probably is not neccessary because of the individual styling (with tw classes) on your elements
Thank you very much. I found CSS difficult so I remember that, as rule number 1 π
One important thing to keep in mind with nuking both padding and margin is that when you actually need it you'll have to re-add it where it belongs. A good example is lists: they use padding so you can see the bullet point/number. Removing padding from all elements is kinda silly. Instead, only change what you need to change.
As for marginβ¦if you remove it from everything you'll need to re-add it to almost every block-level element. Otherwise you won't have any space between paragraphs, headers, etc.
The box sizing is an important one to always add as it makes the elements work as we think they should (you can thank Microsoft and Internet Explorer for why it's not the default π ).
See the example pen:
https://codepen.io/c__beck/pen/LYKEvLO
(you can thank Microsoft and Internet Explorer for why it's not the default π ).Opposite in fact. IE5 had the default to how
border-box works, but that went against the spec (which was a bit vague at the time). CSS2 spec made it more explicit, and IE6 fell in line with the other browsers.
I just did a bunch of historic research into this for something, so it's front of mind for me right now π
Oh, the spec was what was "wrong"? I always thought MS was in the wrong b/c, y'know, MS :p
Yup! And MS also invented Grid, so they did do some good things along the way π
TIL, thanks for the info, @Kevin !
Can't wait for your "History of CSS" video that you're working on lol
Preflight - Tailwind CSS
An opinionated set of base styles for Tailwind projects.