NextJS - 无法在 Tailwind CSS 中使用自定义颜色
Posted
技术标签:
【中文标题】NextJS - 无法在 Tailwind CSS 中使用自定义颜色【英文标题】：NextJS - Not Able To Use Custom Colors In Tailwind CSS In 【发布时间】：2021-08-13 04:36:39 【问题描述】：我正在尝试使用 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.3 节点版本：16.2.0
【问题讨论】：
【参考方案1】：在扩展主题中，您可以直接调用自定义颜色和/或变量 -- 更新 -- 包括我的整个 tailwind.config.js 文件
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports =
mode: 'jit',
important: true,
purge:
content: [
'./components/**/*.js,ts,jsx,tsx',
'./pages/**/*.js,ts,jsx,tsx'
],
options:
safelist:
standard: ['outline-none']
,
darkMode: 'class',
theme:
extend:
zIndex:
'-10': '-10',
100: '100',
150: '150'
,
maxWidth:
'9xl': '121rem', // 1936px
'8xl': '96rem' // 1536px
,
screens:
xs: '375px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1440px',
'3xl': '1920px'
,
transitionDuration:
0: '0ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms'
,
rotate:
0: '0deg',
45: '45deg',
90: '90deg',
125: '125deg',
180: '180deg',
270: '270deg',
360: '360deg'
,
fontFamily:
header: ['goudy-bookletter-1911', 'serif'],
heady: ['p22-marcel-script-pro', 'sans-serif'],
poppins: ['poppins', 'sans-serif'],
somaRoman: ['neue-haas-grotesk-text', 'sans-serif'],
somaDisplay: ['neue-haas-grotesk-display', 'sans-serif'],
sans: ['Inter', ...defaultTheme.fontFamily.sans]
,
colors:
'reddit-0': 'var(--reddit-0)',
'reddit-1': 'var(--reddit-1)',
'reddit-2': 'var(--reddit-2)',
'reddit-3': 'var(--reddit-3)',
'reddit-4': 'var(--reddit-4)',
'primary-0': 'var(--primary-0)',
'primary-1': 'var(--primary-1)',
'primary-2': 'var(--primary-2)',
'primary-3': 'var(--primary-3)',
'primary-4': 'var(--primary-4)',
'primary-5': 'var(--primary-5)',
'primary-6': 'var(--primary-6)',
'primary-7': 'var(--primary-7)',
'primary-8': 'var(--primary-8)',
'primary-9': 'var(--primary-9)',
'secondary-0': 'var(--secondary-0)',
'secondary-1': 'var(--secondary-1)',
'secondary-2': 'var(--secondary-2)',
'secondary-3': 'var(--secondary-3)',
'secondary-4': 'var(--secondary-4)',
'secondary-5': 'var(--secondary-5)',
'secondary-6': 'var(--secondary-6)',
'secondary-7': 'var(--secondary-7)',
'secondary-8': 'var(--secondary-8)',
'secondary-9': 'var(--secondary-9)',
'secondary-10': 'var(--secondary-10)',
'accents-0': 'var(--accents-0)',
'accents-1': 'var(--accents-1)',
'accents-2': 'var(--accents-2)',
'accents-3': 'var(--accents-3)',
'accents-4': 'var(--accents-4)',
'accents-5': 'var(--accents-5)',
'accents-6': 'var(--accents-6)',
'accents-7': 'var(--accents-7)',
'accents-8': 'var(--accents-8)',
'accents-9': 'var(--accents-9)',
'theme-0': 'var(--theme-0)',
'theme-1': 'var(--theme-1)',
lightBlue:
0: '#E3F8FF',
100: '#B3ECFF',
200: '#81DEFD',
300: '#5ED0FA',
400: '#40C3F7',
500: '#2BB0ED',
600: '#1992D4',
700: '#127FBF',
800: '#0B69A3',
900: '#035388'
,
cyan:
0: '#E0FCFF',
100: '#BEF8FD',
200: '#87EAF2',
300: '#54D1DB',
400: '#38BEC9',
500: '#2CB1BC',
600: '#14919B',
700: '#0E7C86',
800: '#0A6C74',
900: '#044E54'
,
rojo:
0: '#610316',
100: '#8A041A',
200: '#AB091E',
300: '#CF1124',
400: '#E12D39',
500: '#EF4E4E',
600: '#F86A6A',
700: '#FF9B9B',
800: '#FFBDBD',
900: '#FFE3E3'
,
rosado:
0: '#620042',
100: '#870557',
200: '#A30664',
300: '#BC0A6F',
400: '#DA127D',
500: '#E8368F',
600: '#F364A2',
700: '#FF8CBA',
800: '#FFB8D2',
900: '#FFE3EC'
,
amarillo:
0: 'hsl(15, 86%, 30%)',
100: 'hsl(22, 82%, 39%)',
200: 'hsl(29, 80%, 44%)',
300: 'hsl(36, 77%, 49%)',
400: 'hsl(42, 87%, 55%)',
500: 'hsl(44, 92%, 63%)',
600: 'hsl(48, 94%, 68%)',
700: 'hsl(48, 95%, 76%)',
800: 'hsl(48, 100%, 88%)',
900: 'hsl(49, 100%, 96%)'
,
verdeAzulado:
// blueish-green === teal (espanol)
0: 'hsl(170, 97%, 15%)',
100: 'hsl(168, 80%, 23%)',
200: 'hsl(166, 72%, 28%)',
300: 'hsl(164, 71%, 34%)',
400: 'hsl(162, 63%, 41%)',
500: 'hsl(160, 51%, 49%)',
600: 'hsl(158, 58%, 62%)',
700: 'hsl(156, 73%, 74%)',
800: 'hsl(154, 75%, 87%)',
900: 'hsl(152, 68%, 96%)'
,
olive:
50: '#faf9f3',
100: '#f8efbb',
200: '#efdd80',
300: '#d7be69',
400: '#b3912a',
500: '#937215',
600: '#77590e',
700: '#5b430d',
800: '#3e2e0b',
900: '#2a1d09'
,
asparagus:
50: '#f9f9f2',
100: '#f5efc4',
200: '#e7e08c',
300: '#c7bf58',
400: '#959831',
500: '#737a19',
600: '#5c6110',
700: '#48490f',
800: '#31320d',
900: '#211f0a'
,
seagreen:
50: '#f3f6f4',
100: '#dfefeb',
200: '#b8e4d3',
300: '#81c8a8',
400: '#3fa779',
500: '#2c8b52',
600: '#26733c',
700: '#215831',
800: '#183c26',
900: '#11251c'
,
pine:
50: '#f0f6f6',
100: '#d4eff4',
200: '#a4e4e8',
300: '#6cc8cb',
400: '#31a8a8',
500: '#238c85',
600: '#1f736b',
700: '#1c5854',
800: '#153c3d',
900: '#0e262c'
,
steel:
50: '#f3f8f8',
100: '#dcf0f9',
200: '#b4e0f2',
300: '#82c1e0',
400: '#4c9dc9',
500: '#397db2',
600: '#306399',
700: '#284b78',
800: '#1d3356',
900: '#122039'
,
denim:
50: '#f5f9fa',
100: '#e2f0fb',
200: '#c2dbf7',
300: '#96baea',
400: '#6994db',
500: '#5371cc',
600: '#4456b8',
700: '#364095',
800: '#262c6b',
900: '#161c44'
,
royalblue:
50: '#f8fafa',
100: '#eceffa',
200: '#d9d6f6',
300: '#b8b1e9',
400: '#9c88da',
500: '#8364cd',
600: '#6c48b7',
700: '#523693',
800: '#382568',
900: '#20183e'
,
orchid:
50: '#fafafa',
100: '#f3eff8',
200: '#e7d4f1',
300: '#ceacdf',
400: '#bc81c9',
500: '#a55db6',
600: '#8a429b',
700: '#683177',
800: '#482250',
900: '#2a162e'
,
blush:
50: '#fcfbfa',
100: '#f9efed',
200: '#f4d2da',
300: '#e5a8b5',
400: '#dc7a8d',
500: '#ca576c',
600: '#b03c4e',
700: '#892d3a',
800: '#601f27',
900: '#3b1416'
,
chocolate:
50: '#fcfbf8',
100: '#faefdb',
200: '#f4d6b5',
300: '#e5ad83',
400: '#d78056',
500: '#c15f35',
600: '#a54423',
700: '#7f331c',
800: '#592315',
900: '#38160e'
,
redditRed: '#FF4500',
redditNav: '#1A1A1B',
redditSearch: '#272729',
redditBG: '#141415'
,
keyframes:
wiggle:
'0%, 100%': transform: 'rotate(-3deg)' ,
'50%': transform: 'rotate(3deg)'
,
hero:
transform: 'translate3d(0px, 0px, 0px)'
,
animation:
wiggle: 'wiggle 10s ease-in-out infinite',
hero: 'hero 1s ease-in-out infinite',
slowPing: 'pulse 10s cubic-bezier(0, 0, 0.2, 1) infinite'
,
width:
82: '20.5rem',
100: '25rem',
200: '50rem',
'8xl': '96rem'
,
height:
75: '75vh'
,
spacing:
7: '1.75rem',
14: '3.5rem',
18: '4.5rem',
25: '6.25rem',
26: '6.5rem',
28: '7rem',
44: '11rem',
82: '20.5rem',
100: '25rem',
104: '26rem',
156: '39rem'
,
boxShadow:
'outline-2': '0 0 0 2px var(--accents-0)',
'outline-normal': '0 0 0 2px var(--accents-2)',
magical:
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
cardHover:
'0 4px 4.1px rgba(0, 0, 0, 0.012),0 4.9px 5.8px rgba(0, 0, 0, 0.018),0 6.3px 8.4px rgba(0, 0, 0, 0.029),0 8.8px 12.9px rgba(0, 0, 0, 0.05),0 15px 23px rgba(0, 0, 0, 0.11)'
,
lineHeight:
'extra-loose': '2.2'
,
scale:
120: '1.2'
,
// https://tailwindcss.com/docs/font-size#providing-a-default-letter-spacing
fontSize:
xxs: [
'0.50rem',
lineHeight: '0.75rem'
]
,
variants:
padding: [
'responsive',
'group-hover',
'hover',
'focus',
'even',
'odd',
'first',
'last'
],
textColor: [
'responsive',
'group-hover',
'hover',
'focus',
'even',
'first',
'last',
'odd'
],
backgroundColor: [
'responsive',
'group-hover',
'hover',
'focus',
'even',
'first',
'last',
'odd'
],
display: ['responsive', 'hover', 'group-hover'],
visibility: ['responsive', 'hover', 'group-hover'],
transitionDuration: ['responsive', 'hover', 'group-hover'],
transitionTimingFunction: [
'responsive',
'hover',
'focus',
'group-hover'
],
gridColumn: ['responsive', 'hover', 'first', 'odd', 'even'],
extend:
filter: ['responsive', 'hover', 'focus'],
ringWidth: [
'responsive',
'hover',
'active',
'focus',
'group-hover'
],
ringColor: [
'responsive',
'hover',
'active',
'focus',
'group-hover'
],
fontSize: ['responsive', 'last', 'first', 'hover', 'focus'],
stroke: ['responsive', 'hover', 'focus', 'group-hover'],
fill: ['responsive', 'hover', 'focus', 'group-hover'],
gridTemplateColumns: [
'responsive',
'last',
'first',
'hover',
'focus'
],
animation: [
'responsive',
'hover',
'focus',
'group-hover',
'motion-safe',
'motion-reduce'
],
transitionProperty: [
'responsive',
'hover',
'focus',
'motion-safe',
'motion-reduce'
],
transitionDelay: ['responsive', 'hover', 'focus'],
scale: [
'responsive',
'hover',
'focus',
'active',
'group-hover'
],
rotate: [
'responsive',
'hover',
'focus',
'active',
'group-hover'
]
,
plugins: [
require('tailwindcss-line-clamp'),
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio')
]
;
然后，在您的基础层中，您将tailwind.config.js 中定义的任何变量设置为它们对应的 hex/rgb/hsl 值。将基础层导入应用程序的根文件后（如果将 nextjs 与自定义应用程序一起使用，则为 _app.js，否则为 index.js），它将在全局范围内工作
text-olive-300 等非可变颜色将在其旁边显示一个颜色小部件，而text-secondary-0 等 css 变量则不会。
./styles/base.css
@layer base
#__next
display: flex;
flex-direction: column;
min-height: 100vh;
:root
--reddit-0: hsl(240, 2%, 8%);
--reddit-1: hsl(240, 2%, 10%);
--reddit-2: hsl(240, 3%, 16%);
--reddit-3: hsl(16, 100%, 50%);
--primary-0: hsl(209, 61%, 16%);
--primary-1: hsl(211, 39%, 23%);
--primary-2: hsl(209, 34%, 30%);
--primary-3: hsl(209, 28%, 39%);
--primary-4: hsl(210, 22%, 49%);
--primary-5: hsl(209, 23%, 60%);
--primary-6: hsl(211, 27%, 70%);
--primary-7: hsl(210, 31%, 80%);
--primary-8: hsl(212, 33%, 89%);
--primary-9: hsl(210, 36%, 96%);
--secondary-0: #d7be69;
--secondary-1: #486581;
--secondary-2: #9fb3c8;
--accents-0: hsl(195, 7%, 11%);
--accents-1: hsl(140, 2%, 26%);
--accents-2: hsl(0, 0%, 49%);
--accents-3: hsl(0, 0%, 64%);
--accents-4: hsl(0, 1%, 81%);
--accents-5: hsl(0, 0%, 89%);
--accents-6: hsl(50, 21%, 95%);
--theme-0: hsl(210, 24%, 84%);
--theme-1: hsl(209, 28%, 39%);
@apply overflow-x-hidden;
*,
*:before,
*:after
box-sizing: inherit;
/* Remove Safari input shadow on mobile */
textarea,
input:matches([type='email'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='url'])
-webkit-appearance: none;
html
height: 100%;
box-sizing: border-box;
touch-action: manipulation;
font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
/* -webkit-text-size-adjust: none; */
/* text-size-adjust: none; */
html,
body
font-family: var(--font-sans);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--reddit-0);
color: var(--text-accents-6);
body
position: relative;
min-height: 100%;
margin: 0;
scrollbar-width: 10px;
scrollbar-color: var(--secondary-0) var(--accents-7); /* scroll thumb and track */
body::-webkit-scrollbar
display: thin; /* Hide scrollbar for Chrome, Safari and Opera https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp */
width: 10px;
body::-webkit-scrollbar-track
background: var(--accents-7); /* color of the tracking area */
body::-webkit-scrollbar-thumb
background-color: var(
--secondary-0
); /* color of the scroll thumb */
border-radius: 0px; /* roundness of the scroll thumb */
border: 3px var(--secondary-0); /* creates padding around scroll thumb */
a
-webkit-tap-highlight-color: hsla(0, 0%, 0%, 0);
img
/* Don't apply styles to next/image */
@apply m-0;
&.prose
@apply m-0;
.animated
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
.fadeIn
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
@-webkit-keyframes fadeIn
from
opacity: 0;
to
opacity: 1;
@keyframes fadeIn
from
opacity: 0;
to
opacity: 1;
我将每一层的内容分离到样式目录中的单独 css 文件中，然后将它们全部导入到 index.css 文件中，该文件导入到我的项目的根目录中
./styles/components.css
@layer components
.fit
min-height: calc(100vh - 88px);
./styles/utilities.css
@layer utilities
#tsparticles
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
#map
height: 100%;
.skeleton
display: block;
width: 100%;
border-radius: 5px;
background-image: linear-gradient(
270deg,
var(--reddit-0),
var(--reddit-2),
var(--reddit-2),
var(--reddit-0)
);
background-size: 400% 100%;
animation: loading 8s ease-in-out infinite;
@keyframes loading
0%
background-position: 200% 0;
100%
background-position: -200% 0;
.landing-page-pagination-btn
@apply m-3 relative inline-flex items-center px-4 py-2 border border-olive-300 text-sm font-medium rounded-md text-olive-300 bg-redditBG hover:bg-redditSearch;
.tooltip
@apply invisible absolute transition-transform ease-in-out transform-gpu;
.has-tooltip:hover .tooltip
@apply visible z-50 border-collapse rounded-lg bg-opacity-75 translate-x-3 -mt-2 text-xxs bg-redditBG text-opacity-0 my-auto p-2;
./styles/index.css
@import 'tailwindcss/base';
@import './base.css';
@import 'tailwindcss/components';
@import './components.css';
@import 'tailwindcss/utilities';
@import './utilities.css';
然后将./styles/index.css 导入应用的根目录
至于这种设置需要的postcss配置，这里是postcss.config.js的内容
module.exports =
plugins: [
'postcss-import',
'tailwindcss',
'postcss-nesting',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
autoprefixer:
flexbox: 'no-2009'
,
stage: 3,
features:
'custom-properties': false,
'nesting-rules': true
]
]
;
【讨论】：
不，它没有。我可以访问所有默认颜色。它被延长了。我使用白色、黑色、gray-50、gray-900 等，这些都没有在主题扩展下明确列出。darkMode: 'class', theme: extend: //... colors: //... , 【参考方案2】：
为了使用arbitrary value syntax（带有方括号），您需要启用 JIT 模式并确保您使用的是 Tailwind 2.1 或更高版本。这将按需编译 CSS，允许您使用方括号语法并“突破”您的设计系统。
有关 JIT 模式的更多信息，请参阅Tailwind docs。
启用 JIT 模式：
// tailwind.config.js
module.exports =
mode: 'jit', // add this
purge: [
// ...
],
theme:
// ...
// ...
【讨论】：
【参考方案3】：在 VsCode 中遇到这个问题并想出了这个解决方案
Tailwind 2.2.16 与 NextJs 12.0.4
-
将以下内容添加到 tailwind.config.js
module.exports =
mode: 'jit'
-
在您的项目中添加以下文件css_custom_data.json并在下面粘贴代码
"version": 1.1,
"atDirectives": [
"name": "@tailwind",
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
"references": [
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
]
,
"name": "@apply",
"description": "Use @apply to inline any existing utility classes into your own custom CSS.",
"references": [
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
]
,
"name": "@responsive",
"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive \n .alert \n background-color: #E53E3E;\n \n\n```\n",
"references": [
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
]
,
"name": "@screen",
"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm \n /* ... */\n\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) \n /* ... */\n\n```\n",
"references": [
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
]
,
"name": "@variants",
"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus \n .btn-brand \n background-color: #3182CE;\n \n\n```\n",
"references": [
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
]
]
-
进入vscode中的settings.json(cmd+,)，添加如下规则
"css.customData": ["./css_custom_data.json"]
这对我有用?
【讨论】：
以上是关于NextJS - 无法在 Tailwind CSS 中使用自定义颜色的主要内容，如果未能解决你的问题，请参考以下文章
使用 Nextjs Tailwind Emotion 导出项目丢失了 tailwind css 样式
NextJS React Tailwind CSS Navbar 活动样式
Tailwind CSS 样式未应用于 Vercel 上已部署的 NextJs 应用程序