text: const colorFunction =
    (colorName) =>
    ({ opacityValue }) => {
      if (opacityValue !== undefined) {
        return `rgba(var(${colorName}), ${opacityValue})`;
      }
      return `rgba(var(${colorName}))`;
    };
  
  module.exports = {
    mode: 'jit',
    purge: ['./src/**/*.{js,jsx,ts,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {
        fontFamily: {
          brand: 'Radnika, sans-serif',
          secondary: '"Neue Einstellung"',
        },
        textColor: {
          skin: {
            base: colorFunction('--color-text-base'),
            secondary: colorFunction('--color-text-secondary'),
            brand: colorFunction('--color-secondary'),
          },
        },
        backgroundColor: {
          skin: {
            primary: colorFunction('--color-primary'),
            secondary: colorFunction('--color-secondary'),
            btnSecondary: colorFunction('--color-text-secondary'),
          },
        },
        borderColor: {
          skin: {
            primary: colorFunction('--color-primary'),
            secondary: colorFunction('--color-secondary'),
          },
        },
      },
    },
    variants: {
      extend: {},
    },
    plugins: [],
  };
  