tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
      "./public/index.html",
    ],
    theme: {
      extend: {
        colors: {
          primary: 'var(--primary)',
          secondary: 'var(--secondary)',
          accent: 'var(--accent)',
          light: 'var(--light)',
          dark: 'var(--dark)',
        },
        fontFamily: {
          sans: ['Inter', 'sans-serif'],
        },
        typography: {
          DEFAULT: {
            css: {
              color: 'var(--text)',
              a: {
                color: 'var(--primary)',
                '&:hover': {
                  color: 'var(--secondary)',
                },
              },
              h1: {
                color: 'var(--text)',
              },
              h2: {
                color: 'var(--text)',
              },
              h3: {
                color: 'var(--text)',
              },
              h4: {
                color: 'var(--text)',
              },
              code: {
                color: 'var(--primary)',
                backgroundColor: 'var(--light)',
                padding: '0.25rem 0.5rem',
                borderRadius: '0.25rem',
              },
            },
          },
        },
      },
    },
    plugins: [
      require('@tailwindcss/typography'),
    ],
  };