Jump to the navigation menu

Rebuilding Bootstrap with Tailwind CSS (and Sculpin)

I've been speaking about and advocating for Tailwind CSS and utility-first CSS for a long time.

In my slide deck, I show screenshots of websites that are all built with Tailwind CSS - including some rebuilds of existing websites.

I do this to show that the same approach and framework can be used to create different-looking designs because the classes are atomic and can be reused and combined as needed.

This isn't the case with other CSS frameworks that focus on components first.

As an experiment, some time ago I decided to rebuild some of the Bootstrap example components using Tailwind CSS.

I've only done a pricing grid and album, but I may do more in the future.

I originally built the examples with Astro but have ported them to Sculpin, which I'm more familiar with.

If you want to see how I've built these components or how for an example of building a static website with Sculpin, check out the source code.

- Oliver

Was this interesting?

Sign up here and get more like this delivered straight to your inbox every day.

About me

Picture of Oliver

I'm an certified Drupal Triple Expert with 18 years of experience, a Drupal core contributor, public speaker, live streamer, and host of the Beyond Blocks podcast.