Tailwind Configuration and Theming

Tailwind configTailwind themeCSS Frameworks

Introduction

In this lesson, we will explore how to customize Tailwind CSS to suit your project’s needs.

Working with the Tailwind Configuration File

We have already worked with the tailwind.config.js configuration file in the previous lesson where we added and customised the breakpoints.

This file serves as the central place to define your custom configurations, where you can:

  • Add custom breakpoints, colours, spacing, etc.
  • Enable or disable specific features (e.g., core plugins).
  • Integrate third-party plugins.

Modifying the Default Theme

Tailwind provides a default theme with pre-defined values for common utilities like font sizes, colours, spacing, etc. However, you can modify these default values to better fit your project’s design system.

In this example, we will adjust Tailwind’s default font sizes to create a more custom typographic scale that suits the visual identity of your project.

Modify the default font sizes in tailwind.config.js:

javascript 
	module.exports = {
	  theme: {
	    fontSize: {
	      xs: "0.7rem", // Changing the default 'xs' size from 0.75rem to 0.7rem for smaller text
	      sm: "0.9rem", // Adjusting the 'sm' size for slightly larger small text
	      lg: "1.3rem", // Enlarging the 'lg' size to match the desired heading scale
	      xl: "1.5rem", // Making 'xl' font size larger for better readability in large headings
	    },
	  },
	};
  • xs: 0.7rem - We reduced the xs (extra small) font size from the default 0.75rem to 0.7rem. This is useful for minor text elements like footers, captions, or small notes.
  • sm: 0.9rem - We increased the default sm (small) font size from 0.875rem to 0.9rem.
  • lg: 1.3rem - The lg (large) size is adjusted to 1.3rem for a bolder impact in sub-headings or important text sections.
  • xl: 1.5rem - We increased the xl (extra large) size for better readability in main headings or important callouts.
html 
	<p class="text-xs">
	  This text is using the modified extra small (xs) font size.
	</p>
	
	<h1 class="text-xl">
	  This is a main heading with a larger extra-large (xl) font size.
	</h1>

Extending the Theme

In addition to modifying Tailwind’s existing theme, you can also extend it by adding new values that don’t exist in the default configuration. This is useful when you need additional font sizes, custom fonts, or other unique design elements that are specific to your project.

In this section, we’ll add new custom font sizes as well as custom fonts, making it easy to integrate unique typography into your design system.

Adding Custom Font Sizes

You can extend Tailwind’s default font sizes by adding custom values that aren’t included by default. This allows for more flexibility when designing specific text elements like extra-large headings or very small captions.

Here’s how you can add new font sizes like tiny, huge, and massive:

javascript 
	module.exports = {
	  theme: {
	    extend: {
	      fontSize: {
	        tiny: "0.625rem", // Custom size for very small text (10px)
	        huge: "3.5rem", // Custom size for large headings (56px)
	        massive: "5rem", // Extra-large font size for hero sections (80px)
	      },
	    },
	  },
	};
  • tiny: 0.625rem - This size is great for small text like footers, captions, or legal disclaimers.
  • huge: 3.5rem - A large font size ideal for headlines or prominent titles.
  • massive: 5rem - An extra-large size that works well for hero sections or attention-grabbing banners.
html 
	<p class="text-tiny">This is very small text for captions or footers.</p>
	<h1 class="text-huge">This is a huge heading for maximum visual impact.</h1>

Adding Custom Fonts

You can also extend Tailwind’s theme to include custom fonts, whether from online sources like Google Fonts or local font files hosted on your server.

Using Google Fonts

Let’s say you want to use Google Fonts like Poppins for headings and Inter for body text. First, you’ll import the fonts in your project.

Step 1: Import the Fonts in HTML or CSS

You can import Google Fonts directly in your section:

html 
	<head>
	  <link
	    href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Inter:wght@400;700&display=swap"
	    rel="stylesheet"
	  />
	</head>

Alternatively, in your main CSS file (above the @tailwind directives):

css 
	@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Inter:wght@400;700&display=swap");
	
	@tailwind base;
	@tailwind components;
	@tailwind utilities;

Step 2: Add Custom Fonts to Tailwind Config

Once the fonts are imported, register them in Tailwind’s configuration:

javascript 
	module.exports = {
	  theme: {
	    extend: {
	      fontFamily: {
	        heading: ["Poppins", "sans-serif"], // Custom font for headings
	        body: ["Inter", "sans-serif"], // Custom font for body text
	      },
	    },
	  },
	};

Step 3: Use the Custom Fonts in HTML

html 
	<h1 class="font-heading text-huge">
	  This is a heading using the Poppins font and custom 'huge' font size.
	</h1>
	
	<p class="font-body text-base">
	  This is body text using the Inter font and Tailwind's default base font size.
	</p>

Using Local Fonts

If you want to use local fonts, the process is similar, but you need to define @font-face in your CSS to point to your local font files.

Step 1: Define @font-face in Your CSS

Make sure you have the font files stored locally (e.g., in a /fonts folder in your project).

css 
	@font-face {
	  font-family: "MyCustomFont";
	  src: url("/fonts/MyCustomFont-Regular.woff2") format("woff2"), url("/fonts/MyCustomFont-Regular.woff")
	      format("woff");
	  font-weight: 400;
	  font-style: normal;
	}
	
	@tailwind base;
	@tailwind components;
	@tailwind utilities;

Step 2: Add the Local Font to Tailwind Config

After defining the @font-face in your CSS, register the custom font in tailwind.config.js:

javascript 
	module.exports = {
	  theme: {
	    extend: {
	      fontFamily: {
	        custom: ["MyCustomFont", "sans-serif"],
	      },
	    },
	  },
	};

Step 3: Use the Local Font in HTML

