CSS variables with Tailwind - Mini Project: Build & Apply

Using CSS Variables with Tailwind CSS

📖 Scenario: You are building a simple webpage that uses custom colors defined with CSS variables. You want to use Tailwind CSS utility classes that refer to these CSS variables for consistent theming.

🎯 Goal: Create a webpage with a heading and a button. Define CSS variables for --main-color and --accent-color in a :root selector. Use Tailwind CSS classes that apply these colors by referencing the CSS variables.

📋 What You'll Learn

Define CSS variables --main-color and --accent-color in the :root selector with exact colors #2563eb and #f43f5e respectively.

Create an h1 heading with the text Welcome to My Site that uses the --main-color as its text color via Tailwind CSS.

Create a button with the text Click Me that uses the --accent-color as its background color via Tailwind CSS.

Use Tailwind CSS utility classes with text-[var(--main-color)] and bg-[var(--accent-color)] syntax to apply the CSS variables.

Include responsive design so the button text size is larger on screens wider than 640px.

💡 Why This Matters

🌍 Real World

Using CSS variables with Tailwind allows you to create consistent themes that are easy to update and maintain across a website.

💼 Career

Many web development jobs require knowledge of modern CSS techniques and utility-first frameworks like Tailwind to build scalable and maintainable user interfaces.

1

Create the HTML skeleton and define CSS variables

Write the HTML5 skeleton with lang="en", charset="UTF-8", and viewport meta tags. Inside a <style> tag in the <head>, define CSS variables --main-color with value #2563eb and --accent-color with value #f43f5e inside the :root selector.

Tailwind

  
  
  CSS Variables with Tailwind
  
    /* Define CSS variables here */
  

Hint

Remember to put the CSS variables inside a :root selector within a <style> tag in the <head>.

2

Add heading and button elements

Inside the <body>, add an h1 element with the exact text Welcome to My Site and a button element with the exact text Click Me.

Tailwind

  
  
  CSS Variables with Tailwind
  
    :root {
      --main-color: #2563eb;
      --accent-color: #f43f5e;
    }
  


  

Hint

Make sure the h1 and button have exactly the specified text.

3

Apply Tailwind CSS classes using CSS variables

Add Tailwind CSS utility classes to the h1 and button. For the h1, add the class text-[var(--main-color)] to set its text color. For the button, add the class bg-[var(--accent-color)] to set its background color. Also add text-white to the button for readable text and px-4 py-2 rounded for padding and rounded corners.

Tailwind

  
  
  CSS Variables with Tailwind
  
    :root {
      --main-color: #2563eb;
      --accent-color: #f43f5e;
    }
  


  Welcome to My Site
  Click Me
  

Hint

Use the exact Tailwind classes with square brackets to reference the CSS variables.

4

Make the button text larger on wider screens

Add a responsive Tailwind CSS class to the button so that its text size is text-lg on screens wider than 640px. Use the sm:text-lg class along with the existing classes.

Tailwind

  
  
  CSS Variables with Tailwind
  
    :root {
      --main-color: #2563eb;
      --accent-color: #f43f5e;
    }
  


  Welcome to My Site
  Click Me
  

Hint

Use the sm:text-lg class to make the button text larger on small (640px+) screens.

Practice

1. What is the main benefit of using CSS variables with Tailwind CSS?

easy

A. They make your CSS files larger and slower to load.

B. They automatically generate new classes for every color.

C. They replace the need for Tailwind utility classes.

D. They allow you to reuse values like colors and spacing easily.

Solution

1. Step 1: Understand CSS variables purpose

   CSS variables store values like colors or spacing to reuse them easily.

2. Step 2: Connect with Tailwind usage

   Tailwind supports CSS variables to keep design consistent and easy to update.

3. Final Answer:

   They allow you to reuse values like colors and spacing easily. -> Option D

4. Quick Check:

   CSS variables = reuse values [OK]

