tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.js',
    './src/**/*.svelte'
  ],
  theme: {
    extend: {},
    screens: {
      sm: '576px',
      md: '768px',
      lg: '1024px',
      xl: '1440px',
    },
    spacing: {
      px: '1px',
      0: '0px',
      1: '0.25rem',
      2: '0.5rem',
      3: '0.75rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      8: '2rem',
      10: '2.5rem',
      12: '3rem',
      16: '4rem',
      20: '5rem',
      30: '10rem',
      '1/2': '50%',
      '1/3': '33.3%',
      '1/4': '25%',
      '2/3': '66.7%',
      '3/4': '75%',
    },
    fontSize: {
      inherit: 'inherit',
      'base-sm': '12px',
      'base-md': '14px',
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      md: '1.25rem',
      lg: '1.75rem',
      xl: '2rem',
    },
    lineHeight: {
      inherit: 'inherit',
      none: 0,
      base: 1,
      1: 1.15,
      2: 1.3,
    },
    colors: {
      white: '#FFFFFF',
      black: '#000000',
      gray: {
        900: '#121212',
        800: '#252525',
        700: '#3B3B3B',
        600: '#666666',
        500: '#929292',
        400: '#BEBEBE',
        300: '#D3D3D3',
        200: '#E9E9E9',
        100: '#F4F4F4',
      },
      theme: {
        1: '#e63946',
        2: '#f1faee',
        3: '#a8dadc',
        4: '#457b9d',
        5: '#1d3557',
      },
      transparent: 'transparent',
    },
    borderRadius: {
      none: '0px',
      DEFAULT: '0.25rem',
    },
  },
  plugins: [],
}