Odd and even row styling in Tailwind - Mini Project: Build & Apply

Odd and Even Row Styling with Tailwind CSS

📖 Scenario: You are creating a simple webpage that shows a list of fruits in a table. You want to make the table easier to read by coloring the odd rows light gray and the even rows white.

🎯 Goal: Build an HTML table with 5 fruit names and use Tailwind CSS classes to style odd rows with a light gray background and even rows with a white background.

📋 What You'll Learn

Create an HTML table with a header row and 5 fruit rows

Use Tailwind CSS classes to style odd rows with bg-gray-100

Use Tailwind CSS classes to style even rows with bg-white

Ensure the table is responsive and accessible with proper semantic tags

💡 Why This Matters

🌍 Real World

Tables are common in websites to show lists or data. Styling odd and even rows differently helps users read data easily.

💼 Career

Knowing how to use Tailwind CSS for table styling and accessibility is useful for frontend web development jobs.

1

Create the HTML table structure

Write the HTML code to create a table with a <thead> containing a header row with the column title Fruit. Then add a <tbody> with 5 rows, each containing one fruit name: Apple, Banana, Cherry, Date, and Elderberry.

Tailwind

  
    
      Fruit
    
  
  
    
  

Hint

Use <thead> for the header and <tbody> for the fruit rows. Each fruit goes inside a <td> inside a <tr>.

2

Add Tailwind CSS base classes for table styling

Add Tailwind CSS classes to the <table> tag to make the table full width with w-full, add a border with border, and make the text left aligned with text-left.

Tailwind

  
  
    
      Fruit
    
  
  
    Apple
    Banana
    Cherry
    Date
    Elderberry
  

Hint

Add the classes w-full, border, and text-left inside the class attribute of the <table> tag.

3

Add odd and even row background colors using Tailwind

Add Tailwind CSS classes to the <tbody> tag to style odd rows with odd:bg-gray-100 and even rows with even:bg-white.

Tailwind

  
    
      Fruit
    
  
  
    
    Apple
    Banana
    Cherry
    Date
    Elderberry
  

Hint

Add the classes odd:bg-gray-100 and even:bg-white inside the class attribute of the <tbody> tag.

4

Add accessibility and responsive design enhancements

Add the scope="col" attribute to the <th> tag for accessibility. Also, wrap the table inside a <div> with the Tailwind class overflow-x-auto to make it horizontally scrollable on small screens.

Tailwind

  
  
    
      
        Fruit 
      
    
    
      Apple
      Banana
      Cherry
      Date
      Elderberry
    
  

Hint

Wrap the table in a <div> with class overflow-x-auto. Add scope="col" inside the <th> tag.

Practice

1. What does the odd: prefix do in Tailwind CSS when applied to a list of rows?

easy

A. It styles all rows the same way.

B. It removes styling from odd rows.

C. It styles only the even-numbered rows.

D. It styles only the rows with odd numbers differently.

Solution

1. Step 1: Understand the odd: prefix meaning

   The odd: prefix targets elements in odd positions (1st, 3rd, 5th, etc.) in a list or table.

2. Step 2: Apply to rows

   When used on rows, it applies styles only to those odd-numbered rows, leaving even rows unaffected.

3. Final Answer:

   It styles only the rows with odd numbers differently. -> Option D

4. Quick Check:

   odd: = odd rows styled [OK]

Hint: Remember odd means 1st, 3rd, 5th rows styled [OK]

Common Mistakes:

• Confusing odd with even rows
• Thinking it styles all rows
• Assuming it removes styles

2. Which of the following is the correct Tailwind syntax to style even rows with a gray background?

easy

A. even:bg-gray-200

B. odd:bg-gray-200

C. bg-gray-200:even

D. bg-gray-200-odd

Solution

1. Step 1: Identify the correct prefix for even rows

   The prefix for styling even rows in Tailwind is even:.

2. Step 2: Combine prefix with background color

   To style even rows with a gray background, use even:bg-gray-200.

3. Final Answer:

   even:bg-gray-200 -> Option A

4. Quick Check:

   Prefix even: + class = even:bg-gray-200 [OK]

Hint: Use even: before class for even rows [OK]

Common Mistakes:

• Using odd: instead of even:
• Placing prefix after class
• Using invalid class names

3. Given this HTML snippet with Tailwind classes:

<ul>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 1</li>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 2</li>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 3</li>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 4</li>
</ul>

What background colors will the items have?

medium

A. All items have green background.

B. Items 1 and 3 have blue; Items 2 and 4 have green.

C. Items 1 and 3 have green; Items 2 and 4 have blue.

D. All items have blue background.

Solution

1. Step 1: Understand odd and even row styling

   Items in odd positions (1, 3) get bg-blue-100, even positions (2, 4) get bg-green-100.

2. Step 2: Match items to colors

   Item 1 and 3 have blue background; Item 2 and 4 have green background.

3. Final Answer:

   Items 1 and 3 have blue; Items 2 and 4 have green. -> Option B

4. Quick Check:

   odd = blue, even = green [OK]

Hint: Odd items get first color, even items get second color [OK]

Common Mistakes:

• Swapping odd and even colors
• Assuming all items have same color
• Ignoring the prefixes

4. You wrote this code to style table rows:

<tr class="odd:bg-gray-100 even:bg-white">...</tr>

But the even rows are not white, they remain gray. What is the likely problem?

medium

A. The even: prefix is not supported on <tr> elements.

B. You need to add table-auto class to the table.

C. The parent <tbody> or <table> is missing, so odd/even can't apply.

D. You must use bg-white without prefix for even rows.

Solution

1. Step 1: Check odd/even styling context

   Odd and even styling depends on the element's position among siblings inside a parent container like <tbody>.

2. Step 2: Identify missing parent container

   If <tr> elements are not inside <tbody> or <table>, the browser may not count rows correctly, so even rows don't get styled.

3. Final Answer:

   The parent <tbody> or <table> is missing, so odd/even can't apply. -> Option C

4. Quick Check:

   Odd/even needs proper parent container [OK]

Hint: Ensure rows are inside <tbody> for odd/even to work [OK]

Common Mistakes:

• Thinking even: doesn't work on <tr>
• Forgetting to wrap rows in <tbody>
• Using wrong class order

5. You want to style a list so odd rows have a light blue background and even rows have a light green background, but only if the row contains text longer than 10 characters. Which Tailwind approach works best?

hard

A. Use odd:bg-blue-100 even:bg-green-100 and add JavaScript to add a class for long text rows.

B. Use odd:bg-blue-100 even:bg-green-100 and rely on CSS :has() selector with Tailwind plugin.

C. Use only bg-blue-100 for all rows and ignore text length.

D. Use inline styles with JavaScript to check text length and set background colors.

Solution

1. Step 1: Understand Tailwind limitations

   Pure Tailwind odd: and even: prefixes cannot condition styles on text content length, as CSS lacks selectors for character count.

2. Step 2: Best hybrid approach

   Apply odd:bg-blue-100 even:bg-green-100 classes to rows and use JavaScript to detect text length >10 characters, then add a modifier class (e.g., long-text). Combine with custom variants like long-text:odd:bg-blue-100 via Tailwind config or arbitrary variants for conditional application.

3. Final Answer:

   Use odd:bg-blue-100 even:bg-green-100 and add JavaScript to add a class for long text rows. -> Option A

4. Quick Check:

   Tailwind classes + JS for content length [OK]

Hint: Tailwind odd/even + JS class for dynamic content checks [OK]

Common Mistakes:

• Expecting pure CSS :has() to handle text length
• Using inline styles instead of Tailwind classes
• Ignoring the need for JS in content-based conditions