oliverdavies.uk/content/node.369e9679-fef1-4678-aab9-7edcb39f5533.yml

uuid:
  - value: 369e9679-fef1-4678-aab9-7edcb39f5533
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:55+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: 'Refactoring a Tailwind CSS component'
created:
  - value: '2022-09-09T00:00:00+00:00'
changed:
  - value: '2025-05-11T09:00:55+00:00'
promote:
  - value: false
sticky:
  - value: false
default_langcode:
  - value: true
revision_translation_affected:
  - value: true
path:
  - alias: /daily/2022/09/09/refactoring-tailwind-component
    langcode: en
body:
  - value: |
      <p>After last night's Pro Tailwind theming workshop, I decided to revisit and refactor some similar code that I'd worked on before.</p>

      <p>It was a demo for a presentation on utility-first CSS and Tailwind whilst I was at Inviqa.</p>

      <p>I'd taken one of the components from the website that we'd lauched and rebuilt it - in particular to show how Tailwind could be used for responsive and themeable components.</p>

      <p><a href="https://play.tailwindcss.com/Yfmw8O5UNN">The original version</a> was written in Tailwind 1 and used custom CSS with <code>@apply</code> rules to include text or background colours to elements based on the theme being used on that page or component.</p>

      <p>As well as moving it into a Next.js application, <a href="https://github.com/opdavies/inviqa-tailwindcss-example">the new version</a> uses techniques covered in Simon's workshop - using CSS custom properties (aka variables) to override the colours, and writing custom plugins to generate the required styles. It doesn't include everything from the workshop, but enough for this refactor.</p>

      <p>I also moved the <code>flex-basis</code> classes into their own standalone plugin and might release that as it's own open-source plugin.</p>

      <p>I'm working on a client project at the moment which will need switchable themes so I'm looking forward to putting these techniques to use again in the near future.</p>

              
    format: full_html
    processed: |
      <p>After last night's Pro Tailwind theming workshop, I decided to revisit and refactor some similar code that I'd worked on before.</p>

      <p>It was a demo for a presentation on utility-first CSS and Tailwind whilst I was at Inviqa.</p>

      <p>I'd taken one of the components from the website that we'd lauched and rebuilt it - in particular to show how Tailwind could be used for responsive and themeable components.</p>

      <p><a href="https://play.tailwindcss.com/Yfmw8O5UNN">The original version</a> was written in Tailwind 1 and used custom CSS with <code>@apply</code> rules to include text or background colours to elements based on the theme being used on that page or component.</p>

      <p>As well as moving it into a Next.js application, <a href="https://github.com/opdavies/inviqa-tailwindcss-example">the new version</a> uses techniques covered in Simon's workshop - using CSS custom properties (aka variables) to override the colours, and writing custom plugins to generate the required styles. It doesn't include everything from the workshop, but enough for this refactor.</p>

      <p>I also moved the <code>flex-basis</code> classes into their own standalone plugin and might release that as it's own open-source plugin.</p>

      <p>I'm working on a client project at the moment which will need switchable themes so I'm looking forward to putting these techniques to use again in the near future.</p>

              
    summary: null
field_daily_email_cta: {  }