85 lines
3.9 KiB
YAML
85 lines
3.9 KiB
YAML
uuid:
|
|
- value: a3fdc4e9-f528-43e7-911f-9cf5d0cce210
|
|
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:48+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: |
|
|
Long-term maintainability with utility classes and Tailwind CSS
|
|
created:
|
|
- value: '2023-01-19T00:00:00+00:00'
|
|
changed:
|
|
- value: '2025-05-11T09:00:48+00:00'
|
|
promote:
|
|
- value: false
|
|
sticky:
|
|
- value: false
|
|
default_langcode:
|
|
- value: true
|
|
revision_translation_affected:
|
|
- value: true
|
|
path:
|
|
- alias: /daily/2023/01/19/long-term-maintainability-with-utility-classes-and-tailwind-css
|
|
langcode: en
|
|
body:
|
|
- value: |
|
|
<p>One of the common initial concerns of utility classes and Tailwind CSS is its maintainability.</p>
|
|
|
|
<p>How you manage all the classes within the HTML and how easy is it to make changes?</p>
|
|
|
|
<p>Today, <a href="https://twitter.com/mauro_codes/status/1615726036737576960">I saw this tweet</a>:</p>
|
|
|
|
<blockquote>
|
|
<p>You can say whatever you want about @tailwindcss, but I just opened a legacy project with tailwind 0.7 that I didn't touch for almost three years... and I was able to update the whole branding in 30 minutes.</p>
|
|
</blockquote>
|
|
|
|
<p>One of my earliest Tailwind projects was the <a href="https://phpsw.uk">PHP South West website</a>. We <a href="https://twitter.com/opdavies/status/934488762276564993">worked on this in November 2017</a> and it still uses Tailwind CSS 0.5.</p>
|
|
|
|
<p>These are the classes used on the main menu:</p>
|
|
|
|
<p><code>bg-grey-lightest hidden absolute z-20 w-full border border-grey-lighter sm:flex sm:relative sm:w-auto sm:border-none</code></p>
|
|
|
|
<p>Even though Tailwind CSS is now on version 3.2.4, I can still read this and know exactly what the classes do, and I'm confident that I could easily make changes to this or any other element on the website.</p>
|
|
|
|
<p>That probably isn't something that I could say for other projects that use different approaches to styling, and definitely an advantage of styling with small, reusable utility classes.</p>
|
|
|
|
|
|
format: full_html
|
|
processed: |
|
|
<p>One of the common initial concerns of utility classes and Tailwind CSS is its maintainability.</p>
|
|
|
|
<p>How you manage all the classes within the HTML and how easy is it to make changes?</p>
|
|
|
|
<p>Today, <a href="https://twitter.com/mauro_codes/status/1615726036737576960">I saw this tweet</a>:</p>
|
|
|
|
<blockquote>
|
|
<p>You can say whatever you want about @tailwindcss, but I just opened a legacy project with tailwind 0.7 that I didn't touch for almost three years... and I was able to update the whole branding in 30 minutes.</p>
|
|
</blockquote>
|
|
|
|
<p>One of my earliest Tailwind projects was the <a href="https://phpsw.uk">PHP South West website</a>. We <a href="https://twitter.com/opdavies/status/934488762276564993">worked on this in November 2017</a> and it still uses Tailwind CSS 0.5.</p>
|
|
|
|
<p>These are the classes used on the main menu:</p>
|
|
|
|
<p><code>bg-grey-lightest hidden absolute z-20 w-full border border-grey-lighter sm:flex sm:relative sm:w-auto sm:border-none</code></p>
|
|
|
|
<p>Even though Tailwind CSS is now on version 3.2.4, I can still read this and know exactly what the classes do, and I'm confident that I could easily make changes to this or any other element on the website.</p>
|
|
|
|
<p>That probably isn't something that I could say for other projects that use different approaches to styling, and definitely an advantage of styling with small, reusable utility classes.</p>
|
|
|
|
|
|
summary: null
|
|
field_daily_email_cta: { }
|