自定义 Tailwind CSS 时引用默认颜色 [英] Referencing Default Colors When Customizing Tailwind CSS

问题描述

我正在尝试使用他们的 tailwind.config.js 文件extend tailwind css 的调色板.我的目标是创建一组主要和次要颜色，我可以在设计我的网站时使用它们.我想通过从默认的顺风主题中引用已经存在的颜色来做到这一点.根据文档，我虽然以下方法可行(但它没有):

I am trying to extend the color palette of tailwind css using their tailwind.config.js file. My goal is to create a set of primary and secondary colors that I can use when styling my site. I want to do so by referencing already existing colors from the default tailwind theme. Based on the documentation, I though the following would work (but it does not):

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: []
}

这是问题，在我的样式表中，我有以下内容:

Here is the problem, in my style sheet, I have the following:

.navbar {
  ...
  @apply bg-primary-dark;
  ...
}

我的期望是这会起作用 - 但它不会.我收到一个错误(见下文).

My expectation is that this would work - but it doesn't. I get an error (see below).

知道我做错了什么以及如何解决吗?

Any idea what I am doing wrong and how I can fix it?

谢谢.

错误信息

> 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>

推荐答案

我有同样的问题，新版本目前是 2，我的存根文件对于旧版本工作正常；

经过调查发现默认配置不再包含全彩盘，而是继承自:

I had the same issue with newer version currently is 2, my stub file was working fine for the old version;

After investigating it turns out the default config doesn't hold the full color platte anymore instead of inheriting from:

const { colors } = require('tailwindcss/defaultTheme')

尝试导出整个colors.js文件，如:

const colors = require('tailwindcss/colors')

这对我来说效果很好.

这篇关于自定义 Tailwind CSS 时引用默认颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！