tailwind.config.js

module.exports = {
  content: ['./src/{pages,app,features}/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        blackA: {
          DEFAULT: 'var(--blackA9)',
          1: 'var(--blackA1)',
          2: 'var(--blackA2)',
          3: 'var(--blackA3)',
          4: 'var(--blackA4)',
          5: 'var(--blackA5)',
          6: 'var(--blackA6)',
          7: 'var(--blackA7)',
          8: 'var(--blackA8)',
          9: 'var(--blackA9)',
          10: 'var(--blackA10)',
          11: 'var(--blackA11)',
          12: 'var(--blackA12)',
        },

        whiteA: {
          DEFAULT: 'var(--whiteA9)',
          1: 'var(--whiteA1)',
          2: 'var(--whiteA2)',
          3: 'var(--whiteA3)',
          4: 'var(--whiteA4)',
          5: 'var(--whiteA5)',
          6: 'var(--whiteA6)',
          7: 'var(--whiteA7)',
          8: 'var(--whiteA8)',
          9: 'var(--whiteA9)',
          10: 'var(--whiteA10)',
          11: 'var(--whiteA11)',
          12: 'var(--whiteA12)',
        },

        gray: {
          DEFAULT: 'var(--mauve9)',
          1: 'var(--mauve1)',
          2: 'var(--mauve2)',
          3: 'var(--mauve3)',
          4: 'var(--mauve4)',
          5: 'var(--mauve5)',
          6: 'var(--mauve6)',
          7: 'var(--mauve7)',
          8: 'var(--mauve8)',
          9: 'var(--mauve9)',
          10: 'var(--mauve10)',
          11: 'var(--mauve11)',
          12: 'var(--mauve12)',
        },

        grayA: {
          DEFAULT: 'var(--mauveA9)',
          1: 'var(--mauveA1)',
          2: 'var(--mauveA2)',
          3: 'var(--mauveA3)',
          4: 'var(--mauveA4)',
          5: 'var(--mauveA5)',
          6: 'var(--mauveA6)',
          7: 'var(--mauveA7)',
          8: 'var(--mauveA8)',
          9: 'var(--mauveA9)',
          10: 'var(--mauveA10)',
          11: 'var(--mauveA11)',
          12: 'var(--mauveA12)',
        },

        blue: {
          DEFAULT: 'var(--blue9)',
          1: 'var(--blue1)',
          2: 'var(--blue2)',
          3: 'var(--blue3)',
          4: 'var(--blue4)',
          5: 'var(--blue5)',
          6: 'var(--blue6)',
          7: 'var(--blue7)',
          8: 'var(--blue8)',
          9: 'var(--blue9)',
          10: 'var(--blue10)',
          11: 'var(--blue11)',
          12: 'var(--blue12)',
        },

        green: {
          DEFAULT: 'var(--green9)',
          1: 'var(--green1)',
          2: 'var(--green2)',
          3: 'var(--green3)',
          4: 'var(--green4)',
          5: 'var(--green5)',
          6: 'var(--green6)',
          7: 'var(--green7)',
          8: 'var(--green8)',
          9: 'var(--green9)',
          10: 'var(--green10)',
          11: 'var(--green11)',
          12: 'var(--green12)',
        },

        purple: {
          DEFAULT: 'var(--purple9)',
          1: 'var(--purple1)',
          2: 'var(--purple2)',
          3: 'var(--purple3)',
          4: 'var(--purple4)',
          5: 'var(--purple5)',
          6: 'var(--purple6)',
          7: 'var(--purple7)',
          8: 'var(--purple8)',
          9: 'var(--purple9)',
          10: 'var(--purple10)',
          11: 'var(--purple11)',
          12: 'var(--purple12)',
        },

        red: {
          DEFAULT: 'var(--red9)',
          1: 'var(--red1)',
          2: 'var(--red2)',
          3: 'var(--red3)',
          4: 'var(--red4)',
          5: 'var(--red5)',
          6: 'var(--red6)',
          7: 'var(--red7)',
          8: 'var(--red8)',
          9: 'var(--red9)',
          10: 'var(--red10)',
          11: 'var(--red11)',
          12: 'var(--red12)',
        },

        yellow: {
          DEFAULT: 'var(--yellow9)',
          1: 'var(--yellow1)',
          2: 'var(--yellow2)',
          3: 'var(--yellow3)',
          4: 'var(--yellow4)',
          5: 'var(--yellow5)',
          6: 'var(--yellow6)',
          7: 'var(--yellow7)',
          8: 'var(--yellow8)',
          9: 'var(--yellow9)',
          10: 'var(--yellow10)',
          11: 'var(--yellow11)',
          12: 'var(--yellow12)',
        },

        bronze: {
          DEFAULT: '#CD7F32',
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('tailwindcss-debug-screens'),
  ],
}