[Tailwind 2.0] - Nested Object Color Syntax

[hagmic]

Describe the problem:

The current Nested Object Syntax documentation states that the default key is special, meaning "no modifier". Given the config below, Tailwind 1.9 generates color classes in the form: text-primary bg-primary, but with Tailwind 2.0 they are generated as text-primary-default bg-primary-default.

Is this a misunderstanding on my part, or a regression in Tailwind 2.0?

module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {
      colors: {
        primary: {
          default: '#2993E5',
          lighter: '#E5F2FC',
          darker: '#2B6A9C'
        }
      }
    },
  },
  variants: {},
  plugins: [],
}

Link to a minimal reproduction:

https://github.com/hagmic/tw-colors

This reproduction contains CSS files generated witth npx tailwindcss build styles.css -o output.css. One with 1.9.6 and the other with next.

[adamwathan]

Hey! In Tailwind 2.0 all special usage of default has been changed to DEFAULT to make it less ambiguous:

#2580

[jamaltun]

Can i use this syntax for font sizes too ?
Like that;
fontSize: { h1: [ '2.98rem', { lineHeight: '3.5rem', letterSpacing: '0%', fontWeight: '900' }, ], h2: [ '2.25rem', { lineHeight: '2.75rem', letterSpacing: '0%', fontWeight: '800' }, ], h3: [ '2rem', { lineHeight: '2.5rem', letterSpacing: '0%', fontWeight: '800' }, ], h4: [ '1.7rem', { lineHeight: '2.1rem', letterSpacing: '0%', fontWeight: '800' }, ], h5: [ '1.44rem', { lineHeight: '1.9rem', letterSpacing: '0%', fontWeight: '800' }, ], h6: [ '1.2rem', { lineHeight: '1.7rem', letterSpacing: '0%', fontWeight: '800' }, ], body: { xl: [ '1.5rem', { lineHeight: '2rem', letterSpacing: '0%', fontWeight: '500' }, ], lg: [ '1.1rem', { lineHeight: '1.6rem', letterSpacing: '0%', fontWeight: '500' }, ], md: [ '1rem', { lineHeight: '1.5rem', letterSpacing: '0%', fontWeight: '500' }, ], rg: [ '0.9rem', { lineHeight: '1.3rem', letterSpacing: '0%', fontWeight: '500' }, ], sm: [ '0.7rem', { lineHeight: '1.2rem', letterSpacing: '0%', fontWeight: '500' }, ], xs: [ '0.6rem', { lineHeight: '1.1rem', letterSpacing: '0%', fontWeight: '500' }, ], }, },