Published
Published
I’ve been building things for the web since somewhere in the 90s, starting out with GeoCities, static HTML and CSS. Flash forward over 20 years, and the web is, well, radically different. Even with my decades of experience, there’s still always something new to learn – and when upskilling myself with the Laravel PHP framework, I’ve seen so many tweets and references to Tailwind CSS.
But what is Tailwind CSS? Tailwind CSS’s website says:
A utility-first CSS framework for rapidly building custom designs.
Great, awesome, that’s exactly what I do – build custom designs. This should be perfect!
At first quick glance, I’ll be honest, I found it rather hard to read – and was also concerned about the implications of referencing things (such as a class referencing a specific colour shade or font style) in your markup. I’ve always been one to find efficient ways to write reusable code, and this just felt so out of place. And yet, so many devs had such incredibly positive things to say about it. Even the 2019 State of CSS survey shows a huge interest rate and top-of-the-class satisfaction rate.
I felt I had to be missing something – after all, there is only so much you can get out of a framework by just reading about. But rather than just a plain “hello world” example (you know my thoughts on that), I wanted to see how Tailwind CSS could fit in to my current aim: developing a base admin interface that could be used for any sort of project.
Part of my exploration was to ensure that the setup was using the tools available to me, and be suitable for a production environment too – be that language tools or framework tools. So we have:
So what was I going to build? A totally boring to look at (but actual skeleton) for an admin interface. Sure, it’s not the whole admin interface, but it is the foundation. Something like this:
There’s a menu, a nav bar, a footer, and a main area. And I wanted to have the menu collapse with different behaviours:
So I built a simple Vue app, and in its template added the markup for this wireframe. I tinkered with Laravel Mix, and installed the Mix Purgecss plugin. I used my favourite Hamburgers package for some gorgeous hamburgering, and started to play with the desktop (aka “larger devices”) menu. Works a charm.
Even with responsive styles, I was able to effortlessly implement the menu behaviours for different screen sizes (basically medium and below, and above) based on the menu button click state.
And yes, it's not terribly pretty... but got me thinking about how to use Tailwind CSS for layout, for colours, fonts, padding, and even how to use its responsive helpers for more complicated behaviour for small vs large screen devices.
And I was able to get to this page without writing a single line of CSS.
Is this actually a good thing, or a bad thing? I’m still pondering this one.
On the plus side, the speed at which I could do exactly what I wanted to do (i.e. a custom interface) was phenomenal. Especially when you don’t have to override all of these other styles (I’m looking at you Bootstrap).
On the downside, would it make me a lazy CSS developer? Maybe, maybe not. I think what is unique about a utility-based framework is that it requires you to have solid knowledge of how CSS behaves in browsers, and what to use to create the desired result, but takes away the syntax knowledge requirement. So maybe that’s actually a plus too.
From reading the docs before playing, I knew Tailwind CSS had some weight to it – over 700kb actually. Even Tailwind CSS admits that it is heavy. But, and this is the cool part, Purgecss is able to run as part of the build, and remove unwanted CSS. You know, those thousands of utility classes that I’m not actually using. With a postcss config file, the build process is able to look at my code – such as all of my Vue components, and even tinkered with the recipe to look at any blade.php files too – and look at what classes I am actually using.
And in both instances, I didn’t write a single line of CSS myself. I must admit that I’m a bit stoked at how simple it has been to not only build the wireframe I had intended, but also make it effortlessly responsive.
The next step would be to do a fairer comparison of code size when a build is actually complete: Bulma is what it is (and at times needs little to no adjusting, either through variables or through overriding/adding styles) so its size is more predictable. Tailwind CSS depends on what gets used - and how components get implemented to achieve this.
In my current Laravel build, I’ve been working with Bulma and Buefy – and it has been great to have quick access to mobile-friendly tables that can just work with creating a bit of a playground app in Laravel and Vue. Again, rather than just “Hello, World”, actually building different models (and relationships) with an interface and UX I’d be happy for my clients to experience. The biggest gap with Tailwind CSS: the lack of these sort of ready-to-go components. After years of doing things myself, from a team and productivity point of view, utilising tools that can assist with the speed, quality and reliability of development is now a primary factor: and the prospect of writing my own components isn’t terribly thrilling. But… Tailwind UI is due for release this week, with a collection of UI components ready-to-go – and I’m really keen to see what these entail and how they can be used to take the ease of Tailwind CSS development one step further.
From my exploration today getting my feet wet with building a layout using Tailwind CSS (albeit a bare-bones simple one), I’m actually thinking I could quite easily become a convert. Part of it just makes so much sense: (mostly) unopinionated (which I love), following some smart logic regarding spacing conventions, overriding (theming) ability. After having a play, I can safely say that I do actually get what all the fuss is about.
What I like:
What I don’t like:
Comparing to Bulma (note, not Buefy, just CSS):
From the previews I’ve seen of Tailwind UI, I’m thinking that Tailwind CSS and UI might become my baseline for building custom interfaces. I really do love custom coding, and love being in control – and Tailwind CSS’s utility-first approach gives me the ability to custom design, and control my layout without thrusting its own opinions on style, layout or behaviour.
2020: refreshing the life of a long term developer
2020 has been incredibly refreshing. Let’s also be blunt, it’s been completely shit for so many too – including isolation from family and months of Stage...
Astro’s Playroom. It’s free, and comes pre-installed on your PS5. It is basically a tech demo wrapped up in a platformer. And a pretty fun platformer too. And...
Creating a TinyMCE addon for Statamic 3
It’s no secret: I do love TinyMCE. It provides an excellent authoring experience, that produces clean and reliable HTML, and can easily be customised and extended...
Installing and review of the Sonos Wall Mount with the Sonos One SL
I’m new to the Sonos ecosystem, and after setting up the Sonos Arc and Sub combination, I wanted more, so splurged on a pair of One SL speakers for surrounds....