Thread by @dan_abramov

some thoughts on tailwind after using it for a few weeks on a project. i didn’t personally pick it (i use whatever’s already there) and it was a bit difficult to adjust to at first. however i actually really enjoy it now. here’s what i like/dislike

rampup time: the first week was absolutely brutal. i felt so slow. i couldn’t understand any of the abbreviations and had to always have tailwindcss.com open to look them up. luckily the docs are actually really good, and in a week i memorized the most common ones.

so why do i say i like it? there’s a few things. the more obvious ones:

- enforced consistency: spacing, colors, sizes, nice to have that be in one place.
- low-level: i already have components, don’t need “more involved” framework stuff
- tailwindcss.com/docs/flex taught me flex

the less obvious but more important ones:

(1) i can COPY PASTE markup. this is HUGE. same as classes vs Hooks. people don’t appreciate how powerful it is to be able to just move a bunch of markup/code to another file with NO changes, NO extra imports, NO class renames, etc. this wins over CSS modules or Stylesheet.create

(2) the visual info is colocated with markup. don’t need to open another file (plain CSS) “jump to definition” (StyleSheet.create), or constantly glance up/down (scoped <style>). the info is right there in the tree.

(3) it is very terse. you can have

<div className="... 100 chars ...">

this SEEMS bad at first, but it’s like “styles are collapsed by default”. unlike styled-comps or inline CSS, it prevents the tree from exploding despite colocation. and really long things can be components.

so it feels like inline styles (which i generally enjoy using a lot because i don’t have to come up with names for every little thing), but without spreading my tree too thin vertically, and without the perf cost of inline styles. some guardrails but not in your way. like react

the biggest thing that annoyed me was that whenever i used a new style that hasn’t been used before, i had to restart the dev server for it to work. this was so confusing. i think maybe my setup is messed up and there has to be some way to not have this issue, idk how

overall impression: Weird; Would Use Again, which reminds me of how i feel about react in a nostalgic way.

best part is how you can look at a UI tree and choose to either ignore styles completely (they’re not taking vertical space) or focus on them (and see the exact hierarchy)

another thing that i prefer over styled-components (aside from vertical space) is that the hierarchy feels right. styles are details of my components, not the other way around. i don’t want to name smth and make it a unit just because it has some style. i can breakpoint anything

this is interesting because the commonality between different tw projects means i can jump in now and be fairly productive. cause it’s at a just-slightly higher level than css but not much. can build tooling on top.

https://twitter.com/Hicksyfern/status/1452335452430688258

there is a subtle point here. people tend to hate on copy pasting styles because it makes global changes harder. but tailwind is intentionally (i think) on the level of abstraction where copypaste doesn’t hurt as much (because rule choices are constrained)

https://twitter.com/dan_abramov/status/1452326610904961032

confirm this is pretty cool too

https://twitter.com/VincentDesmares/status/1452354980644544525