Произвольные значения не работают в Tailwindcss
Я пытаюсь использовать произвольные значения в своей html-программе, используя tailwindcss, однако, что бы я ни пробовал, похоже, это не работает. Я также пробовал добавить их в свой файл tailwind.config.js и использовать в качестве расширения, но это тоже не сработало. Я также пробовал удалить extend{} и просто добавить их в тему, но результатов все равно нет.
Вот файл tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./venv/templates/**/*.{html,js}"],
theme: {
extend: {
colors: {
'custom-blue': '#1692AC',
'custom-pink': '#AA1A55',
'custom-red': '#F7435F',
'custom-orange': '#F78160',
},
minHeight: {
'95': '23.3rem', // 372.8px
},
height:{
'500' : '500px'
}
},
},
plugins: [],
}Фрагмент HTML-кода: (пользовательский синий цвет также не применяется)
<div class = "flex px-20 mt-16">
<div class = "bg-gray-300 flex-auto hover:bg-custom-blue w-[100px] h-[200px]">
<h2 class = "font-bold top-0 left-0 p-1" style = "font-size: xx-large; color: #1692AC">Something</h2>
</div>
</div>
Ответы 1
в вашем проекте недостает какой-то части. сначала попробуйте сделать свой проект правильно. используйте это для инициализации npm в вашем проекте. npm init -y Установите Tailwind CSS и его зависимости. npm install -D tailwindcss postcss autoprefixer Создайте файлы Tailwind.config.js и postcss.config.js. npx tailwindcss init -p теперь создайте файл style.css и вставьте его внутрь файла.
@tailwind base;
@tailwind components;
@tailwind utilities;
теперь используйте это для создания CSS-файла npx tailwindcss build main.css -o output.css теперь свяжите CSS-файл сборки с html-файлом.
<link href = "./output.css" rel = "stylesheet">
ваш файл Tailwind.config.js и структура проекта должны быть такими. после любого изменения стиля создайте свой CSS-файл.
нужно ли мне постоянно поддерживать npx tailwindcss -i ./main.css -o ./output.css --watch, чтобы изменения вступили в силу? извините, я знаю, что эти вопросы простые. Что-то новое в попутном ветру
да, пожалуйста, обратитесь к Tailwindcss.com/docs/installation для получения дополнительной информации...
Пожалуйста, поделитесь HTML-кодом с классами попутного ветра, которые не работают. Мы не можем догадаться, почему ваш код не работает, исходя из имеющейся на данный момент информации. Посмотрите, как написать минимально воспроизводимый пример .