Creating Tailwind theme collections

Tailwind is a rapid web development tool to style user interfaces using English like expressions. It has advantages and disadvantages.

Advantages

Instead of complex CSS, use English like style class names to control all aspects of the web interface

Disadvantages

When we use CSS, we create classes to style similar elements, like submitButton, searchField. Tailwind classes define a specific visual property, like background, border, text color. There is no room to create styles for similar objects. Using Tailwind it can be tedious to keep the visuals consistent in a large web application. If we want to update the style of all buttons on multiple pages, we have to visit all of them to change the class names.

In this tutorial we will develop a system that merges the advantages of the CSS thematic classes and the friendliness of Tailwind.

We will create a class collection, a middle layer between the Tailwind classes and the elements to specify the look of all controls with the same purpose. You still can override the values at the individual control level with the ! (important) postfix.

Class collection

Create the styles/classes.ts file in the same directory where the style sheets are for consistency. In this example we will create separate themes for the parent div of the panels, the header panel, the body panel and the footer panel. All contains light and dark mode Tailwind classes for background, border, button text, hover styling.

export const ColorThemes = {
  panelParent: {
    border: "border-blue-200 dark:border-slate-600",
    bg: "bg-white dark:bg-slate-800",
    text: "text-blue-200 dark:text-blue-800",
    hover: "hover:bg-blue-100 dark:hover:bg-slate-700",
    button: "bg-blue-600 dark:bg-blue-800 hover:bg-blue-500 dark:hover:bg-blue-700",
    dragBorder: "border-blue-400 bg-blue-100 dark:bg-slate-700",
  },  
  panelHeader: {
    border: "border-blue-200 dark:border-slate-600",
    bg: "bg-slate-100 dark:bg-slate-700",
    text: "text-blue-200 dark:text-blue-800",
    hover: "hover:bg-blue-100 dark:hover:bg-slate-700",
    button: "bg-blue-600 dark:bg-blue-800 hover:bg-blue-500 dark:hover:bg-blue-700",
    dragBorder: "border-blue-400 bg-blue-100 dark:bg-slate-700",
  },
  panelBody: {
    border: "border-blue-200 dark:border-slate-600",
    bg: "bg-slate-100 dark:bg-slate-700",
    text: "text-blue-200 dark:text-blue-800",
    hover: "hover:bg-blue-100 dark:hover:bg-slate-700",
    button: "bg-blue-600 dark:bg-blue-800 hover:bg-blue-500 dark:hover:bg-blue-700",
    dragBorder: "border-blue-400 bg-blue-100 dark:bg-slate-700",
  },  
};

Usage

In the .tsx file import the class collection and create constant references.

// Import color themes to standardize appearance for light and dark modes
import { ColorThemes } from "~/styles/classes";

// The color classes for different panel types standardized from styles/classes.ts
  const colorClassesPanelParent = ColorThemes["panelParent"];
  const colorClassesPanelHeader = ColorThemes["panelHeader"];
  const colorClassesPanelBody = ColorThemes["panelBody"];

Style the controls. Enclose the entire className definition in curly braces, and use backtick to allow variable usage in the string. You can add additional Tailwind classes to the element to set specific visual features.

    <div className={`${colorClassesPanelParent.bg} rounded-xl`} >

To override the background color for this element, use the ! (important) postfix

<div className={`${colorClassesPanelParent.bg} bg-black! rounded-xl`} >