Order summary component

Hello 👋,

I am submitting another solution to the challenge. I deliberately chose a relatively simple one to focus on exploring more of CSS Reusability / Tailwind CSS capabilities for extensions.

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

What did you find difficult while building the project?

The project itself was relatively easy. However, one particular challenge took a bit more time than I expected - positioning the icon-music.svg object into a card header.

I could easily add an image and text content element into a flex container, but it would require adding an explicit image tag/empty div element with an image background.

I thought it might be better to experiment with ::before pseudoelement and avoid cluttering the HTML template with an extra element which could be avoidable.

Long story short, I followed my idea, and it worked well. It just took a bit longer than I expected.

Some general thoughts

I like this solution. I still strictly separate styling and HTML distinct, even when using Tailwind.

But compared to previous challenges, I focused more on reusability and extension, and I am happy with the outcome of using CSS variables with a combination of Tailwind extension capabilities.

In particular, I like how things like font-sizes could be extended:

// tailwind.config.js

// the variables are defined in the style,
// e.g: --text-size-small: 0.9375rem; /* 15px */

fontSize: {
'2xs': ['var(--link-size-small)', {
lineHeight: 'var(--link-line-small)',
fontWeight: '500'
}],
'xs': ['var(--text-size-tiny)', {
lineHeight: 'var(--text-line-tiny)',
fontWeight: '500'
}],
'sm': ['var(--text-size-small)', {
lineHeight: 'var(--text-line-small)',
fontWeight: '500'
}],
'base': ['var(--text-size-normal)', {
lineHeight: 'var(--text-line-normal)',
fontWeight: '500'
}],
'lg': ['var(--heading-size-medium)', {
lineHeight: 'var(--heading-line-medium)',
fontWeight: '900'
}],
'xl': ['var(--heading-size-large)', {
lineHeight: 'var(--heading-line-large)',
fontWeight: '900'
}]
},

It helped keep the CSS minimal and gave me enough confidence to apply this approach in future projects.