html 
	<div class="font-custom text-lg">
	  This text uses the locally installed custom font.
	</div>

Creating Custom Colour Palettes

You may want to define a custom colour palette for your project to ensure consistency and branding throughout your website.

javascript 
	module.exports = {
	  theme: {
	    extend: {
	      colors: {
	        brand: {
	          light: "#3AB0FF", // Light shade of brand colour
	          DEFAULT: "#1E90FF", // Default brand colour
	          dark: "#00509E", // Dark shade of brand colour
	        },
	        accent: {
	          light: "#FCD34D", // Light accent colour (yellow)
	          DEFAULT: "#FBBF24", // Default accent colour
	          dark: "#B45309", // Darker accent colour
	        },
	      },
	    },
	  },
	};
  • brand colors - A custom colour palette for your brand, with a light, default, and dark version.
  • accent colors - Secondary colours that can be used for buttons, highlights, or other elements that need contrast with the main brand colour.
html 
	<div class="bg-brand text-white p-4">
	  This uses the default brand colour as the background.
	</div>
	
	<button class="bg-accent-dark text-white hover:bg-accent-light">
	  Accent Button
	</button>
  • bg-brand - Applies the default brand colour as the background (#1E90FF).
  • bg-accent-dark - Applies the dark version of the accent colour (#B45309).
  • hover:bg-accent-light - Changes the background colour to the light accent on hover (#FCD34D).

Custom Colour Palettes with Opacity

You can also customize colour opacity directly in Tailwind by combining the custom colour with Tailwind’s opacity utilities. For example, to make the brand colour 50% transparent:

html 
	<div class="bg-brand/50 p-4">
	  This background uses the brand colour with 50% opacity.
	</div>

The /50 class sets the colour’s opacity to 50%.

Full Custom Colour Palette with Variants

If you want to take it a step further, you can define a full colour palette with specific shades of your custom colours, similar to Tailwind’s default colours (e.g., blue-500, blue-600, etc.).

javascript 
	module.exports = {
	  theme: {
	    extend: {
	      colors: {
	        brand: {
	          50: "#E3F2FD",
	          100: "#BBDEFB",
	          200: "#90CAF9",
	          300: "#64B5F6",
	          400: "#42A5F5",
	          500: "#2196F3", // Default brand colour
	          600: "#1E88E5",
	          700: "#1976D2",
	          800: "#1565C0",
	          900: "#0D47A1", // Dark brand colour
	        },
	      },
	    },
	  },
	};
html 
	<div class="bg-brand-500 text-white p-4">
	  This uses the default brand colour.
	</div>

Extracting Classes with @apply

The @apply directive allows you to group multiple utility classes into a single, reusable class. When creating component classes, you should wrap them in @layer components to maintain proper ordering in the final CSS.

You add these to your CSS file to organize styles and reduce repetition in your HTML.

However, it’s important not to overuse @apply, as it can work against Tailwind’s utility-first approach by pushing too many styles back into your CSS, reducing flexibility and performance.

Let’s create reusable button styles with primary and secondary variants.

In your CSS file add this below the @tailwind directives:

css 
	@layer components {
	  /* Base button styles */
	  .btn {
	    @apply font-bold py-2 px-4 rounded;
	  }
	
	  /* Button variants */
	  .btn-primary {
	    @apply bg-blue-500 text-white;
	  }
	
	  .btn-secondary {
	    @apply bg-gray-500 text-white;
	  }
	}
html 
	<button class="btn btn-primary">Primary Button</button>
	<button class="btn btn-secondary">Secondary Button</button>

Why Use @apply?

  • Consistency - Keep shared styles in one place for easy updates.
  • Cleaner HTML - Avoid repeating utility classes.
  • Flexibility - Easily create and manage variants like buttons.

Caveat: Don’t Overuse @apply

While @apply helps reuse styles, overusing it can make your project harder to customize and reduce flexibility. Tailwind is meant to be used directly in HTML, so relying too much on @apply can lead to larger, less efficient CSS files.

Plugins and Third-Party Extensions

Tailwind supports plugins to extend its functionality.

Plugins let you add additional utility classes or customise Tailwind to suit your project’s needs.

One of the most useful third-party plugins is Tailwind Typography, which provides pre-designed styles for rich content like articles, blog posts, or long-form text.

Install a Plugin (e.g., Typography):

bash 
	npm install @tailwindcss/typography

Enable the Plugin in tailwind.config.js:

javascript 
	module.exports = {
	  theme: {
	    extend: {},
	  },
	  plugins: [require("@tailwindcss/typography")],
	};

Apply in HTML:

html 
	<article class="prose">
	  <h1>Formatted text with the Typography plugin</h1>
	  <p>This plugin helps you style rich text content effortlessly.</p>
	</article>

Dark Mode

Tailwind CSS comes with a built-in dark mode feature.

By default, it uses the media strategy, which applies dark mode based on the user’s system preferences.

html 
	<body class="bg-white dark:bg-gray-900 text-black dark:text-white">
	  <h1>Dark Mode Example</h1>
	</body>

If the user’s system is set to use dark mode, the dark: classes will be applied.

If you want to control dark mode manually, you can switch to the selector strategy by adding darkMode: ‘selector’ in your tailwind.config.js. This allows you to toggle dark mode by adding a class like “dark” to your root HTML element.

javascript 
	export default {
	  theme: {
	    extend: {},
	  },
	  darkMode: "selector",
	};

You can add an event listener to toggle this class:

html 
	<button id="theme-toggler">Toggle Theme</button>
javascript 
	const themeToggler = document.querySelector("#theme-toggler");
	
	themeToggler.addEventListener("click", () => {
	  document.documentElement.classList.toggle("dark");
	});