Tailwind Basics.txt

Tailwind Basics


Ultimate Reference Point -> https://tailwind-workshop.vercel.app
Online Playground -> play.tailwindcss.com

What is Tailwind CSS?
------------------------------
- The core idea behind Tailwind is to provide developers with utility classes to create unique designs directly in their HTML markup
- Utility classes are short CSS snippets for specific styling like background color, margins, and fonts

The Tailwind Layers
---------------------------
// Hierarchy
Utilities
Components
Base <-- Lowest Layer
   
[ Base ]
- basic styles for raw HTML elements (e.g. h1).
  
The base layer is where you’d find the foundational styles that are applied to raw HTML elements. These are low-specificity selectors that include default browser styling, and you generally don’t modify these styles directly. In a Tailwind project, the base layer is commonly populated by using the @layer base {} directive to include any custom base styles or overrides.

@layer base {
	h1 {
		@apply text-2xl;
	}
	p {
		@apply text-base;
	}
}

[ Components ]
- where you define common design patterns as reusable components, typically by applying utility classes with Tailwind’s @apply directive. These components are higher in specificity compared to base styles but lower than utility classes.

Components are often expressed in your CSS files using the @layer components {} directive

@layer components {
	.btn {
		@apply rounded bg-blue-500 px-4 py-2 text-white;
	}
	.card {
		@apply rounded p-4 shadow-md;
	}
}


[ Utilities ]




Common Tailwind CSS References
-----------------------------------------------
min-h-[px]
min-w-[px]
px - padding side
py - padding top
mt 
flex
flex-col
justify-between
gap - 
items-center