{ "uuid": [ { "value": "e2679ec1-9cf5-483f-86e0-f176db3daae4" } ], "langcode": [ { "value": "en" } ], "type": [ { "target_id": "daily_email", "target_type": "node_type", "target_uuid": "8bde1f2f-eef9-4f2d-ae9c-96921f8193d7" } ], "revision_timestamp": [ { "value": "2025-05-11T09:00:01+00:00" } ], "revision_uid": [ { "target_type": "user", "target_uuid": "b8966985-d4b2-42a7-a319-2e94ccfbb849" } ], "revision_log": [], "status": [ { "value": true } ], "uid": [ { "target_type": "user", "target_uuid": "b8966985-d4b2-42a7-a319-2e94ccfbb849" } ], "title": [ { "value": "Rebuilding Bootstrap with Tailwind CSS (and Sculpin)" } ], "created": [ { "value": "2025-02-15T00:00:00+00:00" } ], "changed": [ { "value": "2025-05-11T09:00:01+00:00" } ], "promote": [ { "value": false } ], "sticky": [ { "value": false } ], "default_langcode": [ { "value": true } ], "revision_translation_affected": [ { "value": true } ], "path": [ { "alias": "\/daily\/2025\/02\/15\/bootstrap", "langcode": "en" } ], "body": [ { "value": "\n

I've been speaking about and advocating for Tailwind CSS<\/a> and utility-first CSS for a long time.<\/p>\n\n

In my slide deck, I show screenshots of websites that are all built with Tailwind CSS - including some rebuilds of existing websites<\/a>.<\/p>\n\n

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.<\/p>\n\n

This isn't the case with other CSS frameworks that focus on components first.<\/p>\n\n

As an experiment, some time ago I decided to rebuild some of the Bootstrap example components using Tailwind CSS<\/a>.<\/p>\n\n

I've only done a pricing grid and album, but I may do more in the future.<\/p>\n\n

I originally built the examples with Astro but have ported them to Sculpin, which I'm more familiar with.<\/p>\n\n

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<\/a>.<\/p>\n\n ", "format": "full_html", "processed": "\n

I've been speaking about and advocating for Tailwind CSS<\/a> and utility-first CSS for a long time.<\/p>\n\n

In my slide deck, I show screenshots of websites that are all built with Tailwind CSS - including some rebuilds of existing websites<\/a>.<\/p>\n\n

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.<\/p>\n\n

This isn't the case with other CSS frameworks that focus on components first.<\/p>\n\n

As an experiment, some time ago I decided to rebuild some of the Bootstrap example components using Tailwind CSS<\/a>.<\/p>\n\n

I've only done a pricing grid and album, but I may do more in the future.<\/p>\n\n

I originally built the examples with Astro but have ported them to Sculpin, which I'm more familiar with.<\/p>\n\n

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<\/a>.<\/p>\n\n ", "summary": null } ] }