Styling
Tailwind CSS

Tailwind CSS

Why use Tailwind?

It provides reusable styling and components that I can use between multiple websites. Combining CSS best practices with Tailwind helps supress all the

Tailwind Patterns I follow

Mobile First Design Approach

'space-y-*' utility class

Gives us a convient way to uniformly add vertical spacing between the direct child elements of a container.

  • Purpose: designed to add vertical spacing between children of container.
  • How: when used it will apply a 'margin-top' to all children elements except the first.

Comparing it 'space-y-*' with Margin and Padding

  • Specificity
  • Uniformity vs Control

CSS Equivalent

.container > * + * {
	margin-top: 1rem; /* Adjust the spacing as needed */
}