TailwindCSS和next.js-无法应用自定义颜色

如何解决TailwindCSS和next.js-无法应用自定义颜色

我只在一个使用nextjs和tailwindcss的项目中遇到一个特定的问题。

我尝试用一​​些自定义颜色扩展配色方案，并且intellisennse可以识别这些颜色，但是未应用它们，当我将其与@apply一起使用时，app会中断，说这些类不存在。

语法错误：@apply不能与.text-test一起使用，因为找不到.text-test，或者它的实际定义包括伪选择器，如：hover，：active，等等。如果您确定.text-test存在，请确保在{em> Tailwind CSS看到您的CSS之前，正确处理了所有@import语句，因为@apply可以仅用于同一CSS树中的类。

这可以在生产中使用，因此可以应用颜色，而在开发人员中只会发生错误。我可以解决它， 但它仍然让我感到困惑，为什么它不起作用。

_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;