It’s now more than seven years since I converted this site to use Twitter Bootstrap. At the time, I was pleased to be able to use Twitter Bootstrap to enable the site to be responsive to different devices.
However, time moves on. Almost two years ago I tweeted:
And this was the reply that interested me most:
More recently, at this year’s RubyConf AU opening party, my friend Josh Price was extolling the virtues of Tailwind CSS. So, when the recent four day holiday break presented itself, I took the plunge and converted this site.
There are plenty of good resources on the web about Tailwind CSS and supporting technologies so I don’t intend to provide a step by step guide here. However, I will reflect on the steps I ended up taking.
Naturally, having created a git branch on which to start experimenting
with Tailwind CSS, the first step was to remove Twitter bootstrap. For
me, that essentially entailed deleting the
twitter-bootstrap-rails gem from my
well as any references to it in my Rails application. As expected, that
resulted in the pages on my site being displayed bereft of any styles.
So far so good. Now it was time to start making use of this “highly customizable, low-level CSS framework”.
The next phase was one of experimentation. In some cases, such as for my
Rails layouts, it involved applying Tailwind styles directly to
This was the first time I started to realise that Tailwind
adopts a mobile-first approach. For example, consider the following:
The significance of
lg:hidden is that this tag will be
hidden for devices of size
lg and above where
lg equates to
max-width: 1024px. For more on
Tailwind’s approach to responsive design, see the official
As I learnt more about Tailwind’s styles it became clearer to me that I
needed to focus on the
file. In addition to incorporating Tailwind’s base, components and
utilities styles, this is where I built up a list of styles to apply to
various tags and classes. As a simple example, my first custom
definition in this file is:
Translated, this means that for paragraphs, I apply Tailwind’s
styles. What do each of these mean? To find out, explore the
documentation about font
padding and line
height. The documentation is
Tailwind styles can also be applied to classes, as in the following example.
I’ll leave you to explore the documentation this time to figure out the meaning of the styles.
Whilst I got most of the way towards styling my site using just Tailwind’s styles, I did find difficulties with forms. To solve this problem I used the Tailwind CSS Custom Forms plugin. I was then able to apply styles from that plugin as follows:
Anyway, as a developer who leans towards the server-side, I’ve neglected some aspects of upgrading the site along the way. One of those has been moving from the Rails Asset Pipeline to Webpacker. That is no longer the case. As part of converting the site to use Tailwind CSS I realised that I needed to completely move my assets to Webpacker. The penny dropped when I understood the reason why the CodeRay styles that I use for code syntax highlighting were no longer working. After all, the following code snippet in my layout has a clue:
The word “pack”, of course, indicates that the styles are managed by Webpacker.
app/assets directory no longer exists in my
I now understand why Sebastian and Josh gave Tailwind CSS such enthusiastic endorsements.
Once I had experimented enough with applying the styles to tags and classes in a way that the styles could be reused, I found the experience addictive. And that’s saying something for a predominantly server-side programmer who cut his teeth on mainframes several decades ago.
Previous post: On Communities in Crisis Mode
More recently: On Working Remotely
© 2023 Keith Pitty, all rights reserved.