80 lines
3.3 KiB
YAML
80 lines
3.3 KiB
YAML
uuid:
|
|
- value: b1a76740-f08d-4af6-a37a-a1bdf73fef5c
|
|
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:22+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: 'Using Tailwind CSS is a great way to learn CSS'
|
|
created:
|
|
- value: '2024-01-09T00:00:00+00:00'
|
|
changed:
|
|
- value: '2025-05-11T09:00:22+00:00'
|
|
promote:
|
|
- value: false
|
|
sticky:
|
|
- value: false
|
|
default_langcode:
|
|
- value: true
|
|
revision_translation_affected:
|
|
- value: true
|
|
path:
|
|
- alias: /daily/2024/01/09/using-tailwind-css-is-a-great-way-to-learn-css
|
|
langcode: en
|
|
body:
|
|
- value: |
|
|
<p>I was in a pair programming session today, working on some Twig components with Tailwind CSS.</p>
|
|
|
|
<p>We knew what we needed to implement and did so based on an example from a Tailwind component library and some additional styles.</p>
|
|
|
|
<p>After implementing the feature, we could review the classes we added and review what each did.</p>
|
|
|
|
<p>We could easily move or remove a class and see what effect it had.</p>
|
|
|
|
<p>Something nice is that the Tailwind classes usually relate to what CSS they're applying, such as <code>block</code> and <code>flex</code> for <code>display</code> and <code>relative</code> and <code>absolute</code> for positioning.</p>
|
|
|
|
<p>This makes Tailwind a great way to learn CSS compared to other frameworks that give you prebuilt HTML and expect you to add a generic class like <code>card</code>.</p>
|
|
|
|
<p>In that case, the knowledge is hidden within a stylesheet the Developer doesn't see, which makes it harder to read and learn from.</p>
|
|
|
|
<p>Other utility-class frameworks have shorter class names that are less readable.</p>
|
|
|
|
<p>Tailwind strikes the perfect balance, in my opinion.</p>
|
|
|
|
|
|
format: full_html
|
|
processed: |
|
|
<p>I was in a pair programming session today, working on some Twig components with Tailwind CSS.</p>
|
|
|
|
<p>We knew what we needed to implement and did so based on an example from a Tailwind component library and some additional styles.</p>
|
|
|
|
<p>After implementing the feature, we could review the classes we added and review what each did.</p>
|
|
|
|
<p>We could easily move or remove a class and see what effect it had.</p>
|
|
|
|
<p>Something nice is that the Tailwind classes usually relate to what CSS they're applying, such as <code>block</code> and <code>flex</code> for <code>display</code> and <code>relative</code> and <code>absolute</code> for positioning.</p>
|
|
|
|
<p>This makes Tailwind a great way to learn CSS compared to other frameworks that give you prebuilt HTML and expect you to add a generic class like <code>card</code>.</p>
|
|
|
|
<p>In that case, the knowledge is hidden within a stylesheet the Developer doesn't see, which makes it harder to read and learn from.</p>
|
|
|
|
<p>Other utility-class frameworks have shorter class names that are less readable.</p>
|
|
|
|
<p>Tailwind strikes the perfect balance, in my opinion.</p>
|
|
|
|
|
|
summary: null
|
|
field_daily_email_cta: { }
|