oliverdavies.uk/content/node.fdf6ccbc-7e57-4767-8c8d-7db48b2874cc.json

91 lines
No EOL
4.9 KiB
JSON

{
"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 <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>\n\n<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>\n\n<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>\n\n<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>\n\n<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>\n\n ",
"format": "full_html",
"processed": "\n <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>\n\n<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>\n\n<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>\n\n<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>\n\n<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>\n\n ",
"summary": null
}
]
}