TailwindCSS和next.js-can'；不要应用自定义颜色

我只有一个项目有一个特别的问题，那就是使用nextjs和tailwindcss

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

语法错误：

@apply

不能与

.text test

一起使用，因为

.text test

要么找不到，要么它的实际定义包含一个伪选择器，如：hover、：active等。如果您确定

.text test

存在，在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

css（仅限顺风资料，其余我不会打扰您）

---

我认为您需要在

@tailwind

行之前移动CSS。我认为这个组件中一定缺少一些样式，因为我看不到任何地方引用

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

---

你能在导入tailwind指令、tailwind.config.js以及Next.js中的_app.js的地方共享CSS代码吗？是的，我会这样做。对我来说，我在使用

theme.extend.colors

时也遇到了同样的问题。尝试

theme.colors

抱歉，看起来应该是

theme.extend.colors

毕竟…抱歉，测试只是为了展示示例，我实际上没有使用那种颜色：）但是谢谢，我会尝试一下。奇怪的是，它在prod上工作，但在开发中，tailwind.config.js中的任何内容都没有应用。所以基本上，当我执行/build步骤时，一切都很好，配置工作，但在/next上，不是真的，这很奇怪，我不知道为什么会发生这种情况。

@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind screens;
@tailwind utilities;

html {
  font-family: 'Inter var', sans-serif;
  width: 100vw;
  overflow-x: hidden;
}
...

html {
  font-family: 'Inter var', sans-serif;
  width: 100vw;
  overflow-x: hidden;
}
...

@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind screens;
@tailwind utilities;