Question

我只在一个使用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;
}
...

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

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

1 个答案: