Using the theme helper with Tailwind Intellisence and nesting

[programbo]

I have created a preset for a client that contains an enormous colour palette. Various projects will only use a subset of those colours. I am looking for the best way to reuse those colours and the theme function is posing issues.

const synergy = require('./styles/synergy.theme')
module.exports = {
  presets: [synergy],
  purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
  theme: {
    screens: {},
    colors: theme => ({
      'navy-dark': synergy.theme.colors.navy[80],
      'navy-mid': theme('colors-navy-50'),
      'navy-light': theme('colors-navy-10'),
    }),
    extend: {},
  },
  variants: {},
  plugins: [],
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
}

As you'll see in this preview, the direct reference (synergy.theme.colors.navy[80]) results in a colour preview with Tailwind CSS Intellisense. The correct method (theme('colors-navy-50')) does not work so great.

Additionally, when trying to tidy up the theme file by nesting the colour variants I can only use the direct reference. Using a the theme helper creates an error.

This works ✅

    colors: {
      navy: {
        dark: synergy.theme.colors.navy[80],
      },
    },

This explodes ❌ (error - ./styles/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-6-2!./styles/tailwind.css) RangeError: Maximum call stack size exceeded)

    colors: theme => ({
      navy: {
        dark: theme('colors-navy-80'),
      },
    }),

[adamwathan]

The correct syntax is theme(‘colors.navy.50’), not using dashes.