NextJS - 无法在 Tailwind CSS 中使用自定义颜色

Cod*_*ish 2 css colors reactjs next.js tailwind-css

我正在尝试使用 NextJs 和 Tailwinds CSS 来制作一个项目。但是,每当我尝试使用自定义颜色作为背景颜色时,它都会抛出此错误:

Failed to compile
./styles/globals.css:7:12
Syntax error: /Users/anishkunapareddy/Desktop/Projects/React/hulu-clone/styles/globals.css The `bg-[#06202A]` class does not exist. If you're sure that `bg-[#06202A]` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  5 | @layer base {
  6 |   body {
> 7 |     @apply bg-[#06202A] text-gray-300;
    |            ^
  8 |   }
  9 | }
Run Code Online (Sandbox Code Playgroud)

代码

索引.js

import Head from "next/head";
import Image from "next/image";
import Header from "../components/Header";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Hulu 2.0</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      {/* Header */}
      <Header />

      {/* Nav */}

      {/* Results */}
    </div>
  );
}
Run Code Online (Sandbox Code Playgroud)

tailwind.config.js

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
Run Code Online (Sandbox Code Playgroud)

全局变量.css

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
Run Code Online (Sandbox Code Playgroud)

系统信息:

操作系统:macOS BigSur 11.3 节点版本:16.2.0

per*_*.32 5

为了使用任意值语法(带有方括号),您需要启用 JIT 模式并确保您使用的是 Tailwind 2.1 或更高版本。这将按需编译 CSS,允许您使用方括号语法并“突破”您的设计系统。

有关 JIT 模式的更多信息,请参阅Tailwind 文档。

要启用 JIT 模式:

// tailwind.config.js
module.exports = {
  mode: 'jit', // add this
  purge: [
  // ...
  ],
  theme: {
    // ...
  }
  // ...
}
Run Code Online (Sandbox Code Playgroud)