title: Referencing Default Colors When Customizing Tailwind CSS
body: <p>I am trying to <code>extend</code> the color palette of tailwind css using their <code>tailwind.config.js</code> 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 <a href="https://tailwindcss.com/docs/theme/#referencing-the-default-theme" rel="noreferrer">documentation</a>, I though the following would work (but it does not):</p>
  
  <pre><code>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: []
  }
  
  </code></pre>
  
  <p>Here is the problem, in my style sheet, I have the following:</p>
  
  <pre><code>.navbar {
    ...
    @apply bg-primary-dark;
    ...
  }
  </code></pre>
  
  <p>My expectation is that this would work - but it doesn't.  I get an error (see below).  </p>
  
  <p>Any idea what I am doing wrong and how I can fix it?</p>
  
  <p>Thanks.</p>
  
  <p><strong>ERROR MESSAGE</strong></p>
  
  <pre><code>&gt; startup-reporter@1.0.0 dev C:\laragon\www\sage\wp-content\themes\startup-reporter
  &gt; npm run development
  
  
  &gt; startup-reporter@1.0.0 development C:\laragon\www\sage\wp-content\themes\startup-reporter
  &gt; 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%;
  &gt;  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%;
  &gt;  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%;
  &gt;  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%;
  &gt;  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&gt;
  </code></pre>