Tailwind CSS is the “framework” for cascading style sheets that burst onto our screens a while back. Although I do still love good old bootstrap for styling and so on, I never really allowed myself the time to understand why Tailwind was different.
As a quick aside (no affiliation here!) I also do love bootstrap studio which is a nice graphical interface to build… well… bootstrap based UI designs.
But, back to Tailwind. I am just going through a course on Pluralsight from Mr Shawn Wildermuth to refresh my skills a bit, and part of the course was a “from scratch” starter for Tailwind.
After about ten minutes, it finally clicked! Although at first, it seemed like just another crack at SASS/LESS with its builder code to produce the actual CSS.
The key bit (for myself currently) is the fact you don’t start with a huge CSS framework. Once you configure Tailwind (all via NPM in my case), you are essentially telling Tailwind where your markup resides i.e. HTML files, CSHTML (in a .NET Razor world) etc. Tailwind is then going to look at those pages to see if any markup uses the Tailwind classes (I am only using the utility classes currently - similar to bootstrap classes in a way).
So, once you add a class or classes to your markup and re-run the “builder” bit in Tailwind (basically, a CMD line action), Tailwind will magically add ONLY the class definitions to your actual site CSS. You start with a site CSS source config file which in my case is really basic, but you can add some site wide global CSS things here too (think H1, Header tags, Footer tags and so on).
In my case, the whole workflow is simplified by using a Visual Studio extension (I am sure there is an equivalent in VS Code and other editors) from Mads Krisdensen called “NPM Task Runner” that, once configured, sits in the background and when any change to the process happens (i.e. the Tailwind changes), this extension re-runs the script that actually builds your CSS for your site i.e. this is the CSS you would include in your HTML page.
There is so much more to Tailwind including theming (which I will try soon!) but I think I know understand a little why this is such a useful/clean CSS design system.