#next.js #tailwind-css
#next.js #tailwind-css
Вопрос:
У меня возникла особая проблема только в одном проекте, который использует nextjs и tailwindcss.
Я пытаюсь расширить цветовую схему некоторыми пользовательскими цветами, и intellisennse распознает цвета, но они не применяются, и когда я использую его с помощью @apply, приложение просто ломается, говоря, что эти классы не существуют.
Синтаксическая ошибка: @apply
не может использоваться с .text-test
, потому .text-test
что либо не может быть найден, либо его фактическое определение включает псевдоселектор типа:hover , :active и т.д. Если вы уверены, что .text-test
это существует, убедитесь, что все @import
инструкции обрабатываются должным образом, прежде чем Tailwind CSS увидит ваш CSS, поскольку @apply
его можно использовать только для классов в том же дереве CSS.
Это работает в производстве, поэтому применяются цвета, ошибка возникает только в dev. Я могу обойти это, но все же меня поражает, почему это не работает.
_app.js
import ClientProvider from '../context/urqlClient'
import makeClient from '../utils/makeUrqlClient'
import '../styles/index.css'
function MyApp({ Component, pageProps }: AppProps) {
return (
<ClientProvider makeClient={makeClient}>
<Component {...pageProps} />
</ClientProvider>
)
}
export default MyApp
tailwind.config.js
module.exports = {
theme: {
colors: {
transparent: colors.transparent,
current: colors.current,
black: colors.black,
white: colors.white,
gray: colors.gray,
orange: colors.orange,
red: colors.red,
},
extend: {
colors: {
barbarian: '#FF7D01',
bard: '#E6CC80',
cleric: '#FFFFFF',
druid: '#FF7D0A',
fighter: '#C79C6E',
monk: '#00FF96',
paladin: '#F58CBA',
ranger: '#ABD473',
rogue: '#FFF569',
sorcerer: '#FF4700',
warlock: '#9482C9',
wizard: '#69CCF0',
},
},
},
variants: {},
plugins: [],
corePlugins: {
float: false,
},
purge: ['./**/*.tsx', './**/*.css'],
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
}
index.css (только попутный ветер, остальное я вас беспокоить не буду)
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind screens;
@tailwind utilities;
html {
font-family: 'Inter var', sans-serif;
width: 100vw;
overflow-x: hidden;
}
...
Комментарии:
1. Можете ли вы поделиться кодом CSS, в который вы импортируете директивы tailwind, а также tailwind.config.js , а также _app.js от Next.js ?
2. Да, я это сделаю.
3. У меня была такая же проблема при использовании
theme.extend.colors
. Попробуйтеtheme.colors
4. Извините, похоже, так и должно быть
theme.extend.colors
…
Ответ №1:
Я думаю, вам нужно будет переместить свой CSS перед @tailwind
строками. Я думаю, что некоторые из ваших стилей должны отсутствовать в этом компоненте, поскольку я нигде не вижу .text-test
ссылок.
В любом случае, попробуйте это:
html {
font-family: 'Inter var', sans-serif;
width: 100vw;
overflow-x: hidden;
}
...
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind screens;
@tailwind utilities;
Комментарии:
1. Извините, тест был только для того, чтобы показать пример, я на самом деле не использую этот цвет 🙂 Но спасибо, я попробую это. Странно то, что он работает на prod, но в разработке ничего из tailwind.config.js применяется. Итак, в основном, когда я делаю / build step, все в порядке, конфигурация ухудшается, но в / next — нет
2. Правда, это странно, и я не знаю, почему это произошло.