76 lines
3.5 KiB
YAML
76 lines
3.5 KiB
YAML
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="http://default/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="http://default/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: { }
|