Класс text-[color] по умолчанию Tailwind не работает (rails7)
я только что создал новый проект рельсов, установив попутный ветер по умолчанию с помощью команды:
rails new project_name -T -d postgresql --css tailwind
При попытке использовать классы попутного ветра это работает, за исключением класса, включающего цвет, например красный текст. Однако text-white работает.
Я попытался создать свой собственный класс, используя @apply:
.red { @apply text-red; }
при запуске bin/rails tailwindcss:watch я получаю следующую ошибку:
" Класс text-red не существует. Если text-red является пользовательским классом, убедитесь, что он определен в директиве @layer."
Есть идеи, почему я не могу использовать этот класс «красный текст»?
он мой tailwind.config.js (это тот, который сгенерирован новыми рельсами):
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
]
}
Ответы 1
Действительно, как следует из ошибки, класс text-red не будет существовать с вашей текущей конфигурацией Tailwind. По умолчанию в Tailwind цвета, отличные от white, black или ключевых слов, имеют оттенки, указанные в их документации.
Либо используйте допустимый цвет, например text-red-500:
.red { @apply text-red-500; }
Или расширьте red цветовые оттенки специальной клавишей DEFAULT в конфигурации Tailwind:
module.exports = {
// …
theme: {
extend: {
// …
colors: {
red: {
DEFAULT: 'red',
},
},
},
},
};
Или переопределите цветовую палитру red значением, не относящимся к объекту, в конфигурации Tailwind:
module.exports = {
// …
theme: {
extend: {
// …
colors: {
red: 'red',
},
},
},
};
Это сработало, спасибо за ваш ответ и за совет о том, как создать этот класс.