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

Posted 2023-03-07

【中文标题】TailwindCSS 和 next.js - 无法应用自定义颜色

【英文标题】：TailwindCSS and next.js - can't apply custom colors

【发布时间】：2021-01-11 06:02:08

【问题描述】：

我只在一个使用 nextjs 和 tailwindcss 的项目上遇到了特殊问题。

我尝试使用一些自定义颜色扩展配色方案，并且智能识别颜色，但它们没有被应用，当我将它与 @apply 一起使用时，应用程序只是中断，说这些类不存在。

语法错误：@apply 不能与 .text-test 一起使用，因为 .text-test 要么找不到，要么它的实际定义包含一个伪选择器，如 :hover、:active 等。如果你确保.text-test 存在，确保所有@import 语句都被正确处理之前 Tailwind CSS 看到您的 CSS，因为@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;

...

【问题讨论】：

你能分享一下你导入tailwind指令的CSS代码吗？tailwind.config.js，还有来自Next.js的_app.js？

是的，我会这样做的。

对我来说，我在使用theme.extend.colors 时遇到了同样的问题。试试theme.colors

对不起，看起来应该是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;

【讨论】：

抱歉，测试只是为了展示示例，我实际上并没有使用那种颜色 :) 但是谢谢，我会试试的。奇怪的是它适用于产品，但在开发中，tailwind.config.js 中没有任何应用。所以基本上，当我执行 /build 步骤时，一切都很好，配置很糟糕，但是在 /next 上，没有

是的，这很奇怪，我不知道为什么会这样。