uuid:
  - value: fdf6ccbc-7e57-4767-8c8d-7db48b2874cc
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: |
      Tailwind: Not just translating CSS to utility classes
created:
  - value: '2023-01-21T00: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/21/tailwind-not-just-translating-css-to-utility-classes
    langcode: en
body:
  - value: |
      <p>Whilst a number of classes that Tailwind CSS generates are single-value utility classes such as <code>.block { display: block; }</code> and <code>.relative { position: relative; }</code>, it also includes additional things such as <a href="https://tailwindcss.com/docs/font-size#setting-the-font-size">setting a default line height with a font size</a>, adding variants for <a href="https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state">group-hover</a> and <a href="https://tailwindcss.com/docs/hover-focus-and-other-states#focus-within">focus-within</a> (as well as various other pseudo states).</p>

      <p>It includes utilities for adding <a href="https://tailwindcss.com/docs/space#add-horizontal-space-between-children">horizontal or vertical space</a> or <a href="https://tailwindcss.com/docs/divide-style">styling dividers between elements</a>.</p>

      <p>As well prefixing a class using a screen modifier, such as <code>md:flex</code>, you can stack them and set a maximum screen value. For example, <code>md:max-lg:flex</code> will only flex between the <code>md</code> and <code>lg</code> breakpoints.</p>

      <p>If has official plugins for typography styles, forms, line-clamp (truncating text) and aspect ratios, as well as numerous community plugins and supports arbitrary values if you need them.</p>

      <p>If you take a look at the <a href="https://tailwindcss.com/docs">Tailwind CSS documentation</a>, you'll definitely find some interesting and useful things.</p>

              
    format: full_html
    processed: |
      <p>Whilst a number of classes that Tailwind CSS generates are single-value utility classes such as <code>.block { display: block; }</code> and <code>.relative { position: relative; }</code>, it also includes additional things such as <a href="https://tailwindcss.com/docs/font-size#setting-the-font-size">setting a default line height with a font size</a>, adding variants for <a href="https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state">group-hover</a> and <a href="https://tailwindcss.com/docs/hover-focus-and-other-states#focus-within">focus-within</a> (as well as various other pseudo states).</p>

      <p>It includes utilities for adding <a href="https://tailwindcss.com/docs/space#add-horizontal-space-between-children">horizontal or vertical space</a> or <a href="https://tailwindcss.com/docs/divide-style">styling dividers between elements</a>.</p>

      <p>As well prefixing a class using a screen modifier, such as <code>md:flex</code>, you can stack them and set a maximum screen value. For example, <code>md:max-lg:flex</code> will only flex between the <code>md</code> and <code>lg</code> breakpoints.</p>

      <p>If has official plugins for typography styles, forms, line-clamp (truncating text) and aspect ratios, as well as numerous community plugins and supports arbitrary values if you need them.</p>

      <p>If you take a look at the <a href="https://tailwindcss.com/docs">Tailwind CSS documentation</a>, you'll definitely find some interesting and useful things.</p>

              
    summary: null
field_daily_email_cta: {  }