All solutions

How do I link an external SVG file if I want to change its color through CSS? I've tried using <img>, <use xlink:href="..."></use> and <use href="..."></use> tags. The first option doesn't allow me to change its color dynamically, and the other two didn't render the SVG at all. I ended up bypassing this issue by copy-pasting the SVG source code from the external file all throughout my HTML document, which I wanted to avoid since it becomes difficult and more tedious to make changes to all copies.

As you can see when comparing my design to the one in the given design image, it's not quite there yet. I tried using :before for the overlay and adjusted it with CSS filters, but after a few hours, I gave up and stuck with what I had. I feel like CSS filters would make this convenient, but it's difficult to choose a color with specific RGB/HEX/HSL values. Is there a more convenient way to use a color overlay on an image?

One issue that halted my progress was that when the error signs & messages popped up, the background image looked different relative to the form. This was due to the form growing in size to fit the error messages. To solve it, I ended up using JavaScript to swap Tailwind class names in order to reduce the vertical padding on <main>. Is there a cleaner approach that doesn't rely so much on JavaScript to fix this issue?

I struggled a lot to properly deploy the web page. One of the reasons was that my images weren't included in the /dist folder. And even after they were all included, the URLs that I hard-coded in index.html (Favicon) and tailwind.config.cjs (Background image in the theme) didn't match the files placement in the production build directory. I ended up trying to "predict" where the files would end up and hard-code the URLs to that.

However, that brings the issue of the URLs not making sense in the development build. Is there any way to use development build URLs only in development and production build URLs only in production?

To create the entire component, the upper level part of the component is:

<article class="overflow-hidden rounded-lg flex flex-col lg:flex-row">
  <article class="w-[21.667rem] ...">...</article>
  <article class="w-[21.667rem] ...">...</article>
  <article class="w-[21.667rem] ...">...</article>
</article>

Should I allow the children elements to decide the width for the overall outer component (what I coded), or should I make the outer component decide the width for all the children (assuming that they should have equal widths)?

CSS functions like min(), max() & clamp() don't seem to work with TailwindCSS' arbitrary values. If I want to create fluid layouts to work with my responsive designs, am I stuck using screen breakpoints? Or is there a much more convenient way while working with the framework?

When sizing the QR code image, I used a pretty tacky solution:

<img 
  src="./images/image-qr-code.png" 
  class="border-separate rounded-md w-64 h-[14rem]"
>

I tried using h-64 to match the width, but the image ended up being a little too tall. Is there a different code implementation such that it clearly expresses that the image size should be a square?