tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {
          fontFamily: {
            sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
          },
          colors: {
            red: {
              '50': '#ffebee',
              '100': '#ffcdd2',
              '200': '#ef9a9a',
              '300': '#e57373',
              '400': '#ef5350',
              '500': '#f44336',
              '600': '#e53935',
              '700': '#d32f2f',
              '800': '#c62828',
              '900': '#b71c1c',
              'accent-100': '#ff8a80',
              'accent-200': '#ff5252',
              'accent-300': '#C22B33',
              'accent-400': '#ff1744',
              'accent-700': '#d50000',
            },
            'deep-purple': {
              50: '#ede7f6',
              100: '#d1c4e9',
              200: '#b39ddb',
              300: '#9575cd',
              400: '#7e57c2',
              500: '#673ab7',
              600: '#5e35b1',
              700: '#512da8',
              800: '#4527a0',
              900: '#311b92',
              'accent-100': '#b388ff',
              'accent-200': '#7c4dff',
              'accent-400': '#651fff',
              'accent-700': '#6200ea',
            },
          },
          spacing: {
            '7': '1.75rem',
            '9': '2.25rem',
            '28': '7rem',
            '80': '20rem',
            '96': '24rem',
          },
          height: {
            '1/2': '50%',
          },
          scale: {
            '30': '.3',
          },
          boxShadow: {
            outline: '0 0 0 3px rgba(101, 31, 255, 0.4)',
          },
        },
    },
    variants: {
        scale: ['responsive', 'hover', 'focus', 'group-hover'],
        textColor: ['responsive', 'hover', 'focus', 'group-hover'],
        opacity: ['responsive', 'hover', 'focus', 'group-hover'],
        backgroundColor: ['responsive', 'hover', 'focus', 'group-hover'],
    },
    plugins: [],
}