tailwind-preset-config-musketeers.js

module.exports = {
  theme: {
    container: {
      center: true,
    },
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    colors: ({ colors }) => ({
      inherit: colors.inherit,
      current: colors.current,
      transparent: colors.transparent,
      black: colors.black,
      white: colors.white,
      lime: colors.lime,
      red: '#FF0000',
      slate: {
        50: '#F8FAFC',
        100: '#F1F5F9',
        200: '#E2E8F0',
        300: '#CBD5E1',
        400: '#94A3B8',
        500: '#64748B',
        600: '#475569',
        700: '#334155',
        800: '#1E293B',
        900: '#0F172A',
      },
      violet: {
        50: '#F5F3FF',
        100: '#EDE9FE',
        200: '#DDD6FE',
        300: '#C4B5FD',
        400: '#A78BFA',
        500: '#8B5CF6',
        600: '#7C3AED',
        700: '#6D28D9',
        800: '#5B21B6',
        900: '#4C1D95',
      },
      pink: {
        50: '#FDF2F8',
        100: '#FCE7F3',
        200: '#FBCFE8',
        300: '#F9A8D4',
        400: '#F472B6',
        500: '#EC4899',
        600: '#DB2777',
        700: '#BE185D',
        800: '#9D174D',
        900: '#831843',
      },
    }),
    fontFamily: {
      sans: ['Poppins', 'sans-serif'],
    },
    fontSize: {
      48: ['48px'],
      40: ['40px'],
      32: ['32px'],
      24: ['24px'],
      20: ['20px'],
      18: ['18px'],
      16: ['16px'],
      14: ['14px'],
      12: ['12px'],
    },
    lineHeight: {
      none: '1',
      tight: '1.25',
      normal: '1.4',
      relaxed: '1.45',
    },
    fontWeight: {
      medium: '500',
      semibold: '600',
      bold: '700',
    },
    borderRadius: {
      default: '8px',
      16: '16px',
      24: '24px',
      38: '38px',
      full: '9999px',
    },
    extend: {
      borderWidth: {
        6: '6px',
      },
      outlineWidth: {
        3: '3px',
        6: '6px',
      },
      spacing: {
        xxs: '4px',
        xs: '8px',
        s: '16px',
        m: '24px',
        l: '32px',
        xl: '48px',
        xxl: '64px',
      },
    },
  },
};