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

织梦狗教程前端问题

2022-01-01

NextJS - Not Able To Use Custom Colors In Tailwind CSS In(NextJS-无法在TailWind中使用自定义颜色)

本文介绍了NextJS-无法在TailWind中使用自定义颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用带有顺风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 *

织梦狗教程

本文标题为：NextJS-无法在TailWind中使用自定义颜色