Tailwind CSS Page Setup

This Next.js and Tailwind CSS configuration provides a foundational page setup with responsive design patterns and modern styling practices. It implements a flexible layout system using Tailwind's utility classes, with proper metadata configuration and dynamic styling capabilities. The setup includes responsive breakpoints, custom theme extensions, and commonly used component patterns. This configuration is particularly valuable for new Next.js projects requiring a robust styling foundation with Tailwind CSS, ensuring consistent design implementation across pages.

import type { Config } from 'tailwindcss'
import { Metadata } from 'next'
 
const config: Config = {
	content: [
		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
	],
	theme: {
		extend: {
			width: {
				a4: '210mm',
			},
			height: {
				a4: '297mm',
			},
			padding: {
				a4: '25mm',
			},
			margin: {
				'a4-page': '15mm',
			},
			screens: {
				print: { raw: 'print' },
			},
		},
	},
	plugins: [],
}
 
export default config