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: {  }