Configuration file structure in Tailwind - Mini Project: Build & Apply

Tailwind CSS Configuration File Structure

📖 Scenario: You are setting up a Tailwind CSS project for a small website. To customize the design, you need to create and edit the Tailwind configuration file.

🎯 Goal: Build a basic tailwind.config.js file that defines custom colors and font sizes for your website.

📋 What You'll Learn

Create a tailwind.config.js file with the correct module export structure

Add a theme object inside the configuration

Inside theme, add a colors object with custom color names and hex values

Inside theme, add a fontSize object with custom size names and rem values

💡 Why This Matters

🌍 Real World

Tailwind CSS configuration files let developers customize the look and feel of websites easily by changing colors, fonts, and more in one place.

💼 Career

Knowing how to set up and edit Tailwind config files is important for frontend developers to create consistent and maintainable designs in modern web projects.

1

Create the base configuration file

Create a file named tailwind.config.js and write module.exports = {} to start the configuration.

Tailwind

// Create the base Tailwind config file
// Your code here

Need a hint?

Think of this file as a box where you will put your design settings. Start by exporting an empty object.

2

Add the theme object

Inside the exported object, add a theme property with an empty object as its value.

Tailwind

module.exports = {
  // Add the theme object here
  // Your code here
}

Need a hint?

The theme object holds all your design customizations like colors and fonts.

3

Add custom colors inside theme

Inside the theme object, add a colors object with these exact entries: primary: '#1D4ED8', secondary: '#9333EA', and accent: '#F59E0B'.

Tailwind

module.exports = {
  theme: {
    // Add colors object here
    // Your code here
  }
}

Need a hint?

Colors are named keys with hex color codes as values inside the colors object.

4

Add custom font sizes inside theme

Inside the theme object, add a fontSize object with these exact entries: sm: '0.875rem', base: '1rem', and lg: '1.125rem'.

Tailwind

module.exports = {
  theme: {
    colors: {
      primary: '#1D4ED8',
      secondary: '#9333EA',
      accent: '#F59E0B'
    },
    // Add fontSize object here
    // Your code here
  }
}

Need a hint?

Font sizes use names as keys and rem values as strings inside the fontSize object.