Blog

Technical writing on Web3, AI, and building things. Written by Uvin Vindula.

130 articles · 5 in UI/UX & Design Engineering

Dark Mode Implementation in Next.js with Tailwind CSS

iamuvin.com is dark-only by design — but most client projects need a proper dark/light toggle. This guide covers every detail of implementing dark mode in Next.js with Tailwind CSS v4: class-based vs media query strategies, CSS variables for seamless theme colors, solving the dreaded flash-of-wrong-theme on page load, building a Theme Provider with React Context, persisting user preferences, detecting system settings, and knowing when dark-only is the right choice. Every pattern comes from production code I've shipped for clients.

U

Uvin Vindula·January 26, 2026

UI/UX & Design Engineering11 min

IAMUVIN

Web Accessibility in Next.js: Meeting WCAG 2.1 AA Standards

Accessibility is not a checkbox exercise — it's about building for everyone. This guide covers how I implement WCAG 2.1 AA standards in every Next.js project: semantic HTML in React, keyboard navigation, focus management in SPAs, color contrast ratios, ARIA labels, screen reader testing, and accessible forms. Every pattern is pulled from production code I ship for clients through iamuvin.com — not theoretical ideals that never leave a tutorial.

U

Uvin Vindula·October 6, 2025

UI/UX & Design Engineering12 min

IAMUVIN

Building a Design System with Tailwind CSS and Next.js

A practical guide to building a production-grade design system with Tailwind CSS v4 and Next.js. Covers design tokens as CSS variables, OKLCH color systems, typography scales, component architecture using atomic design, dark mode implementation, and documentation strategies. Based on real systems I built for iamuvin.com, EuroParts Lanka, and FreshMart — not theoretical frameworks that never ship.

U

Uvin Vindula·May 19, 2025

UI/UX & Design Engineering11 min

IAMUVIN

Framer Motion in Next.js: Animation Patterns That Don't Kill Performance

A practical guide to using Framer Motion in Next.js without destroying your Core Web Vitals. Covers scroll reveals, page transitions, layout animations, exit animations, staggered children, and Server Component compatibility — with real component code from iamuvin.com. My rule: CSS transitions for simple stuff, Framer Motion only when you need layout animations or orchestrated sequences.

U

Uvin Vindula·March 17, 2025

UI/UX & Design Engineering12 min

IAMUVIN

Tailwind CSS v4: Everything That Changed and How to Migrate

A hands-on guide to Tailwind CSS v4 from someone who migrated four production sites. Covers the CSS-first @theme configuration, design tokens as CSS variables, container queries, new utilities, and a step-by-step migration from v3. Based on real migrations of iamuvin.com, EuroParts Lanka, uvin.lk, and FreshMart — including the gotchas the docs don't warn you about.

U

Uvin Vindula·January 13, 2025