tailwind.config.js

module.exports = {
  darkMode: 'class',
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
    defaultLineHeights: true,
    standardFontWeights: true,
  },
  purge: {
    content: [
      './src/**/*.tsx',
      './src/**/*.css',
      './css/**/*.css',
      './pages/**/*.tsx',
      './pages/**/*.css',
      './src/shared/components/Button/getButtonClassName.ts',
    ],
    options: {
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: [
        /^fa-/,
        /^svg-inline--fa/,
        'svg:not(:root).svg-inline--fa',
        '__next',
      ],
    },
  },
  theme: {
    extend: {
      spacing: {
        72: '18rem',
        84: '21rem',
        96: '24rem',
      },
      fontFamily: {
        sans:
          "'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
      },
      colors: {
        primary: {
          50: '#f8fafb',
          100: '#f2f6f8',
          200: '#e1e8f1',
          300: '#ccd2e8',
          400: '#a7aada',
          500: '#7a80c6',
          600: '#575ba5',
          700: '#424680',
          800: '#32365c',
          900: '#272b47',
        },
        pinkGray: {
          100: '#e3e3e8',
          200: '#C3BDC7',
          300: '#B9B2BD',
          400: '#AEA7B4',
          500: '#9C92A3',
          600: '#908698',
          700: '#726779',
          800: '#5D5463',
          900: '#3E3842',
        },
        seagreen: {
          50: '#f6faf9',
          100: '#eef7f2',
          200: '#d7efde',
          300: '#b6e0c5',
          400: '#75c599',
          500: '#3fa56a',
          600: '#2d834a',
          700: '#2b673f',
          800: '#264e36',
          900: '#1f3e2e',
        },
        sepia: {
          50: '#fbfbfa',
          100: '#f9f7f3',
          200: '#f2e8e0',
          300: '#ead1c5',
          400: '#dda693',
          500: '#cc7c5f',
          600: '#a6563d',
          700: '#764133',
          800: '#52312c',
          900: '#3d2725',
        },
        'magic-mint': '#A5F8D3',
        'oxford-blue': '#0B132B',
        'space-cadet': '#1C2541',
        'mimi-pink': '#EFCFE3',
        'schoenwald-mint': '#198b71',
      },
    },
  },
  variants: {
    borderColor: ['responsive', 'focus-within', 'hover', 'focus', 'dark'],
    textDecoration: [
      'responsive',
      'hover',
      'focus',
      'focus-visible',
      'group-hover',
      'group-focus',
    ],
    extend: {
      ringWidth: ['focus-visible'],
      ringColor: ['focus-visible'],
      ringOffsetWidth: ['focus-visible'],
      ringOffsetColor: ['focus-visible'],
    },
  },
  plugins: [],
};