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

2022-04-24 00:00:00 colors reactjs css tailwind-css next.js

我正在尝试使用带有顺风css的NextJs来做一个项目。但是，每当我尝试使用自定义颜色作为背景颜色时，都会抛出以下错误：

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 | }

代码

index.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>
  );
}

trawind.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: [],
};

global als.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: [],
};

系统信息：

操作系统：MacOS BigSur 11.3 节点版本：16.2.0

解决方案

要使用arbitrary value syntax(带有方括号)，您需要启用JIT模式，并确保您使用的是Tailwind2.1或更高版本。这将按需编译css，从而允许您使用设计系统的方括号语法和拆分。

有关JIT模式的详细信息，请参阅Tailwind docs。

启用JIT模式：

// tailwind.config.js
module.exports = {
  mode: 'jit', // add this
  purge: [
  // ...
  ],
  theme: {
    // ...
  }
  // ...
}

相关文章