svelte + tailwind = joy
tjheffner
2022-03-26
This site is built with svelte & tailwind and both have been super fun to work with. Svelte is intuitive and for lack of better words, feels like what javascript has tried to feel like for ages now. If you’ve used react or vue or the like, svelte will feel similar but simpler. It’s just.. friendlier? Less boilerplate, more html, and it’s fast. It pairs really nicely with tailwind, which is a powerful but small framework for utility-first css.
I really wish I had tried tailwind sooner. I don’t know that I “enjoyed” BEM, though it did make a certain sort of sense for giving stylesheets structure. Whole lot of naming things with BEM though, and that’s one of the hardest parts. It also introduces a lot of explicit connections between your stylesheets and your html. That’s a lot of different points to maintain. Tailwind on the other hand sees CSS rules as utilities, all the way down. A single class for a single rule. Thinking of CSS this way, it almost doesn’t matter how your html is structured. You might be thinking that sounds really clunky, putting so many more classnames in your HTML that you now have to keep track… and you kind of do, but you gain the freedom of not having to actually name anything at all. Plus all the styles for a thing are right there with the thing. If you do still need your own classes, you can still write CSS normally. The number of custom styles you need to write reduces drastically. And while tailwind generates a ton of classes in development, it also cleans them up to only keep the ones you actually use. Which keeps your CSS over the wire nice and tidy. The css for this site ultimately comes in at a couple of kB (57kB at the time of writing).
Svelte feels like a natural direction for modern javascript. It has a familiar syntax to react/vue/jsx, and is so performant. It shifts a lot of the work from the browser to the build step, which means it feels so snappy, even on my old machine. And the learning curve was practically nothing, due to the familiar syntax. I would love to use the combo of svelte + tailwind in a work setting someday.