May 29, 2021

Svelte Kit and Tailwind CSS

Whenever I approach front end development these days I honestly get pretty discouraged. Not that I don’t understand CSS, HTML, and JavaScript. It’s more that the modern stack is sooooo complicated and seemingly built on a shaky foundation of dependencies. Someone updates a library and before I know it, my CSS doesn’t work for reasons take me ages to diagnose.

So while I’m sitting an home recovering from nasal surgery (!) I decided to poke around at a toy project using new-ish comers Svelte Kit and Tailwind CSS.

Let the games commence!

What I learned in a couple of sessions

• Svelte-kit is pretty easy to set up these days. I used their docs to get an empty project going using TypeScript.
• Tailwind CSS is confusing to integrate into. PostCSS, purge, and a bunch of other dependencies. I finally got a working setup and will keep that commit handy for future starting points. However, I’m pretty certain that any change on the Tailwind CSS library side or even Svelte will break this in short order. Sigh.
• Tailwind’s centralized configuration is really nice. [For example] I could alias the colors I’m using so that in my HTML/*.svelte components I can use a class name like bg-primary-500 and expect that to be dark indigo by default. Then I could switch the value of primary = colors.red and have that automagically permeate through my entire app. Nice!