Equalizer landing page

Hello 👋,

I am submitting my third challenge. Still from the newbie category on the one hand (as I try to polish the core principles of TailwindCSS), but it was a lot of fun on the other one.

Here is a bit of the breakdown. (More detailed explanation is available in the RespositoryURL).

What did you find difficult while building the project?

Initially, the most challenging part was managing specific position styles for the background images. It's not an issue in vanilla CSS; however, TailwindCSS applies many contains that didn't work by default for my requirements.

I could override these default utility classes for image background positions; however, I felt it would be overkill. Fortunately, I learned about a specific construct allowing it to be more precise whilst keeping the default constraints in place. Things like:

bg-[POSITION1_VALUE1_UNIT1_POSITION2_VALUE2_UNIT2]

e.g

bg-[right_-15rem_top_-14rem]

And learning this helped me to complete this project.

Which areas of your code are you unsure of?

Using Tailwind allows me to make the styles more compact. However, FrontendMentor designs always have a lot of tweaks in the original template.

It makes sense to update the configuration and override some values, but it could be counterproductive in most cases.

Therefore in quite a few places, I am using arbitrary values, like:

lg:w-[21rem]

The problem is that it becomes pretty repetitive after a while, and I feel it could be a problem if I decide to update these values.

Do you have any questions about best practices?

Given the repetitive arbitrary values, I will use more CSS variables for the repeating values, combining them with Tailwind new/altered/overridden utility values in tailwind.config.js.

I had worked with CSS variables before, but I had never done it in Tailwind. Is there any best practise related to this?