Upgrading to TW 2 results in @apply error for custom palette colour class

[harrygr]

I've just upgraded to Tailwind 2 and I'm stuck with this error.

Syntax error: /path/to/main.css The border-foo class does not exist, but border-none does. If you're sure that border-foo 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. (32:26)

It relates to this block in my main.css

.toggle-switch input[type='checkbox']:checked ~ span::before {
  left: calc(100% - 1.5rem);
  @apply bg-grey-lighter border-foo;
}

In my tailwind.config.js I have the following defining my custom colour palette:

module.exports = {
  theme: {
    colors: {
      foo: {
        default: '#6F4CFF'
        100: '#F1EDFF',
        200: '#DBD2FF',
   // rest of config

It seems like when I remove the offending line the classes work when used in the rendered html.

I'm using Tailwind with an ejected CRA so am using postcss 8 and autoprefixer 10. The relevant bit of webpack config looks like:

{
  loader: require.resolve('postcss-loader'),
  options: {
    postcssOptions: {
      ident: 'postcss',
      plugins: [
        require('tailwindcss'),
        require('autoprefixer')
      ],
    },
  },
},

This was working fine with Tailwind 1. Any ideas why it's now broken?

Thanks for the amazing library.

[simonswiss]

Hey!

In Tailwind 2.0, the default keyword has been updated to DEFAULT. Since you have the lowercase default in your colors object, it would generate the foo-default color class.

Try and update that to DEFAULT like so - it should fix your issue:

module.exports = {
  theme: {
    colors: {
      foo: {
-        default: '#6F4CFF'
+        DEFAULT: '#6F4CFF'
        100: '#F1EDFF',
        200: '#DBD2FF',
   // rest of config

[harrygr]

Amazing! thanks. I should've read the upgrade guide more carefully. It looks like it's there but I clearly missed it

[feugy]

Hello @simonswiss.
I'm facing the same problem, with a slightly different setup:

• svelte@3.37.0
• snowpack@3.2.2
• tailwind@2.1.1
• postcss@8.2.8

Here's my theme

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.svelte'],
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#FFC259',
          DEFAULT: '#F59E0B',
          dark: '#A36700'
        }
      }
    }
  },
  variants: {},
  plugins: []
}

Then the component using the new color:

<style type="postcss">
  nav {
    @apply w-full py-2 px-4 border-b text-center border-primary;
  }

And the final error is

...src/components/Toolbar.svelte:3:50: The border-primary class does not exist. If you're sure that border-primary 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.

Using the utility class in the markup works fine, the limitation is only when applying it.

Any ideas are welcome!