In this guide, I create a series of Tailwind CSS card components inspired by the Bootstrap framework. The amount of variants you can create from a card component seems limitless so I tossed out a few to get you off to the races. I hope you enjoy it!
Why Tailwind anyway?
Tailwind CSS has become my go-to framework of choice in the past couple of years since its birth. I used to write object-oriented or BEM-styled CSS which worked decently but suffered dramatically at scale.
In a team setting, I began to learn very fast just how nuanced writing CSS is. Every developer has their own ideas and philosophies on how and where to write CSS. Until you adopt a common pattern/convention for authoring code can you truly write it consistently. This very problem is why many frameworks exist today. They are pretty opinionated by design. Having a set of constraints from the start is what makes frameworks, frameworks in my opinion.
Tailwind CSS is a hybrid framework. It has a set of conventions and opinions but pairs that with a vast amount of configurable options. This ultimately allows developers to use the framework but still create a unique design on the front-end.
I can say without a doubt that I'm all-in on Tailwind CSS. It has increased my productivity dramatically and I can't advocate using it enough. It does take some getting used to initially but very soon after you will see just how powerful it can be.
A new mini-series
Tailwind ships with zero components by design. The intention is for you, the developer, to create those based on your own set of constraints. Luckily, this is fairly easy to do thanks to the plethora of class names in your arsenal.
My goal with this video and the others in this collection is to open your eyes to how to use Tailwind to create your own custom components should you need them. Doing this will allow you to create more unique designs rather than reaching for Tailwind UI like a lot of other developers do. This is all to say that Tailwind UI is not bad but over time you will likely see many websites looking similar much like the Bootstrap craze of our yesteryears.
Be sure to subscribe to the YouTube channel or my newsletter for automatic updates if you haven't already.
Top comments (0)