1.3 KiB
| title | date | permalink | tags | cta | snippet | |||
|---|---|---|---|---|---|---|---|---|
| The power of arbitrary classes | 2024-07-15 | daily/2024/07/15/the-power-of-arbitrary-classes |
|
~ | I don't often use them, but arbitrary classes in Tailwind can be powerful. |
I generally don't use aritrary classes with Tailwind CSS.
But, they are powerful, and I do use them in some situations.
A few months ago, I posted a screenshot of a timeline component 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.