Sergei
5b04765b0d
- Extended Tailwind config with 3xl (1920px) and 4xl (2560px) breakpoints - Added responsive max-widths (8xl, 9xl, 10xl) for large screens - Updated Layout component with scaling max-width and padding - Made Header container responsive for large displays - Added responsive Sidebar width (64→72→80 for lg→3xl→4xl) - Implemented responsive typography in globals.css - Updated Dashboard grids to utilize more columns on large screens - Added comprehensive unit tests for responsive classes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
34 lines
873 B
TypeScript
34 lines
873 B
TypeScript
import type { Config } from 'tailwindcss';
|
|
|
|
const config: Config = {
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
background: 'var(--background)',
|
|
foreground: 'var(--foreground)',
|
|
},
|
|
screens: {
|
|
// Default Tailwind breakpoints:
|
|
// sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px
|
|
// Extended breakpoints for large screens:
|
|
'3xl': '1920px', // Full HD monitors
|
|
'4xl': '2560px', // QHD / 4K monitors
|
|
},
|
|
maxWidth: {
|
|
// Extended container widths for large screens
|
|
'8xl': '88rem', // 1408px
|
|
'9xl': '96rem', // 1536px
|
|
'10xl': '112rem', // 1792px - for 4K
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
|
|
export default config;
|