Tailwind helped structure CSS by providing systems for layouts, typography, colors, and common components, reducing the risk of codebase chaos. Migration toward semantic HTML and vanilla CSS can be enjoyable and educational, especially when CSS learning happens incrementally over time. Initial intimidation about structuring CSS can be eased by adopting guidelines that organize different concerns. Tailwind’s preflight styles can be copied to establish consistent baseline behavior, such as applying box-sizing: border-box to all elements. Switching away from such resets may require adjustment, since many default behaviors are changed to create predictable styling across elements.
"Every CSS code base has a bunch of different things going on (layouts! fonts! colours! common components!) It's extremely useful to have systems or guidelines to manage each of those things, otherwise things descend into chaos Tailwind has systems for some of these, and I already know those systems! Maybe I can imitate the systems I like!"
"For example, Tailwind has: I'm going to talk about a few aspects of my CSS codebase and my thoughts so far what kind of rules I want to impose on the codebase for each one. Some of them are copied from Tailwind and some aren't."
"I just copied Tailwind's " preflight styles" by going into tailwind.css and copying the first 200 lines or so. I noticed that I've developed a relationship with Tailwind's CSS reset over time, for example Tailwind sets box-sizing: border-box on every element (which means that an element's width includes its padding): * { box-sizing: border-box; }"
"I think it would be a real adjustment for me to switch to writing CSS without these, and I'm sure there are lots of other things in the Tailwind reset (like html {line-height: 1.5;}) tha"
Read at Julia Evans
Unable to calculate read time
Collection
[
|
...
]