What is TailWind CSS ??
In this CSS tutorial we take a look at the Tailwind CSS framework and how it can help improve your CSS. Using a Gatsby site as and example we upgrade the existing CSS that is in place and convert it to using Tailwind CSS. We also look at how to install the Tailwind framework into our Gatsby site using postCSS. The details of this are provided on the Tailwind site and are quite straightforward to follow.
Tailwind provides a lot of benefits, one of the main ones being that we no longer need to create and maintain our own 'semantically named classes'. Tailwind provides a pre-built set of classes for us to use and they are low level enough that they can be tailored to suit most requirements. There are other benefits such as dark mode support, providing consistency across your website, being low level enough that all your Tailwind sites won't look identical (Bootstrap we are looking at you here!), responsive design built in so no need to write your own media queries any more.
It may feel a little daunting having to learn all the classes in Tailwind, but they are named well and from my initial experience are quick and easy to pick up, more so than trying to remember my own classes that I have created up till this point.
In conclusion I'll being using Tailwind CSS from now on in all my website projects. That initial barrier to entry is slight and once in the benefits are many
https://tailwindcss.com/
00:00 Introduction
04:11 Install Tailwind CSS into Gatsby
08:13 Trying out Tailwind CSS