It had been 6 years since I originally built my portfolio site 😱. In that time I have grown exponentially and wanted a site that better represented where I am now as a developer. Part of that knowledge is understanding that less is more. Asking myself what is it that I want to focus on with my site. The answer of course is my projects. I wanted to remove any fluff, and any unnecessary animations and focus on the work. Making it as easy as possible to view the things I am proud to have built. While also making a site that was accessible, had good performance, was semantic, and with solid SEO.
All of those things are great but I am feeling like I am burying the lede here a little bit because the real star of the show was TailWindCSS.
TailWindCSS moment of clarity
The best way to learn something is by doing and I felt this was the perfect opportunity to finally build a project using TailWind and impressed is not even the word. I am literally blown away at what TailWind can do.
I started this project using the TailPress TailWind WordPress boilerplate theme which comes with TailWindCSS v3.
What I love about TailWind
Utility Based
TailWind is built using a VAST collection of small single-purpose CSS classes that can be easily stacked. Coming from a background where we use our own bespoke in-house frontend toolchain that has a lot of utility classes I was used to the syntax. Things like mb-4 for margin bottom 4 units, etc those kinds of things. But TailWind is immensely expansive allowing you to create a utility class directly in the HTML.
<div class="hidden sm:block max-[400px]:hidden">I was able to combine or “stack” the hidden class, the sm:block class and a custom utility max-[400px]:hidden to create an element that is hidden under 400px and visible 400px and up.
Just-In-Time Mode
The above code snippet leads me to the next feature and the one that really just blew my mind. Just-in-time mode. JIT mode is a compiler that works by parsing your templates and generating the corresponding CSS based on classes that are actually used. Creating extremely tiny CSS bundles because any unused styles simply don’t exist. What!? I know this feature has been out for a while but I have not been impressed by a feature like this in development since discovering ReactJS. With JIT mode you are now also able to create unique utility classes like the one in the example above.
No HTML Tag bloat
The only complaint I’ve seen regarding TailWind is the perceived HTML class/tag bloat. Ending up with elements like this :
<div class="px-4 bg-white shadow-md fixed top-0 left-0 w-full z-50 transition-all duration-300 ease-in-out p-4">Although it can get even more extensive than this. Just wanted to use an example from my own project. This can be easily avoided however with a component-based approach using the @apply directive.
Take all of those classes and create a parent class component and simply place your utility classes in there :
.main-header{
@apply px-4 bg-white shadow-md fixed top-0 left-0 w-full z-50 transition-all duration-300 ease-in-out;
}It’s as simple as that. In my time using TailWind I found myself being able to write HTML + utility classes for everything and seldom needing to ever write custom CSS. There was no limitation except my imagination. OK that’s a bit much I know lol. But seriously wow. TailWind bravo.