Tailwind Color Options broken when using 'DEFAULT'

[Wolfgang]

Hey there,

Also there seems to be a problem with the ‘DEFAULT’ Option … normally the configuration below works just fine in tailwind config file (generating something like .bg-primary) but it seems that in Cwicly this option doesn’t work. The color is generated, but I cannot select it for some reason.

Also there was a problem that i couldn’t select any of the other colors first, refreshing the page did the job then. But on the primary color the problem still exists.

module.exports = {
  darkMode: 'class',
  theme: {
    screens: cwiclyScreens,
    extend: {
      colors: {
        ...cwiclyColors,
        'primary': {
            '50': '#f2f7fc', 
            '100': '#e8f1fa', 
            '200': '#c5d6f0', 
            '300': '#a3b8e6', 
            '400': '#6a7dd4', 
            '500': '#353ac0', 
            'DEFAULT' : '#353ac0',
            '600': '#2b30ad', 
            '700': '#1e228f', 
            '800': '#141773', 
            '900': '#0b0d57', 
            '950': '#040538'
        }        
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  corePlugins: {
    preflight: false,
  },
  plugins: [],
}

[michelyweb]

For me it’s working, but the Color is moved to the bottom and named “primary” in my case:

[yankiara]

@Wolfgang

Also there was a problem that i couldn’t select any of the other colors first, refreshing the page did the job then. But on the primary color the problem still exists.

I confirm this select issue when extending colors via TW config file: you need to save and refresh page in order to be able to select an extended color.

My guess is that when editing the TW config file, Cwicly continuously interprets the file, and since JSON syntax is wrong until you finish editing (except for some perfect copy-paste ), a lot of javascript errors are thrown in the console and might corrupt the editor behavior.
But I could be totally wrong!

[yankiara]

@michelyweb

For me it’s working, but the Color is moved to the bottom and named “primary” in my case:

Same for me

And after testing, I can confirm that when copy-pasting the right block directly in my config file without manually editing it, everything works perfectly: I can select any extended color without refreshing.

So when manually editing TW config file, it seems that some JS error corrupts the editor.

[Araminta]

Hi @Wolfgang,

Thank you for reporting this!

As @yankiara and @michelyweb pointed out, the colours do appear but require a page reload to be selectable.
Rest assured, we’ll address this as soon as possible.

Apologies for the inconvenience.

[Araminta]

Once again, thank you for bringing this to our attention @Wolfgang!

Adding custom colours to the config should no longer require a page reload with 1.4.1:

@Louis

• Fix: Tailwind → when adding/modifying global colours, the Tailwind configuration would sometimes require a reload to correctly process the information in the Cwicly UI

Kindly let me know if this is the case on your end.

Thank you in advance.