From 5757cae2d497317b2521afd29e55fbfcc82846a6 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Mon, 15 Jul 2024 23:22:32 +0100 Subject: [PATCH] Add daily email for 2024-07-15 The power of arbitrary classes --- source/_daily_emails/2024-07-15.md | 33 ++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 source/_daily_emails/2024-07-15.md diff --git a/source/_daily_emails/2024-07-15.md b/source/_daily_emails/2024-07-15.md new file mode 100644 index 000000000..e603f3356 --- /dev/null +++ b/source/_daily_emails/2024-07-15.md @@ -0,0 +1,33 @@ +--- +title: The power of arbitrary classes +date: 2024-07-15 +permalink: daily/2024/07/15/the-power-of-arbitrary-classes +tags: + - software-development + - css + - tailwind-css +cta: ~ +snippet: | + I don't often use them, but arbitrary classes in Tailwind can be powerful. +--- + +[I generally don't use aritrary classes with Tailwind CSS][0]. + +But, they are powerful, and I do use them in some situations. + +A few months ago, [I posted a screenshot of a timeline component][1] I've built for a client project. + +Today, I needed to fix an issue with the first and last "paths" as they were stretching further than they should. + +This is the class I added to fix the problem: + +> mr-[calc(50%_-_calc(var(--path-width)_/_2))] + +It adds an arbitrary amount of right margin, which is 50% of the container minus half of the path width, which is the `--path-width` variable. + +This class uses the `calc` function as well as `var` to determine the correct margin to apply, whilst keeping the code adaptable in case the path width changes. + +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. + +[0]: {{site.url}}/archive/2023/01/02/dont-use-arbitrary-values-in-tailwind-css +[1]: https://x.com/opdavies/status/1755332703308652730