Why a color system matters in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a background color using Tailwind CSS.

Tailwind

<div class="bg-[1]-500 p-4 text-white">Hello, color system!</div>

Drag options to blanks, or click blank then click option'

Atext

Bcircle

Cred

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-color word like 'circle' or 'text' as a color name.

Forgetting the numeric shade like '-500'.

The class bg-blue-500 sets a blue background color. Tailwind uses a color system with names like red, blue, etc.

2fill in blank

medium

Complete the code to set text color using Tailwind's color system.

Tailwind

<p class="text-[1]-700">This text uses a color system.</p>

Drag options to blanks, or click blank then click option'

Agreen

Byellow

Cborder

Dcircle

Attempts:

3 left

💡 Hint

Common Mistakes

Using words that are not colors.

Confusing background and text color classes.

The class text-green-700 sets the text color to a dark green shade. Tailwind uses color names with numeric shades.

3fill in blank

hard

Fix the error in the Tailwind class to correctly apply a border color.

Tailwind

<div class="border-[1]-400 p-2">Border color example</div>

Drag options to blanks, or click blank then click option'

Apurple

Bcircle

Ctext

Dbg

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-color words in color classes.

Mixing background and border color classes.

The class border-purple-400 correctly sets the border color to a purple shade. Words like circle or bg are not valid color names.

4fill in blank

hard

Fill both blanks to create a button with a background and hover color using Tailwind's color system.

Tailwind

<button class="bg-[1]-600 hover:bg-[2]-700 text-white font-bold py-2 px-4 rounded">Click me</button>

Drag options to blanks, or click blank then click option'

Ablue

Bgreen

Cred

Dcircle

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same color for both background and hover (not wrong but less interesting).

Using invalid color names.

The button uses bg-blue-600 for the background and hover:bg-red-700 for the hover effect. Both are valid Tailwind color names.

5fill in blank

hard

Fill all three blanks to create a card with border, background, and text colors using Tailwind's color system.

Tailwind

<div class="border-[1]-300 bg-[2]-100 text-[3]-800 p-6 rounded-lg">Card content</div>

Drag options to blanks, or click blank then click option'

Agray

Byellow

Cpurple

Dcircle

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid color names like 'circle'.

Mixing up the order of colors for border, background, and text.

The classes border-gray-300, bg-yellow-100, and text-purple-800 correctly set the border, background, and text colors using Tailwind's color system. gray, yellow, and purple are valid color names.

Practice

1. Why is having a color system important when using Tailwind CSS?

easy

A. It automatically creates animations.

B. It makes the website load faster.

C. It keeps the website colors consistent and easy to update.

D. It removes the need for HTML tags.

Solution

1. Step 1: Understand the purpose of a color system

   A color system helps keep colors consistent across a website, so everything looks neat and professional.

2. Step 2: Connect to Tailwind usage

   Tailwind allows easy use of custom colors, making updates simple and consistent for teams.

3. Final Answer:

   It keeps the website colors consistent and easy to update. -> Option C

4. Quick Check:

   Color system = consistency and easy updates [OK]

Hint: Think about why matching colors matter on a website [OK]

Common Mistakes:

• Confusing color system with performance improvements
• Thinking it creates animations automatically
• Believing it removes HTML tags

2. Which Tailwind CSS syntax correctly adds a custom color named brand-blue in the configuration?

easy

A. "colors": { 'brand-blue': '#1DA1F2' }

B. "colors": { brand-blue: #1DA1F2 }

C. "colors": { 'brand-blue': #1DA1F2 }

D. "colors": { brand-blue: "#1DA1F2" }

Solution

1. Step 1: Check correct JSON syntax for Tailwind config

   Keys must be strings in quotes, and color values must be strings in quotes.

2. Step 2: Identify the correct option

   "colors": { 'brand-blue': '#1DA1F2' } uses quotes correctly around both key and value, making it valid.

3. Final Answer:

   "colors": { 'brand-blue': '#1DA1F2' } -> Option A

4. Quick Check:

   Proper quotes around keys and values = "colors": { 'brand-blue': '#1DA1F2' } [OK]

Hint: Remember JSON needs quotes around keys and string values [OK]

Common Mistakes:

• Omitting quotes around color hex code
• Using unquoted keys in JSON
• Using wrong quote types inconsistently

3. Given this Tailwind config snippet:

{
  theme: {
    extend: {
      colors: {
        'brand-green': '#10B981'
      }
    }
  }
}

What color will the class bg-brand-green apply?

medium

A. A shade of blue (#1DA1F2)

B. A shade of green (#10B981)

C. Default Tailwind green

D. No color, class will not work

Solution

1. Step 1: Understand the config extension

   The config adds a new color named 'brand-green' with hex #10B981.

2. Step 2: Match class to color

   The class bg-brand-green uses this custom color as background.

3. Final Answer:

   A shade of green (#10B981) -> Option B

4. Quick Check:

   Custom color name matches class = A shade of green (#10B981) [OK]

Hint: Match class name to custom color key in config [OK]

Common Mistakes:

• Confusing custom color with default colors
• Assuming class won't work without import
• Mixing up hex codes

4. You added a custom color brand-red in Tailwind config but bg-brand-red does not change the background color. What is the likely mistake?

medium

A. Using bg-brand-red instead of text-brand-red.

B. The hex code is missing the # symbol.

C. Tailwind does not support custom colors.

D. Forgetting to restart the development server after config change.

Solution

1. Step 1: Understand Tailwind config changes

   Changes to Tailwind config require restarting the dev server to apply.

2. Step 2: Identify the common mistake

   Not restarting means new colors won't load, so bg-brand-red won't work.

3. Final Answer:

   Forgetting to restart the development server after config change. -> Option D

4. Quick Check:

   Restart server after config edits = Forgetting to restart the development server after config change. [OK]

Hint: Always restart dev server after Tailwind config changes [OK]

Common Mistakes:

• Thinking Tailwind doesn't support custom colors
• Mixing background and text classes
• Missing # in hex code (usually caught earlier)

5. You want to create a consistent color system with Tailwind for a team. Which approach best helps keep colors consistent and easy to update?

hard

A. Define all custom colors in Tailwind config and use their names in classes.

B. Use inline styles with hex codes everywhere in HTML.

C. Add colors directly in CSS files without Tailwind classes.

D. Let each developer pick their own colors for components.

Solution

1. Step 1: Consider team consistency needs

   Using a shared config with named colors ensures everyone uses the same colors.

2. Step 2: Compare options

   Inline styles and separate CSS files cause inconsistency and harder updates; letting developers pick freely causes mismatch.

3. Final Answer:

   Define all custom colors in Tailwind config and use their names in classes. -> Option A

4. Quick Check:

   Central config for colors = consistency and easy updates [OK]

Hint: Centralize colors in config for team consistency [OK]

Common Mistakes:

• Using inline styles causing scattered colors
• Ignoring Tailwind config for colors
• Allowing random color choices by team members