NextJS-无法在TailWind中使用自定义颜色 [英] NextJS - Not Able To Use Custom Colors In Tailwind CSS In
本文介绍了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 */}
<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: {
// ...
}
// ...
}
这篇关于NextJS-无法在TailWind中使用自定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
