puffin-app/tailwind.config.js
Matt b4e155778d
Some checks failed
Build and Push Docker Images / docker (push) Failing after 2m14s
Fix Tailwind configuration and optimize print layout for checkout success page
- Add emerald and cyan to Tailwind safelist pattern to fix gradient rendering
- Include app/ and components/ directories in Tailwind content paths
- Optimize print layout with compressed spacing, margins, and fonts
- Reduce page margins from 0.5in to 0.3in for better content fit
- All content now fits on single printed page without cutoff

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-03 15:41:51 +01:00

128 lines
2.9 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
'puffin-blue': {
DEFAULT: '#005A9C',
light: '#E6F0F6',
focus: '#3B82F6',
},
'puffin-gray': {
label: '#6B7280',
border: '#D1D5DB',
disabled: '#F3F4F6',
},
'puffin-error': {
DEFAULT: '#EF4444',
focus: '#F87171',
},
// Modern Maritime Admin Color Palette
'deep-sea-blue': '#1D2939',
'sail-white': '#F8F9FA',
'maritime-teal': '#008B8B',
'sea-green': '#1E8449',
'muted-gold': '#D68910',
'royal-purple': '#884EA0',
'off-white': '#EAECEF',
'light-gray-border': '#EAECF0',
},
boxShadow: {
'focus-blue': '0 0 0 3px rgba(59, 130, 246, 0.3)',
'focus-red': '0 0 0 3px rgba(239, 68, 68, 0.3)',
},
},
},
plugins: [],
safelist: [
// Colors
{
pattern: /^(bg|text|border|hover:bg|hover:text)-(blue|gray|green|red|purple|teal|orange|indigo|emerald|cyan)-(50|100|200|300|400|500|600|700|800|900)/,
},
// Modern Maritime Admin Colors
'bg-deep-sea-blue',
'bg-sail-white',
'bg-maritime-teal',
'bg-sea-green',
'bg-muted-gold',
'bg-royal-purple',
'bg-off-white',
'bg-light-gray-border',
'text-deep-sea-blue',
'text-sail-white',
'text-maritime-teal',
'text-sea-green',
'text-muted-gold',
'text-royal-purple',
'text-off-white',
'border-deep-sea-blue',
'border-sail-white',
'border-maritime-teal',
'border-light-gray-border',
'hover:bg-maritime-teal',
'hover:text-maritime-teal',
// Spacing
{
pattern: /^(p|px|py|m|mx|my|mt|mb|ml|mr)-[0-9]+/,
},
// Sizing
{
pattern: /^(w|h)-[0-9]+/,
},
// Layout
{
pattern: /^(min-h|max-w|aspect)-/,
},
// Grid
{
pattern: /^(grid-cols|gap)-/,
},
// Flexbox
{
pattern: /^(flex|items|justify|space|rounded|shadow)/,
},
// Transitions
'transform',
'transition-colors',
'transition-transform',
'duration-300',
'hover:scale-105',
// Interactivity
'cursor-pointer',
'cursor-not-allowed',
'disabled:opacity-50',
'disabled:hover:text-gray-600',
// Typography
'font-semibold',
'font-bold',
'text-center',
'text-left',
// Position
'relative',
'absolute',
'fixed',
'inset-0',
// Display
'object-cover',
'overflow-hidden',
'drop-shadow-lg',
// Animation
'animate-spin',
// Focus
'focus:ring',
'focus:ring-blue-500',
'focus:border-blue-500',
'focus:ring-opacity-50',
'focus:outline-none',
// Forms
'form-input',
'form-select',
'form-textarea'
]
};