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)
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)
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)
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
为了使用任意值语法(带有方括号),您需要启用 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)
| 归档时间: |
|
| 查看次数: |
12821 次 |
| 最近记录: |