I saw Chris Vitko speak on Tailwind CSS at the Minnesota Developers Conference on Tuesday.

This was one of six talks I saw at the Minnesota Developers Conference and it wasn't the first but it was the best. I'll get around to telling you about the other five. Ha. The conference was at the Earle Brown Heritage Center in Brooklyn Center Minnesota and Chris Vitko like myself works at ILM Services and ILM Services itself coordinated the event. Alright beyond the three options to approach CSS of plain CSS, preprocessors, and heavier frameworks like Bootstrap or another one that was namedropped called Bulma which I had not heard of, there is now this fourth actor. In this paradigm every class is one style long and has a predictable name that reveals what that class does. In code reviews Chris never needs to look at the stylesheets themselves, he can just tell by looking at the markup what the styles are. Why not just have inline styles and skip Tailwind? Tailwind will allow for short terse classes which include hovers and media queries and you can't get that with regular inline styles! I took some photos with my phone of what Chris projected and the class setting inside an img tag in his markup was w-10 h-10 rounded-full mr-4 hover:text-red-500 and therein you can see the hover, right? Chris described this as "functional" CSS and bemoaned all of the times he has otherwise edited someone's stylesheet worried that he will sabotage another part of the application at hand while making the feature immediately in front of him aesthetic. No more! A div had a class setting which started out as h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hid... and eventually ran off the edge of what was being projected as this stuff is bound to run long. This second example shows us the media query stuff. The thing that starts with hid and gets cut off must mean hidden. I asked if such a style was really equivalent to having display:none; jammed into a style tag as there could be a FOUC (flash of unstyled content) if you have to wait on the stylesheet to load and Chris suggested that as much really wasn't a modern problem in frameworks like Angular, React, etc. You have to have a service running in the background somewhere that bakes out the Tailwind stuff not unlike how preprocessors for CSS work and there will be a main.css file with...

@tailwind base;
@tailwind components;
@tailwind utilities;

 
 

...inside of it, and you may jam in your own styles between these lines or after all three to override the Tailwind stuff. PurgeCSS can be used to crawl your code and make the Tailwind render-outs less fat by way of finding what is not used and, yes, purging it away. If you have a class being applied exclusively via JavaScript however PurgeCSS will not find it.