我尝试使用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 | }代码
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>
);
}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: [],
};globals.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.316.2.0
3条答案
按热度按时间i86rm4rw1#
为了使用任意值语法（带方括号），您需要启用JIT模式，并确保您在Tailwind 2.1或更高版本上。这将按需编译CSS，这允许您使用方括号语法并“打破”您的设计系统。
有关JIT模式的更多信息，请参阅Tailwind docs。
要启用JIT模式，请执行以下操作：
l0oc07j22#
在扩展主题内部，您可以直接调用自定义颜色和/或变量- UPDATE -包括我的整个tailwind.config.js文件
tailwind.config.js然后，在基础层中，将
tailwind.config.js中定义的任何变量设置为相应的hex/rgb/hsl值。一旦将基础层导入应用的根文件（如果将nextjs用于自定义应用，则为_app.js，否则为index.js），它将全局工作非可变颜色（如
text-olive-300）将在它们旁边显示一个颜色小部件，而css变量（如text-secondary-0）则不会。./styles/base.css我将每一层的内容分离到一个样式目录中的单独的css文件中，然后将它们全部导入到一个
index.css文件中，该文件被导入到我的项目的根目录中。./styles/components.css./styles/utilities.css./styles/index.css然后将
./styles/index.css导入应用的根目录至于这种设置所需的postcss配置，以下是
postcss.config.js的内容sqxo8psd3#
在VsCode中面对这个问题并想出了这个解决方案
Tailwind2.2.16与NextJs12.0.4
1.将以下内容添加到tailwind.config.js
1.在您的项目中添加以下文件css_custom_data.json，并在下面粘贴代码
1.转到vscode（cmd+，）中的settings.json并添加以下规则