{ "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\n" } ], "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": "\n

Whilst a number of classes that Tailwind CSS generates are single-value utility classes such as .block { display: block; }<\/code> and .relative { position: relative; }<\/code>, it also includes additional things such as setting a default line height with a font size<\/a>, adding variants for group-hover<\/a> and focus-within<\/a> (as well as various other pseudo states).<\/p>\n\n

It includes utilities for adding horizontal or vertical space<\/a> or styling dividers between elements<\/a>.<\/p>\n\n

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

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>\n\n

If you take a look at the Tailwind CSS documentation<\/a>, you'll definitely find some interesting and useful things.<\/p>\n\n ", "format": "full_html", "processed": "\n

Whilst a number of classes that Tailwind CSS generates are single-value utility classes such as .block { display: block; }<\/code> and .relative { position: relative; }<\/code>, it also includes additional things such as setting a default line height with a font size<\/a>, adding variants for group-hover<\/a> and focus-within<\/a> (as well as various other pseudo states).<\/p>\n\n

It includes utilities for adding horizontal or vertical space<\/a> or styling dividers between elements<\/a>.<\/p>\n\n

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

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>\n\n

If you take a look at the Tailwind CSS documentation<\/a>, you'll definitely find some interesting and useful things.<\/p>\n\n ", "summary": null } ] }