Hint: CSS variables store reusable values for consistency [OK]

Common Mistakes:

• Thinking CSS variables replace Tailwind classes
• Believing CSS variables slow down CSS loading
• Assuming CSS variables auto-generate classes

2. Which is the correct way to use a CSS variable for color in Tailwind's arbitrary value syntax?

easy

A. bg-[var(--main-color)]

B. bg-var(--main-color)

C. bg-[--main-color]

D. bg-[var(main-color)]

Solution

1. Step 1: Recall Tailwind arbitrary value syntax

   Tailwind uses square brackets for arbitrary values, e.g., bg-[value].

2. Step 2: Use correct CSS variable syntax inside brackets

   CSS variables use var(--variable-name), so bg-[var(--main-color)] is correct.

3. Final Answer:

   bg-[var(--main-color)] -> Option A

4. Quick Check:

   Arbitrary value with var() = bg-[var(--main-color)] [OK]

Hint: Use bg-[var(--name)] for CSS variables in Tailwind [OK]

Common Mistakes:

• Omitting var() function
• Missing square brackets around the value
• Using incorrect variable syntax like var(main-color)

3. Given this CSS: :root { --btn-color: #4ade80; } and this Tailwind class: class="bg-[var(--btn-color)] p-4 rounded", what color will the button background be?

medium

A. Default Tailwind blue color.

B. No background color applied.

C. A bright green color (#4ade80).

D. An error will occur and no style applied.

Solution

1. Step 1: Identify CSS variable value

   The variable --btn-color is set to #4ade80, a bright green color.

2. Step 2: Understand Tailwind usage

   The class bg-[var(--btn-color)] uses that variable for background color.

3. Final Answer:

   A bright green color (#4ade80). -> Option C

4. Quick Check:

   CSS var used correctly = green background [OK]

Hint: Check CSS variable value to predict Tailwind color output [OK]

Common Mistakes:

• Assuming Tailwind default color overrides variable
• Thinking variable is ignored without explicit Tailwind color
• Believing syntax causes error

4. What is wrong with this Tailwind class if the CSS variable is defined as --text-color: #333;?
class="text-[var(text-color)] font-bold"

medium

A. Missing double dash before variable name inside var().

B. Square brackets are not allowed in Tailwind classes.

C. CSS variables cannot be used with text color in Tailwind.

D. font-bold conflicts with text color variable.

Solution

1. Step 1: Check CSS variable syntax

   CSS variables require two dashes: --text-color, so var(--text-color) is correct.

2. Step 2: Identify error in class

   The class uses var(text-color) missing the double dash, causing invalid variable reference.

3. Final Answer:

   Missing double dash before variable name inside var(). -> Option A

4. Quick Check:

   CSS var syntax needs -- before name [OK]

Hint: Always use -- before variable name inside var() [OK]

Common Mistakes:

• Omitting -- in CSS variable name
• Thinking font-bold affects color variables
• Believing square brackets are invalid in Tailwind

5. You want to create a reusable button style in Tailwind that uses a CSS variable for background color and changes on hover. Which code snippet correctly applies this using CSS variables and Tailwind?

hard

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Use correct CSS variable syntax in Tailwind

   Tailwind requires arbitrary values in brackets with var(--variable), so bg-[var(--btn-bg)] is correct.

2. Step 2: Apply hover state correctly

   Hover uses hover:bg-[var(--btn-hover)] to change background on hover properly.

3. Final Answer:

   <button class='bg-[var(--btn-bg)] hover:bg-[var(--btn-hover)] text-white px-4 py-2 rounded'>Click me</button> -> Option B

4. Quick Check:

   Correct var() syntax + hover state = Click me [OK]

Hint: Use bg-[var(--name)] and hover:bg-[var(--name)] for hover colors [OK]

Common Mistakes:

• Omitting var() or -- in variable names
• Using bg-var() without brackets
• Incorrect hover syntax without hover: prefix