NextJS - 无法在 Tailwind CSS 中使用自定义 Colors
[英]NextJS - Not Able To Use Custom Colors In Tailwind CSS In
问题描述
I'm trying to use NextJs with Tailwinds CSS to make a project.
我正在尝试将 NextJs 与 Tailwinds CSS 一起使用来制作项目。 However, whenever I try to use a custom color for the background color it throws this error:但是，每当我尝试为背景颜色使用自定义颜色时，它都会引发此错误：
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 | }
Code代码
index.js索引.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 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 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: [],
};
System Info:系统信息：
OS: macOS BigSur 11.3 Node Version: 16.2.0操作系统：macOS BigSur 11.3 节点版本：16.2.0
3 个解决方案
解决方案1
1 2021-05-24 22:15:34
inside of extended theme, you can call custom colors and/or variables directly -- UPDATE -- included my entire tailwind.config.js file tailwind.config.js在扩展主题中，您可以直接调用自定义 colors 和/或变量 -- 更新 -- 包括我的整个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')
]
};
Then, in your base layer you set any variables defined in tailwind.config.js to their corresponding hex/rgb/hsl values.然后，在您的基础层中，将tailwind.config.js中定义的任何变量设置为它们对应的 hex/rgb/hsl 值。 Once you import the base layer into the root file of your app (_app.js if using nextjs with a custom app, else index.js), it will work globally将基础层导入应用程序的根文件后（如果将 nextjs 与自定义应用程序一起使用，则为 _app.js，否则为 index.js），它将在全局范围内工作
The non-variable colors such as text-olive-300 will display a color widget next to them whereas the css variables such as text-secondary-0 will not.非变量 colors（例如text-olive-300将在它们旁边显示一个颜色小部件，而 css 变量（例如text-secondary-0不会。
./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;
}
}
}
I separate the contents of each layer into individual css files within a styles directory then import them all into an index.css file which is imported into the root of my projects我将每一层的内容分成 styles 目录中的单独 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';
Then import ./styles/index.css into the root of your app然后将./styles/index.css导入应用的根目录
As for the postcss config required for this kind of setup, here are the contents of postcss.config.js至于这种设置所需的 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
}
}
]
]
};
解决方案2
1 2021-05-24 23:09:40
In order to use the arbitrary value syntax (with the square brackets), you need to enable JIT mode and ensure you are on Tailwind 2.1 or greater.为了使用任意值语法（带有方括号），您需要启用 JIT 模式并确保您使用的是 Tailwind 2.1 或更高版本。 This will compile the CSS on-demand, which allows you to use the square bracket syntax and "break out" of your design system.这将按需编译 CSS，它允许您使用方括号语法并“突破”您的设计系统。
See the Tailwind docs for more info on JIT mode.有关 JIT 模式的更多信息，请参阅Tailwind 文档。
To enable JIT mode:要启用 JIT 模式：
// tailwind.config.js
module.exports = {
mode: 'jit', // add this
purge: [
// ...
],
theme: {
// ...
}
// ...
}
解决方案3
1 2021-07-07 12:27:47
Update your tailwind.config.js file更新您的tailwind.config.js文件
Add (Just In Time) mode添加（及时）模式
module.exports = {
mode: 'jit', // Add Just In Time Mode
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
解决方案4
0 2021-11-26 07:51:10
Faced this issue in VsCode and came up with this solution在 VsCode 中遇到这个问题并想出了这个解决方案
Tailwind 2.2.16 with NextJs 12.0.4带有 NextJs 12.0.4的 Tailwind 2.2.16
- Add the following to tailwind.config.js将以下内容添加到tailwind.config.js
module.exports = {
mode: 'jit'
}
- Add the following file in your project css_custom_data.json and paste code below在您的项目中添加以下文件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"
}
]
}
]
}
- Go to settings.json in vscode (cmd+,) and add the following rule Go 到 settings.json 在 vscode (cmd+,) 并添加以下规则
"css.customData": ["./css_custom_data.json"]
This worked for me这对我有用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
无法在 scss 文件 tailwind nextjs 项目的 @apply 中使用自定义类？ - not able to use custom classes in @apply in scss file tailwind nextjs project?
如何在我的顺风预设中使用自定义 CSS colors？ - How to use custom CSS colors in my tailwind preset?
Tailwind css - 使用 className 自定义间距值作为 tailwind 配置的变量 - Tailwind css - use className custom spacing value as variable for tailwind config
Tailwind CSS：如何在填充中使用自定义百分比？ - Tailwind CSS: How to use custom percentages in padding?
nextjs 应用程序上的 Tailwind CSS 响应行为 - Tailwind CSS responsive behavior on nextjs app
无法在 css 中使用此自定义字体 - Not able to use this custom font in css
如何使用 Nextjs 和 tailwind 响应式布局？ - How to use layout responsive with Nextjs and tailwind?
Tailwind CSS - 扩展 Colors - 命名颜色不同？ - Tailwind CSS - Extend Colors - Named Color Different?
Django顺风自定义任意颜色不起作用 - Django tailwind custom arbitrary colors not working
自定义 CSS 支持 NextJS - Custom CSS Support for NextJS
相关标签