tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      container: {
        center: true,
        padding: '1rem',
      },
      colors: {
        black: '#000000',
        white: '#FFFFFF',
        zinc: {
          700: '#3f3f46',
          800: '#27272a',
          900: '#18181b',
        },
      },
      fontSize: {
        sm: ['14px', '20px'],
        base: ['16px', '24px'],
        lg: ['20px', '28px'],
      },
      maxWidth: {
        '1000': '1000px',
        '2xl': '42rem',
      },
      width: {
        '414': '414px',
        '564': '564px',
      },
      height: {
        '538': '538px',
      },
      borderRadius: {
        '15': '15px',
        '26': '26px',
        'xl': '1rem',
        '2xl': '1.5rem',
      },
      padding: {
        '23': '23px',
        '25': '25px',
      },
      spacing: {
        '15': '15px',
        '23': '23px',
        '25': '25px',
        '50': '50px',
      },
      fontFamily: {
        sans: ['var(--font-inter)'],
      },
    },
  },
  plugins: [],
}