Tailwindmarkup~30 mins

Extending default theme values in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Extending Default Theme Values in Tailwind CSS

📖 Scenario: You are building a simple webpage and want to customize the colors and font sizes beyond Tailwind's default options. This will help your site have a unique look while still using Tailwind's utility classes.

🎯 Goal: Extend the Tailwind CSS default theme by adding a new color called brandBlue with the hex value #1DA1F2 and a new font size called xxs with the size 0.65rem. Then use these new theme values in your HTML.

📋 What You'll Learn

Create a Tailwind config file with default theme extension

Add a new color brandBlue with value #1DA1F2

Add a new font size xxs with value 0.65rem

Use the new color and font size in HTML elements

💡 Why This Matters

🌍 Real World

Web developers often need to customize design systems to match brand colors and typography. Extending Tailwind's default theme allows easy reuse of these custom styles across a website.

💼 Career

Knowing how to extend Tailwind CSS themes is valuable for frontend developers working on modern web projects that require consistent branding and design customization.

Progress0 / 4 steps

Create the Tailwind config file with default theme import

Create a file named tailwind.config.js and write the code to import the default theme from tailwindcss/defaultTheme and export an empty module.exports object with a theme key containing an empty extend object.

Tailwind

// Create tailwind.config.js with defaultTheme import and empty extend
// Your code here

Need a hint?

Use require('tailwindcss/defaultTheme') to import the default theme.

Add new color brandBlue and font size xxs to the extend object

Inside the extend object in tailwind.config.js, add a colors object with brandBlue set to '#1DA1F2' and a fontSize object with xxs set to '0.65rem'.

Tailwind

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      // Add colors and fontSize here
    },
  },
};

Need a hint?

Put the new color inside colors and the new font size inside fontSize within extend.

Create a simple HTML file using the new theme values

Create an index.html file with a <div> that uses the Tailwind classes text-brandBlue and text-xxs to apply the new color and font size. Include the Tailwind CSS link in the <head>.

Tailwind

Need a hint?

Use the new classes text-brandBlue and text-xxs on a div.

Add the Tailwind directives to your CSS file

Create a CSS file named input.css and add the Tailwind directives @tailwind base;, @tailwind components;, and @tailwind utilities; to it. This file will be used to generate your final CSS with the extended theme.

Tailwind

/* Create input.css with Tailwind directives */
/* Your code here */

Need a hint?

These directives tell Tailwind to include its base styles, components, and utilities.