klz-cables.com/tailwind.config.cjs

/* eslint-disable no-undef */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Custom Breakpoints for KLZ Cables
      screens: {
        'xs': '475px',
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1400px',
        '3xl': '1600px',
      },
      colors: {
        // Brand Colors
        primary: {
          DEFAULT: '#011dff',
          dark: '#000e7a',
          light: '#3344cc',
        },
        secondary: {
          DEFAULT: '#82ed20',
          light: '#9bf14d',
          dark: '#6bc21a',
        },
        accent: {
          DEFAULT: '#82ed20',
          light: '#9bf14d',
        },
        neutral: {
          DEFAULT: '#f8f9fa',
          light: '#ffffff',
          dark: '#263336',
          black: '#0a0a0a',
        },
        // Text Colors
        text: {
          primary: '#1a1a1a',
          secondary: '#6c757d',
          light: '#adb5bd',
        },
        // Semantic Colors
        success: '#28a745',
        warning: '#ffc107',
        danger: '#dc3545',
        info: '#17a2b8',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
        heading: ['Inter', 'system-ui', 'sans-serif'],
        body: ['Inter', 'system-ui', 'sans-serif'],
      },
      // Standard Fluid Typography
      // Responsive scaling is handled globally via the html selector percentage in globals.css
      fontSize: {
        'xs': ['0.75rem', { lineHeight: '1.6' }],
        'sm': ['0.875rem', { lineHeight: '1.6' }],
        'base': ['1rem', { lineHeight: '1.7' }],
        'lg': ['1.125rem', { lineHeight: '1.7' }],
        'xl': ['1.25rem', { lineHeight: '1.6' }],
        '2xl': ['1.5rem', { lineHeight: '1.5' }],
        '3xl': ['1.875rem', { lineHeight: '1.4' }],
        '4xl': ['2.25rem', { lineHeight: '1.3' }],
        '5xl': ['3rem', { lineHeight: '1.25' }],
        '6xl': ['3.75rem', { lineHeight: '1.2' }],
        '7xl': ['4.5rem', { lineHeight: '1.15' }],
        '8xl': ['6rem', { lineHeight: '1.1' }],
      },
      fontWeight: {
        regular: '400',
        medium: '500',
        semibold: '600',
        bold: '700',
        extrabold: '800',
      },
      borderRadius: {
        'sm': '0.25rem',
        'DEFAULT': '0.5rem',
        'lg': '0.75rem',
        'xl': '1rem',
        '2xl': '1.5rem',
      },
      boxShadow: {
        'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
        'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
      },
      container: {
        center: true,
        padding: {
          DEFAULT: '1rem',
          sm: '1.5rem',
          md: '2rem',
          lg: '2.5rem',
          xl: '3rem',
          '2xl': '4rem',
        },
        screens: {
          xs: '475px',
          sm: '640px',
          md: '768px',
          lg: '1024px',
          xl: '1280px',
          '2xl': '1400px',
          '3xl': '1600px',
        },
      },
      maxWidth: {
        'xs': '20rem',
        'sm': '24rem',
        'md': '28rem',
        'lg': '32rem',
        'xl': '36rem',
        '2xl': '42rem',
        '3xl': '48rem',
        '4xl': '56rem',
        '5xl': '64rem',
        '6xl': '72rem',
      },
      zIndex: {
        '0': '0',
        '10': '10',
        '20': '20',
        '30': '30',
        '40': '40',
        '50': '50',
        'auto': 'auto',
      },
    },
  },
  plugins: [
    // Custom plugin for responsive utilities
    function ({ addUtilities }) {
      const newUtilities = {
        // Touch target utilities
        '.touch-target': {
          minHeight: '44px',
          minWidth: '44px',
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
        },
        // Mobile-first responsive utilities
        '.mobile-hidden': {
          '@media (max-width: 767px)': {
            display: 'none !important',
          },
        },
        '.tablet-hidden': {
          '@media (min-width: 768px) and (max-width: 1023px)': {
            display: 'none !important',
          },
        },
        '.desktop-hidden': {
          '@media (min-width: 1024px)': {
            display: 'none !important',
          },
        },
        '.mobile-only': {
          '@media (min-width: 768px)': {
            display: 'none !important',
          },
        },
        '.tablet-only': {
          '@media (max-width: 767px), (min-width: 1024px)': {
            display: 'none !important',
          },
        },
        '.desktop-only': {
          '@media (max-width: 1023px)': {
            display: 'none !important',
          },
        },
        // Fluid spacing utilities
        '.fluid-spacing': {
          padding: 'clamp(1rem, 3vw, 3rem)',
          margin: 'clamp(0.5rem, 2vw, 2rem)',
        },
        // Responsive text alignment
        '.text-start-mobile': {
          '@media (max-width: 767px)': {
            textAlign: 'left',
          },
        },
        '.text-center-mobile': {
          '@media (max-width: 767px)': {
            textAlign: 'center',
          },
        },
        '.text-end-mobile': {
          '@media (max-width: 767px)': {
            textAlign: 'right',
          },
        },
        // Mobile-optimized grid
        '.grid-mobile-stacked': {
          '@media (max-width: 767px)': {
            display: 'flex',
            flexDirection: 'column',
            gap: '1rem',
          },
        },
        // Safe area padding for mobile notch
        '.safe-area-p': {
          paddingTop: 'env(safe-area-inset-top)',
          paddingBottom: 'env(safe-area-inset-bottom)',
          paddingLeft: 'env(safe-area-inset-left)',
          paddingRight: 'env(safe-area-inset-right)',
        },
      };

      addUtilities(newUtilities, ['responsive', 'hover', 'focus']);
    },
  ],
}