Как использовать функцию theme() в конфигурации (попутный ветер)

Question

Я пытаюсь создать 1 многоразовую переменную промежутка, которую я могу использовать везде, где у меня есть несколько кнопок рядом друг с другом. Вместо использования gap-3 Я хочу просто использовать gap-buttons

      module.exports = {
  theme: {
    extend: {
      gap: {
        buttons: theme(theme.gap.3),
      },
    },
  },
};

Я получаю ошибку Maximum call stack size exceeded. Я пытался buttons: (theme) => theme(theme.gap.3)тоже не вышло. Тоже с цветами не работает ...

      module.exports = {
  theme: {
    extend: {
      colors: {
       alert: theme => theme('colors.red')
      }
    },
  },
};

Answer 1

У меня есть такой код в одном из моих проектов, не уверен, что он может помочь (это попутный ветер v1, без extend)

      borderColor: (theme) => ({
  ...theme('colors'),
  default: theme('colors.gray.300', 'currentColor'),
}),

Это будет выглядеть так с вашим кодом

      colors: (theme) => ({
  alert: theme('colors.red')
})

Answer 2

Вы ссылаетесь на функцию внутри нее, создавая бесконечный цикл и, таким образом, превосходя стек вызовов js. Функция вызывает функцию внутриcolorsфункции. Понятно? Это циклическая ссылка. Попробуйте войтиthemeи вы увидите.

Вам нужна ссылка на значения по умолчанию. Вам просто нужно импортировать их следующим образом:

      import { fontFamily, fontSize } from "tailwindcss/defaultTheme";

Или используяrequire, если вы используете cjs.

Обратной стороной является то, что он не будет обновляться соответствующим образом, если вы переопределите какое-либо из значений по умолчанию. Если вам нужно что-то подобное, поищите плагины, они могут соответствовать вашим потребностям. Что-то вроде этого:

          addUtilities({
        ".gap-buttons": {
            "gap": theme('gap.3'),
        },
    });