Percentage-Based Styling with Tailwind CSS

A comprehensive Next.js demo project showcasing percentage-based styling techniques using Tailwind CSS, including viewport units (vw/vh) and container-relative percentages.

Features

• ✨ Viewport-based sizing - Components sized relative to browser viewport (vw/vh)
• 📦 Container-based sizing - Nested components using parent-relative percentages
• 🎨 Overlayed cards - Absolutely positioned elements with percentage positioning
• 📱 Responsive grids - Grid layouts with percentage-based gaps and sizing
• 🔄 Nested components - Multiple levels of percentage-based inheritance

Getting Started

Install Dependencies

npm install

Run Development Server

npm run dev

Open http://localhost:3000 to view the demo.

Project Structure

percentage-based-styling/
├── components/
│   ├── Card.tsx              # Main card with viewport-based sizing
│   ├── OverlayCard.tsx       # Overlay card with percentage positioning
│   ├── NestedComponent.tsx   # Nested component with container percentages
│   └── ResponsiveGrid.tsx    # Grid with percentage gaps
├── pages/
│   ├── _app.tsx              # App wrapper
│   └── index.tsx             # Main demo page
├── styles/
│   └── globals.css           # Global styles with Tailwind directives
└── tailwind.config.js        # Tailwind configuration

Key Concepts Demonstrated

Viewport Units (vw/vh)

• w-[60vw] - 60% of viewport width
• h-[40vh] - 40% of viewport height
• Always relative to browser window

Container Percentages

• w-[70%] - 70% of parent width
• h-[60%] - 60% of parent height
• Relative to immediate parent element

Percentage Positioning

• top-[10%] - 10% from top
• left-[5%] - 5% from left
• Used with absolute/relative positioning

Technologies

• Next.js 14 - React framework
• TypeScript - Type safety
• Tailwind CSS 3 - Utility-first CSS
• React 18 - UI library

License

MIT