Блог

У меня возникла особая проблема только в одном проекте, который использует 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;
}
...
  

Я думаю, вам нужно будет переместить свой 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;