tailwind.config.js

const colors = require('tailwindcss/colors');

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './lib/*.js.ts'],
  darkMode: 'class',
  theme: {
    fontFamily: {
      head: ['Poppins', 'sans-serif'],
      sans: [
        '"Work Sans"',
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        '"Noto Sans"',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
    },
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            pre: {
              backgroundColor: '#282c34',
            },
          },
        },
        light: {
          css: [
            {
              color: theme('colors.foreground'),
              '[class~="lead"]': {
                color: theme('colors.gray.300'),
              },
              a: {
                color: theme('colors.white'),
              },
              strong: {
                color: theme('colors.white'),
              },
              'ol > li::before': {
                color: theme('colors.foreground'),
              },
              'ul > li::before': {
                backgroundColor: theme('colors.gray.600'),
              },
              hr: {
                borderColor: theme('colors.gray.200'),
              },
              blockquote: {
                color: theme('colors.gray.200'),
                borderLeftColor: theme('colors.gray.600'),
              },
              h1: {
                color: theme('colors.white'),
              },
              h2: {
                color: theme('colors.white'),
              },
              h3: {
                color: theme('colors.white'),
              },
              h4: {
                color: theme('colors.white'),
              },
              'figure figcaption': {
                color: theme('colors.foreground'),
              },
              code: {
                color: theme('colors.white'),
              },
              'a code': {
                color: theme('colors.white'),
              },
              pre: {
                color: theme('colors.gray.200'),
                backgroundColor: '#282c34',
              },
              thead: {
                color: theme('colors.white'),
                borderBottomColor: theme('colors.foreground'),
              },
              'tbody tr': {
                borderBottomColor: theme('colors.gray.600'),
              },
            },
          ],
        },
      }),
      colors: {
        background: ({ opacityValue }) =>
          opacityValue ? `rgba(var(--background), ${opacityValue})` : `rgb(var(--background))`,
        foreground: ({ opacityValue }) =>
          opacityValue ? `rgba(var(--foreground), ${opacityValue})` : `rgb(var(--foreground))`,
        headings: ({ opacityValue }) =>
          opacityValue ? `rgba(var(--headings), ${opacityValue})` : `rgb(var(--headings))`,
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
};