34 lines
1.3 KiB
Markdown
34 lines
1.3 KiB
Markdown
|
---
|
||
|
|
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
|