It looks like you're trying to use a Laravel Vite helper function within a Tailwind CSS class. The issue might be related to how the CSS is being parsed. When using Tailwind with dynamic values, especially for URLs, you need to ensure that the syntax is correct and that the CSS processor can understand it.
Here's a solution that should work:
-
First, make sure that the
Vite::image()helper function is returning the correct path to your image. You can test this by outputting it in a plain HTML tag to see if the image loads. -
If the helper function is working correctly, try using inline styles for dynamic background images instead of embedding them in the Tailwind class. This is because Tailwind's JIT mode might not pick up dynamic class names correctly.
Here's how you can modify your code:
<div
class="min-h-[35vh] bg-center bg-cover bg-no-repeat relative rounded-xl md:min-h-[75vh]"
style="background-image: url('{{ Vite::image('couple-photo.jpg') }}');">
</div>
By using the style attribute, you're directly setting the CSS property and its value, which ensures that the dynamic URL is correctly interpreted by the browser.
Remember to check that the Vite::image() function is accessible in your Blade template and that it's returning the correct URL. If you're still having issues, you might want to check your Vite configuration to ensure that asset handling is set up correctly.