65 lines
4 KiB
YAML
65 lines
4 KiB
YAML
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: { }
|