oliverdavies.uk/content/node.10b3608a-50f6-4178-9ae2-d07f353a9c23.json

{
    "uuid": [
        {
            "value": "10b3608a-50f6-4178-9ae2-d07f353a9c23"
        }
    ],
    "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:10+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": "The power of arbitrary classes"
        }
    ],
    "created": [
        {
            "value": "2024-07-15T00:00:00+00:00"
        }
    ],
    "changed": [
        {
            "value": "2025-05-11T09:00:10+00:00"
        }
    ],
    "promote": [
        {
            "value": false
        }
    ],
    "sticky": [
        {
            "value": false
        }
    ],
    "default_langcode": [
        {
            "value": true
        }
    ],
    "revision_translation_affected": [
        {
            "value": true
        }
    ],
    "path": [
        {
            "alias": "\/daily\/2024\/07\/15\/the-power-of-arbitrary-classes",
            "langcode": "en"
        }
    ],
    "body": [
        {
            "value": "\n          <p><a href=\"\/daily\/2023\/01\/02\/dont-use-arbitrary-values-in-tailwind-css\">I generally don't use aritrary classes with Tailwind CSS<\/a>.<\/p>\n\n<p>But, they are powerful, and I do use them in some situations.<\/p>\n\n<p>A few months ago, <a href=\"https:\/\/x.com\/opdavies\/status\/1755332703308652730\">I posted a screenshot of a timeline component<\/a> I've built for a client project.<\/p>\n\n<p>Today, I needed to fix an issue with the first and last \"paths\" as they were stretching further than they should.<\/p>\n\n<p>This is the class I added to fix the problem:<\/p>\n\n<blockquote>\n  <p>mr-[calc(50%<em>-_calc(var(--path-width)<\/em>\/_2))]<\/p>\n<\/blockquote>\n\n<p>It adds an arbitrary amount of right margin, which is 50% of the container minus half of the path width, which is the <code>--path-width<\/code> variable.<\/p>\n\n<p>This class uses the <code>calc<\/code> function as well as <code>var<\/code> to determine the correct margin to apply, whilst keeping the code adaptable in case the path width changes.<\/p>\n\n<p>And, as this is a value that's only used in this component, there's no benefit to writing this in a stylesheet - making an arbitrary value was a good option.<\/p>\n\n        ",
            "format": "full_html",
            "processed": "\n          <p><a href=\"http:\/\/default\/daily\/2023\/01\/02\/dont-use-arbitrary-values-in-tailwind-css\">I generally don't use aritrary classes with Tailwind CSS<\/a>.<\/p>\n\n<p>But, they are powerful, and I do use them in some situations.<\/p>\n\n<p>A few months ago, <a href=\"https:\/\/x.com\/opdavies\/status\/1755332703308652730\">I posted a screenshot of a timeline component<\/a> I've built for a client project.<\/p>\n\n<p>Today, I needed to fix an issue with the first and last \"paths\" as they were stretching further than they should.<\/p>\n\n<p>This is the class I added to fix the problem:<\/p>\n\n<blockquote>\n  <p>mr-[calc(50%<em>-_calc(var(--path-width)<\/em>\/_2))]<\/p>\n<\/blockquote>\n\n<p>It adds an arbitrary amount of right margin, which is 50% of the container minus half of the path width, which is the <code>--path-width<\/code> variable.<\/p>\n\n<p>This class uses the <code>calc<\/code> function as well as <code>var<\/code> to determine the correct margin to apply, whilst keeping the code adaptable in case the path width changes.<\/p>\n\n<p>And, as this is a value that's only used in this component, there's no benefit to writing this in a stylesheet - making an arbitrary value was a good option.<\/p>\n\n        ",
            "summary": null
        }
    ]
}