Visual Alignment for Icons and Labels in Tailwind CSS

Short summary

A practical guide to aligning vector icons with text labels using Tailwind CSS flexbox utilities. Covers three techniques: flex centering with items-center, sizing icons to match text line-height, and using translate utilities to correct visual offset for asymmetric shapes. Includes code examples for buttons, badges, and list rows.

• •Use flex items-center to align icon and text vertical midpoints
• •Size icon height to match text line-height (e.g., 20px icon for text-base's 24px line-height)
• •Apply translate-y pixel nudges for asymmetric shapes like country outlines

Generated with AI, which can make mistakes.