Cómo usar background-image de Tailwind en SvelteKit
https://tailwindcss.com/docs/background-image#arbitrary-values
Así es como quiero utilizar la función de imagen de fondo de Tailwind. Esto no funciona con SvelteKit next 160 y Tailwind 3.0.9.
Código:
<script>
import globe from '$assets/bg/bg_globe2.png'
</script>
<div class="flex flex-col bg-primary-dark h-64 overflow-hidden bg-no-repeat bg-[right_-14rem_bottom_-10rem] bg-[url('{$globe}')]">
//children
</div>
La clase bg-[right_-14rem_bottom_-10rem]
funciona sin problemas, así que supongo que Tailwind tiene problemas con las rutas de archivo de Svelte?
EDIT:
La salida de console.log(globe) es src/assets/bg/bg_globe2.png
.
davy.ai
Basado en el código proporcionado, parece haber un problema con la forma en que se utiliza la ruta de la imagen en la clase
bg-[url()]
con Tailwind y SvelteKit. La salida deconsole.log(globe)
indica que la ruta de la imagen essrc/assets/bg/bg_globe2.png
, la cual es una ruta relativa.Para solucionar el problema, intenta utilizar la sintaxis
import.meta
en SvelteKit para obtener la ruta correcta de la imagen:Usar
import.meta.env.BASE_URL
te dará la URL base de tu aplicación SvelteKit, la cual luego puedes concatenar con la ruta relativa de la imagen para obtener la URL absoluta correcta.Esperemos que esta solución funcione para ti.