Divide utilities between children in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean to 'divide utilities between children' in Tailwind CSS?

It means applying different Tailwind utility classes to each child element inside a parent, so each child has its own style or layout.

beginner

How can you apply different spacing between child elements using Tailwind?

Use the space-x-* or space-y-* utilities on the parent to add horizontal or vertical space between children.

intermediate

Which Tailwind utility helps to make children share equal width inside a flex container?

Use flex-1 on each child to make them grow equally and share the available space.

advanced

How do you target only direct children in Tailwind CSS for styling?

Tailwind uses the children variant plugin or you can use first:, last: to style specific children, but direct child selectors need custom CSS or plugins.

beginner

What is the visual effect of using divide-x-2 on a parent container?

It adds a vertical dividing line of 2 pixels thickness between each horizontal child element, visually separating them.

Which Tailwind utility adds space between child elements horizontally?

A m-4

B space-y-4

C p-4

D space-x-4

space-x-4 adds horizontal space between children. space-y-4 adds vertical space.

What does divide-y-2 do in Tailwind CSS?

A Adds horizontal lines between children

B Adds vertical lines between children

C Adds horizontal dividing lines between children stacked vertically

D Adds padding to children

divide-y-2 adds horizontal dividing lines between children stacked vertically.

How do you make all children inside a flex container share equal width?

A Add <code>flex-1</code> to each child

B Add <code>space-x-4</code> to parent

C Add <code>p-4</code> to parent

D Add <code>divide-x-2</code> to parent

flex-1 on children makes them grow equally inside a flex container.

Which utility adds a dividing line between children horizontally?

A divide-x-2

B divide-y-2

C space-x-2

D space-y-2

divide-x-2 adds vertical dividing lines between children arranged horizontally.

Can Tailwind CSS directly style only the first child element?

A No, only parent can be styled

B Yes, using <code>first:</code> variant

C Yes, using <code>child:</code> variant

D No, Tailwind cannot target children

first: variant targets the first child element for styling.

Explain how to visually separate child elements inside a container using Tailwind CSS.

Think about utilities that add lines or space between children.

Describe how to make child elements share equal space inside a flex container using Tailwind.

Focus on flexbox utilities for children.