Tailwind CSS Best Practices

Layout

• Use flex, grid for layouts
• Use container mx-auto for centered content
• Use space-x-*, space-y-* for spacing between children
• Use gap-* with flex/grid
• Use responsive prefixes: sm:, md:, lg:, xl:, 2xl:

Components

• Extract repeated patterns to components, not @apply
• Use group and group-hover: for parent-child interactions
• Use peer and peer-checked: for sibling interactions
• Use ring-* for focus styles
• Use divide-* for borders between children