tailwind.config.js

const { fontFamily } = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
  mode: 'jit',
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  darkMode: ['class', '[data-theme="dark"]'],
  theme: {
    container: {
      center: true,
    },
    extend: {
      colors: {
        primary: {
          ...colors.blue,
          DEFAULT: colors.blue['500'],
        },
        gray: {
          50: '#ffffff',
          100: '#e6e6e6',
          200: '#cccccc',
          300: '#b3b3b3',
          400: '#999999',
          500: '#808080',
          600: '#666666',
          700: '#4c4c4c',
          800: '#333333',
          900: '#191919',
        },
      },
      fontFamily: {
        sans: ['Inter', ...fontFamily.sans],
      },
      typography: theme => ({
        DEFAULT: {
          css: {
            blockquote: {
              borderLeftColor: theme('colors.primary.400'),
            },
            'blockquote p:first-of-type::before': false,
            'blockquote p:last-of-type::after': false,
          },
        },
      }),
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
};