Building Multi-Theme Applications with Tailwind

Tutorial 5 of 5

1. Introduction

Goal

The goal of this tutorial is to guide you through the process of building a multi-theme application using Tailwind CSS. We will be creating an app that allows users to switch between a light and dark theme.

Learning Outcomes

By the end of this tutorial, you will be able to:
- Understand how to use Tailwind CSS to style your application.
- Implement a theme-switching feature in your application.
- Understand how to create multiple themes using Tailwind CSS.

Prerequisites

This tutorial assumes that you have a basic understanding of HTML, CSS, and JavaScript. Knowledge of Tailwind CSS is beneficial but not a requirement as we will go through it briefly.

2. Step-by-Step Guide

Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework. It provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

Installing Tailwind CSS

First, we need to install Tailwind via npm.

npm install tailwindcss

Setting Up Themes

For our app, we will create two themes: a default (light) theme and a dark theme. We will use Tailwind's configuration file (tailwind.config.js) to define these themes.

module.exports = {
  theme: {
    extend: {
      colors: {
        'theme-light': {
          'primary': '#black',
          'secondary': '#white',
          'accent': '#blue'
        },
        'theme-dark': {
          'primary': '#white',
          'secondary': '#black',
          'accent': '#red'
        }
      }
    }
  },
  variants: {},
  plugins: [],
}

Here, we have defined two themes each with its own primary, secondary, and accent colors.

3. Code Examples

Implementing Theme Switch

We will create a simple button that will allow the user to switch between the light and dark themes.

<button id="theme-switch">Switch Theme</button>

In our JavaScript, we will listen for a click event on this button and then toggle the theme.

document.getElementById('theme-switch').addEventListener('click', () => {
  document.documentElement.classList.toggle('theme-dark');
});

This code will add or remove the theme-dark class to the <html> element whenever the button is clicked.

Using the Themes

To use the themes, we simply use the defined color utilities in our HTML.

<div class="bg-theme-light-primary text-theme-light-secondary">
  <!-- Content -->
</div>

When the theme-dark class is present on the <html> element, the colors will switch to those defined in the theme-dark theme.

4. Summary

In this tutorial, we learned how to create a multi-theme application using Tailwind CSS. We covered how to define multiple themes and how to switch between them using JavaScript. This is a basic example, and you can extend it to include more themes and more complex styling.

To continue learning about Tailwind CSS, you can:

Explore the official Tailwind CSS documentation
Experiment with creating your own themes and styling.

5. Practice Exercises

Extend the existing application and add a third theme. Experiment with different colors and styles for this new theme.
Create a dropdown menu instead of a button for theme switching. The dropdown menu should list all available themes.

Solutions

Add the new theme to the tailwind.config.js file.

'theme-new': {
  'primary': '#color1',
  'secondary': '#color2',
  'accent': '#color3'
}

Replace the button in the HTML with a dropdown.

<select id="theme-switch">
  <option value="theme-light">Light</option>
  <option value="theme-dark">Dark</option>
  <option value="theme-new">New</option>
</select>

Update the JavaScript to switch the theme based on the selected option.

document.getElementById('theme-switch').addEventListener('change', (event) => {
  document.documentElement.className = event.target.value;
});

Keep practicing and building on these exercises to gain more confidence and proficiency with Tailwind CSS. Happy coding!