My Five Day Tailwind Project

How a simple CSS framework took me from zero to hero in a week.

On a recent project I was told to pick a css framwork as nothing had been defined in the SOW. I could have easily grabbed the latest version of Bootstrap, but this was an opportunity to try something new so why waste it.

After some time doing research I kept seeing people recommending Tailwind. When looking at the markup my first reaction was “holy shit, too many tags!”.

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0"><img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512"><div class="pt-6 md:p-8 text-center md:text-left space-y-4"><blockquote><p class="text-lg font-semibold">“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p></blockquote><figcaption class="font-medium"><div class="text-indigo-600">Sarah Dayan</div><div class="text-gray-500">Staff Engineer, Algolia</div></figcaption></div></figure>

Looks ^ pretty complex huh? I moved on but kept coming back to Tailwind the more I read. I was obviously missing something. I decided to give it one day of effort. If it didn’t work out, I’d have lost a day and would just spin up Boostrap.

Day 1

It was long and frustrating and I was not getting the paradigm. Although it was supposed to be similar to Bootstrap I was not seeing much similarity. By the afteroon I was certain I’d made a mistake.

Day 2

First thing I did was watch a tutorial from Better Dev which helped me finally get it! The concept is that you rarely need to leave your html. This is the big difference.

Feeling more confident at this point I decided to see what the Tailwind dvelopment community was like. It was a pleasant surprise to see how much tooling is already setup for a framework that only about 2 years old.

The first attempt at writing actual code was a bit difficult as I have not memorized all the classes. The Tailwind docs are great but I did find it time consuming going back and forth so started using a cheat sheet. Here is the one I used, although there is another one that is just as good. I also found a good VSCode extensions specifically for Tailwind that autocompletes, and cleans up my Tailwind classes in html:

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Day 3

In the morning I was looking at something called Tailwind Tools which was a great way to get used to the way Tailwind uses Flexbox and Grids. After an hour of playing with that I felt comfortable getting my overall layouts ready. Took me about 3 hours to get the overall layouts setup for 10 pages.

At this point I am ready to do the guts of this thing (components) so I am reying on some great time saving websites that have a ton of component examples:

https://www.tailwind-kit.com – a few good components to use as a starting point

https://tailblocks.cc – lots of great code samples that you can simply cut and paste into your project

https://shuffle.dev – although not free the cost was reasonable considerning how many examples they have

Day 4

2 days left to deliver 10 pages with an average of 5 sections each and 20 unique components. DaisyUI to the rescue. This is a fantastic collection of read-to-use components. I am close to complete.

Day 5

Polishing at this point – adding images, gradients, links, adjusting fonts, etc. Pretty much grunt work now but I did find a color scheme and gradient generator that saved me some effort.

Wrapping up felt good and I knew this site would pass the test of time and whoever took it over would not curse my name. As part of the wrap-up I used the Tailwind parsing function to get the css file below 100KB. Here is how that works:

// tailwind.config.js
module.exports = {
  purge: [
    enabled: true,
    './src/**/*.html',
    './src/**/*.php',
    './src/**/*.jsx',
  ]
}

In the config above that is in the project root folder, the purge section instructs the Tailwind compiler to search all the defined files and remove anything that is not needed. This is how you go from a development copy of 4 megs down to a production copy of 100KB. You sacrifice nothing to get that. Good luck doing that with Boostrap.