Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

April 30, 2019

Last updated November 5, 2023

Let's Build: with Tailwind CSS Dribbble Shot

Next up in my Let's Build with Tailwind CSS series is a Dribbble Shot component

I reached for the CDN version of Tailwind CSS for this build once again. In future parts of the series, I will leverage more tooling to customize and extend Tailwind further. You can find the complete concept on CodePen.

See the Pen Tailwind CSS - Dribbble Shot by Andy Leverenz (@webcrunchblog) on CodePen.

By day I work at Dribbble, we currently don't make use of Tailwind CSS or any type of CSS framework for that matter but they are certainly on our radar.

Why choose Tailwind?

I keep getting asked this and for me, it boils down to:

  • Scalability by default - One of the hardest things to do well with CSS.
  • A lot of work done for you in terms of naming selectors
  • It's highly customizable and extendable.
  • It's very fast to use and code with
  • You can bundle all the utility-first classes into a component using Post-CSS @apply statements.

Most look at the framework and hate it at first. It resembles writing inline CSS which I realize is a huge turn-off. After some time with Tailwind you start to realize how much faster you can work. No longer are you naming selectors, adding new stylesheets or partials if you're using SASS/LESS, or spending time hunting down files and CSS you wrote once before. Instead, you're building that feature UI in real-time with a little cognitive load on your mind.

The Series so far

Link this article
Est. reading time: 2 minutes
Stats: 3,085 views


Part of the Let's Build: With Tailwind CSS collection