4c0aad0e06
✅ Implemented: - Mobile-first Tailwind breakpoints (xs: 375px → 2xl: 1536px) - Tablet-optimized for cultivation floor (md: 768px primary target) - Touch-friendly spacing (44px minimum tap targets) - Mobile-optimized font sizes (16px minimum to prevent iOS zoom) - Touch-friendly base styles (smooth scrolling, tap highlights) - Added 777 Wolfpack team logo for splash screen �� Mobile-First Features: - Responsive container padding (1rem mobile → 3rem desktop) - Touch target utilities (touch: 44px, touch-lg: 56px) - iOS-optimized inputs (prevent zoom, smooth scrolling) - Webkit touch improvements 🎨 Branding: - Added 777 Wolfpack logo to /frontend/public/assets/ - Team name: 777 Wolfpack (initial cultivation team users) ⏭️ Next: Mobile navigation + responsive page layouts
90 lines
3.3 KiB
JavaScript
90 lines
3.3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
// Mobile-first breakpoints optimized for cultivation floor tablets
|
|
screens: {
|
|
'xs': '375px', // Large phones
|
|
'sm': '640px', // Small tablets portrait
|
|
'md': '768px', // Tablets portrait (iPad)
|
|
'lg': '1024px', // Tablets landscape / small desktop
|
|
'xl': '1280px', // Desktop
|
|
'2xl': '1536px', // Large desktop
|
|
},
|
|
container: {
|
|
center: true,
|
|
padding: {
|
|
DEFAULT: '1rem',
|
|
sm: '1.5rem',
|
|
md: '2rem',
|
|
lg: '3rem',
|
|
},
|
|
screens: {
|
|
"2xl": "1400px",
|
|
},
|
|
},
|
|
extend: {
|
|
colors: {
|
|
border: "hsl(var(--border))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
background: "hsl(var(--background))",
|
|
foreground: "hsl(var(--foreground))",
|
|
primary: {
|
|
DEFAULT: "#10b981", // Emerald 500 (cannabis green)
|
|
foreground: "hsl(var(--primary-foreground))",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "#3b82f6", // Blue 500
|
|
foreground: "hsl(var(--secondary-foreground))",
|
|
},
|
|
destructive: {
|
|
DEFAULT: "hsl(var(--destructive))",
|
|
foreground: "hsl(var(--destructive-foreground))",
|
|
},
|
|
muted: {
|
|
DEFAULT: "hsl(var(--muted))",
|
|
foreground: "hsl(var(--muted-foreground))",
|
|
},
|
|
accent: {
|
|
DEFAULT: "hsl(var(--accent))",
|
|
foreground: "hsl(var(--accent-foreground))",
|
|
},
|
|
popover: {
|
|
DEFAULT: "hsl(var(--popover))",
|
|
foreground: "hsl(var(--popover-foreground))",
|
|
},
|
|
card: {
|
|
DEFAULT: "hsl(var(--card))",
|
|
foreground: "hsl(var(--card-foreground))",
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
},
|
|
// Touch-friendly spacing
|
|
spacing: {
|
|
'touch': '44px', // Minimum touch target size
|
|
'touch-lg': '56px', // Large touch target
|
|
},
|
|
// Mobile-optimized font sizes
|
|
fontSize: {
|
|
'xs': ['0.75rem', { lineHeight: '1rem' }],
|
|
'sm': ['0.875rem', { lineHeight: '1.25rem' }],
|
|
'base': ['1rem', { lineHeight: '1.5rem' }], // 16px minimum
|
|
'lg': ['1.125rem', { lineHeight: '1.75rem' }],
|
|
'xl': ['1.25rem', { lineHeight: '1.75rem' }],
|
|
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
|
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
|
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|