oliverdavies.uk/content/node.e2679ec1-9cf5-483f-86e0-f176db3daae4.yml

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: |
      <p>I've been <a href="/presentations/taking-flight-with-tailwind-css">speaking about and advocating for Tailwind CSS</a> and utility-first CSS for a long time.</p>

      <p>In my slide deck, I show screenshots of websites that are all built with Tailwind CSS - including some <a href="/blog/uis-ive-rebuilt-tailwind-css">rebuilds of existing websites</a>.</p>

      <p>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>

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

      <p>As an experiment, some time ago I decided to <a href="https://bootstrap-with-tailwind.oliverdavies.uk">rebuild some of the Bootstrap example components using Tailwind CSS</a>.</p>

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

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

      <p>If you want to see how I've built these components or how for an example of building a static website with Sculpin, <a href="https://code.oliverdavies.uk/opdavies/bootstrap-with-tailwind">check out the source code</a>.</p>

              
    format: full_html
    processed: |
      <p>I've been <a href="/presentations/taking-flight-with-tailwind-css">speaking about and advocating for Tailwind CSS</a> and utility-first CSS for a long time.</p>

      <p>In my slide deck, I show screenshots of websites that are all built with Tailwind CSS - including some <a href="/blog/uis-ive-rebuilt-tailwind-css">rebuilds of existing websites</a>.</p>

      <p>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>

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

      <p>As an experiment, some time ago I decided to <a href="https://bootstrap-with-tailwind.oliverdavies.uk">rebuild some of the Bootstrap example components using Tailwind CSS</a>.</p>

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

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

      <p>If you want to see how I've built these components or how for an example of building a static website with Sculpin, <a href="https://code.oliverdavies.uk/opdavies/bootstrap-with-tailwind">check out the source code</a>.</p>

              
    summary: null
field_daily_email_cta: {  }