Tailwind Handbook - Part III

Overview

In the previous posts(part I, part II), we discussed the basics of Tailwind CSS and how to build custom components. This post will explore how to use Tailwind's theming system to implement a consistent UI.

Use cases for themes

The most common use cases for themes include:

Consistent Branding: Ensure a uniform look and feel of the app.
Dark Mode: Provide a dark theme option for better usability in low-light environments.
Thematic Seasonal Changes: Easily switch themes for different seasons or special events.

Configuration

The basic configuration happens in tailwind.config.js file, theme section. Here, each key represents one aspect of the UI.

Let's go through some of the available keys:

screens: Define breakpoints for responsive design.
colors: Customize your color palette.
spacing: Adjust spacing scales for padding, margins, etc.
fontFamily: Set custom font families.

Working with the default theme

Extending the Default Theme

The existing default theme can be extended using the theme.extend key. This allows adding new values without completely overriding the default settings.

For example, to add a new color and spacing option:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        teal: {
          50: "#f0fdfa",
          100: "#ccfbf1",
          200: "#99f6e4",
          300: "#5eead4",
          400: "#2dd4bf",
          500: "#14b8a6",
          600: "#0d9488",
          700: "#0f766e",
          800: "#115e59",
          900: "#134e4a",
          950: "#042f2e",
        },
      },
      spacing: {
        custom: "32rem",
      },
    },
  },
};

These new utilities could be used in project's components:

<div class="bg-teal-500 p-128">
  Extended Theme Example
</div>

Overriding Default Values

Default values could be overridden by providing alternative values for any key. This is useful for making the theme to fit a specific design requirements.

For example, to change the default font family and primary color:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
    fontFamily: {
      sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
    },
    colors: {
      primary: {
        light: '#6b7280',
        DEFAULT: '#374151',
        dark: '#1f2937',
      },
    },
  },
}

Pixel-perfect customizing

Sometimes, using arbitrary values is necessary to quickly prototype or adjust specific parts of the UI with precision.

Here are some examples of using arbitrary values:

<div class="p-[18px] bg-gray-200"> 
	This div has custom padding 
</div>

<button class="bg-[#3490dc] text-white font-bold py-2 px-4 rounded">
	Custom Blue Button
</button>

These custom values allow to achieve pixel-perfect accuracy when needed.

Conclusion

Tailwind CSS is a powerful framework that significantly streamlines the process of creating custom, responsive components. It provides a flexible solution for implementing and managing themes in the app. By mastering these advanced customization techniques, you can create highly polished and user-friendly interfaces with ease. This post concludes the three-post series on Tailwind CSS.

References

TailwindPlay - check out Tailwind CSS right in the browser!
Theme Configuration docs
Tailwind CSS Color Generator
Tailwind CSS Dark Mode