我正在尝试使用extend文件来tailwind.config.js顺风css的调色板。我的目标是创建在样式网站时可以使用的一组主要和辅助颜色。我想通过引用默认顺风主题中已经存在的颜色来做到这一点。基于documentation，我可以执行以下操作（但不可以）：
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
colors: {
primary: {
light: defaultTheme.colors['400'],
default: defaultTheme.colors['500'],
dark: defaultTheme.colors['600']
}
}
}
},
variants: {},
plugins: []
}
这是问题所在，在我的样式表中，我有以下内容：
.navbar {
...
@apply bg-primary-dark;
...
}
我的期望是这会起作用-但这不会。我得到一个错误（见下文）。
有什么主意我在做错什么以及如何解决？
谢谢。
错误消息
> startup-reporter@1.0.0 dev C:\laragon\www\sage\wp-content\themes\startup-reporter
> npm run development
> startup-reporter@1.0.0 development C:\laragon\www\sage\wp-content\themes\startup-reporter
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
98% after emitting SizeLimitsPlugin
ERROR Failed to compile with 2 errors 9:18:34 PM
error in ./src/assets/css/style.css
Syntax Error: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):SyntaxError
(9:3) `@apply` cannot be used with `.bg-primary-dark` because `.bg-primary-dark` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that
`.bg-primary-dark` 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.
7 | .navbar {
8 | width: 100%;
> 9 | @apply bg-primary-dark;
| ^
10 | @apply flex flex-wrap relative;
11 | @apply font-semibold;
error in ./src/assets/css/style.css
Syntax Error: SyntaxError
(9:3) `@apply` cannot be used with `.bg-primary-dark` because `.bg-primary-dark` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that
`.bg-primary-dark` 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.
7 | .navbar {
8 | width: 100%;
> 9 | @apply bg-primary-dark;
| ^
10 | @apply flex flex-wrap relative;
11 | @apply font-semibold;
@ ./src/assets/css/style.css 2:14-150
ERROR in ./src/assets/css/style.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(9:3) `@apply` cannot be used with `.bg-primary-dark` because `.bg-primary-dark` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that
`.bg-primary-dark` 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.
7 | .navbar {
8 | width: 100%;
> 9 | @apply bg-primary-dark;
| ^
10 | @apply flex flex-wrap relative;
11 | @apply font-semibold;
at C:\laragon\www\sage\wp-content\themes\startup-reporter\node_modules\webpack\lib\NormalModule.js:316:20
at C:\laragon\www\sage\wp-content\themes\startup-reporter\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\laragon\www\sage\wp-content\themes\startup-reporter\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\laragon\www\sage\wp-content\themes\startup-reporter\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\laragon\www\sage\wp-content\themes\startup-reporter\node_modules\postcss-loader\src\index.js:207:9
at processTicksAndRejections (internal/process/task_queues.js:93:5)
@ ./src/assets/css/style.css
ERROR in ./src/assets/css/style.css (./node_modules/css-loader??ref--8-2!./node_modules/postcss-loader/src??postcss0!./src/assets/css/style.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(9:3) `@apply` cannot be used with `.bg-primary-dark` because `.bg-primary-dark` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that
`.bg-primary-dark` 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.
7 | .navbar {
8 | width: 100%;
> 9 | @apply bg-primary-dark;
| ^
10 | @apply flex flex-wrap relative;
11 | @apply font-semibold;
@ ./src/assets/css/style.css 2:14-150
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! startup-reporter@1.0.0 development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the startup-reporter@1.0.0 development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\moshe\AppData\Roaming\npm-cache\_logs\2020-03-08T19_18_34_238Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! startup-reporter@1.0.0 dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the startup-reporter@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\moshe\AppData\Roaming\npm-cache\_logs\2020-03-08T19_18_34_295Z-debug.log
PS C:\laragon\www\sage\wp-content\themes\startup-reporter>
答案 0 :(得分：1)
经过调查后，发现默认配置不再保留完整的颜色，而不是继承自：
const { colors } = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')
那对我来说很好。
答案 1 :(得分：-1)
您需要使用@apply .bg-primary-dark;。您在班级名称前缺少.。
希望有帮助。