Tailwind CSS-Hintergrundbild funktioniert bei mir nicht ⇐ CSS

[Anonymous]

Ich versuche, das BackgroundImage von TailwindCSS zum Laufen zu bringen, und ich habe hier oder auf GitHub Hilfe für viele andere TailwindCSS-Probleme gefunden, aber nicht für dieses. Es ist keine komplizierte Aufgabe, funktioniert aber trotzdem nicht.
Wie in der Dokumentation möchte ich also zwei einfache Hintergrundbilder erstellen, die für mehrere Ansichtsgrößen verwendet werden können. In der Dokumentation https://tailwindcss.com/docs/background-image heißt es: „Standardmäßig werden nur reaktionsfähige Varianten für Hintergrundbild-Dienstprogramme generiert.“
Das bedeutet, dass ich es ohne weitere Konfiguration der Varianten für diesen Zweck verwenden können sollte.
So sieht meine tailwind.config.js aus (wichtiger Teil steht am Ende):

Code: Select all

const plugin = require('tailwindcss/plugin')
module.exports = {
purge: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./plugins/**/*.vue",
"./static/**/*.vue",
"./store/**/*.vue"
],
theme: {
extend: {
minHeight: {
'120': '30rem',
},
height: {
'15': '3.75rem',
'17': '4.25rem',
'7': '1.75rem',
'75': '18.75rem',
},
width: {
'15': '3.75rem',
open: '11.875rem',
'75': '18.75rem',
},
margin: {
'7': '1.75rem',
'17': '4.25rem',
'27': '6.75rem',
},
padding: {
'7': '1.75rem',
},
borderWidth: {
'5': '5px',
},
fontSize: {
'5xl': '3.375rem',
'xxl': '1.375rem',
},
boxShadow: {
'lg': '0px 0px 10px #00000033',
'xl': '0px 0px 20px #00000080',
},
gap: {
'7': '1.75rem',
},
inset: {
'10': '2.5rem',
'11': '2.75rem',
'17': '4.25rem',
'1/2': '50%',
},
backgroundImage: {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
}
},
variants: {
opacity: ['group-hover'],
backgroundOpacity: ['group-hover'],
},
plugins: []
}

Nur um sicherzustellen, dass ich den vollständigen Inhalt eingefügt habe. Und so sieht der HTML-Code aus:

Code: Select all

potato

Wie gesagt, nichts Besonderes, npm run dev wird ohne Fehler beendet, aber wenn ich das Element inspiziere, kann ich nichts sehen, was mit einem Hintergrundparameter in CSS zusammenhängt. Selbst das Beispiel aus der Dokumentation funktioniert nicht, das einen Verlaufsblock bereitstellen müsste.
Ich verwende TailwindCSS mit Laravel.
Wie kann ich vorgehen? (Ich kann eine Problemumgehung mithilfe von CSS-Code in meiner Sass-Datei durchführen, möchte aber Tailwinds eigene Lösung verwenden.)