Фоновое изображение CSS Tailwind у меня не работает ⇐ CSS

[Anonymous]

Я пытаюсь заставить работать решение Tailwinds BackgroundImage и нашел помощь по многим другим проблемам Tailwindcss здесь или на GitHub, но не для этой проблемы. Это несложная задача, но она все равно не работает.
Как и в документации, я хочу создать два простых фоновых изображения для использования в различных размерах. В документации https://tailwindcss.com/docs/background-image указано: «По умолчанию для утилит фонового изображения генерируются только адаптивные варианты».
Это означает, что без какой-либо дополнительной настройки вариантов я должен иметь возможность использовать его для этой цели.
Вот как выглядит мой файл Tailwind.conf.js (важная часть находится в конце):

Код: Выделить всё

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: []
}

Просто чтобы убедиться, что я включил полный контент. А вот как выглядит html:

Код: Выделить всё

potato

Как я уже сказал, ничего особенного, «npm run dev» завершается без каких-либо ошибок... но если я проверю элемент, я не увижу ничего, связанного с каким-либо фоновым параметром в CSS. Даже пример из документации не работает, поэтому должен быть предусмотрен блок градиента.
Я использую Tailwind с Laravel.
Как можно Я продолжу? (Я могу обойти это, используя код CSS в своем файле SASS, но я хочу использовать собственное решение Tailwind).

Подробнее здесь: https://stackoverflow.com/questions/636 ... ork-for-me