What does text-3xl mean?

• text = text size
• 3xl = size level (larger than base text)

🔤 text-3xl sets the font size to 1.875rem (about 30px).

This is text-3xl size text — big and bold!

📏 Tailwind Text Size Scale:

🎨 What does bg-gray-100 mean?

• bg = background
• gray = color name
• 100 = shade level (100 = very light)

Tailwind uses a color scale ranging from 50 (lightest) to 950 (darkest). That’s 19 levels per color.

Example gray shades visually:

🧱 What does border-t-2 mean?

• border = apply a border
• t = top side
• 2 = border thickness (2px)

So border-t-2 means: add a 2px border only to the top of the element.

📏 Tailwind Border Thickness Classes

🔵 What does rounded mean?

• rounded adds rounded corners to an element.
• It’s like border-radius in CSS.

📏 Common Rounded Classes

🔤 What does font mean?

• Tailwind uses font-* classes to change font weight.

Here are some examples:

📏 Font Weight Classes

🧭 What do x and y mean in Tailwind?

• x = horizontal (left and right)
• y = vertical (top and bottom)
• You’ll often see it used with margin m and padding p like: mx-4, py-6

📏 Axis Shorthand Classes

📌 What does position do in Tailwind CSS?

Tailwind provides utility classes to control how elements are positioned on the screen.

🧱 Position Classes

• static – default (no special positioning)
• relative – positioned relative to its normal place
• absolute – positioned relative to the nearest positioned ancestor
• fixed – positioned relative to the browser window
• sticky – scrolls normally until it reaches a threshold, then sticks

📋 Summary Table

🧱 What are block, inline, and inline-block in Tailwind?

These utility classes control how elements flow and wrap in the layout. Each has different behavior.

📦 Visual Examples

📋 Summary Table

🧱 What does flex mean in Tailwind CSS?

Tailwind uses the flex utility to apply flexbox layout to elements. Flexbox helps align, distribute, and arrange elements responsively.

📦 Basic Usage

• flex — sets the element to display: flex
• flex-row — default direction (horizontal)
• flex-col — vertical stacking

🔹 flex creates a row by default.

🔸 flex-col stacks items vertically.

📋 Display Classes

📍 Direction Classes

🔲 What is grid in Tailwind CSS?

Tailwind’s grid utility enables you to create powerful and responsive layouts using CSS Grid. It's great for laying out boxes, cards, galleries, and more.

📦 Basic Grid Example

Above uses grid grid-cols-3 → creates 3 equal-width columns.

📐 Common Grid Classes

🔢 Grid with Different Column Counts

📍 Spanning Columns

🔍 What does leading-relaxed mean in Tailwind CSS?

The class leading-relaxed sets the line height (the vertical space between lines of text) to make content easier to read.

✅ What it means:

leading-relaxed → line-height: 1.625;

So, if your text has a font size of 16px, the line height will be:
16px × 1.625 = 26px

📚 Common leading-* values in Tailwind:

🧠 Why use leading-relaxed?

• Improves paragraph readability
• Reduces visual crowding between lines
• Perfect for blogs, articles, and teaching content

🌑 What is shadow in Tailwind CSS?

Tailwind provides utility classes to easily apply different levels of box shadow to your elements. Shadows can enhance the appearance by adding depth and focus.

✅ Common Tailwind Box Shadow Classes

✨ Example Button with Shadow

📝 Try It Yourself

• Change shadow-lg to shadow-sm or shadow-2xl to see the effect.
• Try shadow-inner inside a light-colored box for a soft inset look.

🖱️ Tailwind CSS: hover, focus, and transform

Tailwind allows you to add interactive effects using pseudo-classes like hover and focus, and also animate objects using transform.

🎯 hover: — When mouse hovers over an element

Use hover: before any utility to apply styles on hover.

hover:bg-blue-700 means background turns dark blue when you hover.

🔍 focus: — When input is clicked or selected

focus:ring-2 and focus:ring-blue-500 add a blue border ring when focused.

🚀 transform — Move, scale, or rotate elements

The transform class enables transformations like:

• hover:scale-110 — make it 110% size
• hover:rotate-3 — rotate 3 degrees
• hover:translate-x-2 — move right

🧰 Common Transform Utilities

✨ Tips:

• Use transition and duration-300 to smooth effects
• You can combine hover: + transform for animated buttons, cards, images
• Focus styles help users navigate with keyboard — important for accessibility!

📱 Tailwind CSS Responsive Breakpoints (Screen Sizes)

Tailwind makes responsive design super easy using mobile-first breakpoints. You can apply styles that change based on the device’s screen width.

🔹 Format:

screen-size:class

For example: md:text-xl means "apply text-xl when the screen is medium or larger".

📐 Default Breakpoints in Tailwind:

🎯 Example

This heading will be small on phones, but grow on bigger screens:

🌟 I grow bigger on larger screens!

🧠 Tips:

• Tailwind is mobile-first: base styles come first, then add larger screen styles.
• You can use any utility with breakpoints: px-4, text-center, hidden, etc.
• Combine with flex/grid for beautiful responsive layouts!

🙈 Built-in Visibility Utility Classes in Tailwind CSS

Tailwind CSS includes built-in utility classes to control the visibility of elements — without writing custom CSS.

hidden

The hidden class completely removes the element from the layout by applying display: none;.

invisible vs. visible

Use invisible to hide an element but still keep its space in the layout. Use visible to reverse it.

invisible = visibility: hidden;    visible = visibility: visible;

📱 Responsive Visibility

You can use responsive prefixes like md:hidden or lg:visible to show/hide elements on specific screen sizes.

📋 Summary of Visibility Utilities

💡 Tip: Combine with responsive prefixes like md:hidden, sm:invisible, or lg:visible to control visibility across screen sizes.