Webbo3 Frontend Development · Month 1 · Lesson 20

Tailwind Typography, Colour and Component Patterns

Learn to apply a consistent design system using Tailwind typography, colors, theme and @apply to create reusable components.

You've made it to the final lesson of our beginner frontend course, and by now you've built several web pages using HTML, CSS, and Tailwind. However, if you take a closer look at your projects, you might notice that you've been repeating yourself a lot - using the same styles, colors, and layouts over and over again. This can make your code look messy and disorganized, and it can be frustrating to maintain and update. You might be wondering, is there a way to create a consistent design system that I can use across my entire project, without having to repeat myself all the time? By the end of this lesson, you will be able to apply a consistent design system to your Tailwind projects, using typography, color, and component patterns. You'll learn how to define a set of reusable styles and layouts that you can use throughout your project, making your code more efficient, maintainable, and scalable. This will save you time and effort in the long run, as you won't have to start from scratch every time you want to create a new page or component. You'll be able to create a cohesive and professional-looking website, without having to worry about inconsistent designs and layouts. You'll learn how to use Tailwind's built-in features, such as configuration files and custom classes, to create a design system that works for you. You'll see how to define a set of typography styles, color palettes, and component patterns that you can use consistently throughout your project. By the end of this lesson, you'll have the skills and knowledge to create a well-organized and maintainable frontend codebase, and you'll be able to take your web development skills to the next level.

What you need before starting

Everything from the previous lesson, and the project folder you have been building in. Work along in your own editor as you read — this lesson is written to be typed, not skimmed.

Text Size, Weight, Leading and Tracking Utilities

Understanding the Basics

Tailwind provides a set of utility classes to style text, including size, weight, leading, and tracking. These utilities are used to create a consistent typography system in your application. For example, the text size utility classes range from text-xs to text-9xl, allowing you to easily set the font size of an element.

Using Text Utilities

To use these utilities, simply add the corresponding class to the element you want to style. For example, to set the font size of a paragraph to text-lg, you would use the following code:

<p>This text will be large</p>

This will apply the text-lg style to the paragraph, making the text larger than the default size.

A common mistake beginners make is forgetting to include the text- prefix when using text size utilities. For example, using lg instead of text-lg will not apply the correct style. To avoid this, make sure to always include the prefix when using Tailwind utility classes.

Spotting a Repeated Utility Pattern

Identifying Patterns

As you work with Tailwind, you'll start to notice a repeated pattern in the utility classes. For example, the text size utilities follow a consistent naming convention: text-xs, text-sm, text-lg, etc. This pattern is not unique to text size utilities, but is repeated throughout the Tailwind framework.

Understanding the Pattern

Recognizing this pattern is important, as it allows you to easily learn and use new utility classes. Once you understand the pattern, you can apply it to other areas of the framework, such as margin, padding, and color utilities. This makes it easier to learn and use the framework, as you can predict the naming convention of new utility classes.

A common mistake beginners make is not recognizing this pattern, and instead trying to memorize each individual utility class. This approach can be time-consuming and prone to errors. By recognizing the pattern, you can use the framework more efficiently and effectively.

The Full Journey from Raw HTML to Tailwind

Raw HTML

Let's start with a simple example of raw HTML:

<p>This is a paragraph of text</p>

This HTML will render a basic paragraph of text in the browser, but it will not have any styling applied to it.

Hand-Written CSS

To add styling to the paragraph, we can use hand-written CSS:

<style>
  p {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
</style>
<p>This is a paragraph of text</p>

This CSS will apply a font size, weight, and color to the paragraph. However, this approach can become cumbersome and difficult to maintain, especially for larger applications.

Using Tailwind

Now, let's use Tailwind to apply the same styling to the paragraph:

<p>This is a paragraph of text</p>

This code uses Tailwind utility classes to apply the same styling as the hand-written CSS example. The text-lg class sets the font size, the font-bold class sets the font weight, and the text-gray-600 class sets the text color.

A common mistake beginners make is not understanding how the different stages of this journey build upon each other. Each stage teaches you something that the next stage depends on. For example, understanding how to use hand-written CSS is essential to understanding how to use Tailwind, as Tailwind is built on top of CSS. By recognizing this progression, you can better understand the framework and use it more effectively.

Tailwind's Default Colour Palette and the Numbered Scale

Understanding the Default Palette

Tailwind CSS provides a default colour palette that you can use in your projects. This palette includes a range of colours that are commonly used in web design, from primary colours like blue and red to neutral colours like gray and black. The palette is based on a numbered scale, where each colour has a corresponding number from 50 to 900. For example, the blue colour palette ranges from blue-50 (a light blue) to blue-900 (a dark blue).

The numbered scale is useful for creating a consistent visual hierarchy in your design. For example, you can use blue-500 as the primary colour for your buttons and blue-700 as the hover colour.

Using the Colour Palette in Your Code

To use the default colour palette in your code, you can simply add the corresponding class to your HTML element. For example:

<button>
  Click me
</button>

In this example, the bg-blue-500 class sets the background colour of the button to blue-500, and the hover:bg-blue-700 class sets the background colour to blue-700 when the button is hovered over.

A common mistake beginners make is to use the wrong syntax for the colour classes. For example, using blue500 instead of blue-500. To spot this mistake, make sure to check the Tailwind documentation and use the correct syntax for the colour classes.

Extracting Components — The @apply Directive and When It Is the Right Answer Versus a Component

Understanding the @apply Directive

The @apply directive in Tailwind CSS is used to apply a set of utility classes to a custom class. This can be useful when you want to create a custom component that uses a set of utility classes.

For example, let's say you want to create a custom button component that uses the bg-blue-500, text-white, and font-bold utility classes. You can use the @apply directive to create a custom class like this:

<style>
.custom-button {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
</style>

<button>
  Click me
</button>

In this example, the .custom-button class applies the bg-blue-500, text-white, and font-bold utility classes to the button element.

When to Use the @apply Directive Versus a Component

The @apply directive is useful when you want to create a custom class that uses a set of utility classes. However, when you need to create a more complex component that requires its own HTML structure and JavaScript functionality, it's better to create a separate component.

A common mistake beginners make is to overuse the @apply directive and create a large number of custom classes that are not reusable. To spot this mistake, ask yourself if the custom class is reusable in other parts of your application. If not, it's better to create a separate component.

For example, if you need to create a complex form component that requires its own HTML structure and JavaScript functionality, it's better to create a separate component rather than using the @apply directive to create a custom class.

• Use the @apply directive when you need to create a custom class that uses a set of utility classes.
• Create a separate component when you need to create a more complex component that requires its own HTML structure and JavaScript functionality.

Customising Theme Colours in the Config for a Brand

Understanding the Config File

When using Tailwind, it's essential to understand the config file, typically named `tailwind.config.js`. This file allows you to customise the default settings of Tailwind to fit your brand's needs. One of the most common customisations is changing the theme colours.

Changing Theme Colours

To change the theme colours, you need to modify the `colors` object in the `tailwind.config.js` file. For example, let's say your brand's primary colour is `#3498db` and your secondary colour is `#f1c40f`. You can change the colours as follows:

module.exports = {
  content: [
    "./src0*.{js,jsx,ts,tsx}",
  ],
  2{
    3{
      4{
        primary: ";#3498db",
        secondary: ";#f1c40f",
      }
    }
  },
  plugins: [],
}

In this code, we're using the `extend` property to add our custom colours to the default colour palette. The `primary` and `secondary` colours can now be used in our CSS classes.

Common Mistake: Forgetting to Restart the Development Server

A common mistake beginners make is forgetting to restart the development server after making changes to the `tailwind.config.js` file. This can cause the changes to not take effect, leading to confusion. To spot this mistake, check if you've restarted the development server after making changes to the config file. If not, restart it and check again.

Building a Reusable Button and Card

Creating a Reusable Button Component

To create a reusable button component, you can use a combination of HTML and CSS classes. Let's create a button component that uses our custom `primary` colour:

import React from 'react';

function Button({ children, onClick }) {
  return (
    <button
      className="bg-primary hover:bg-secondary text-white font-bold py-2 px-4 rounded"
      onClick={onClick}
    >
      {children}
    </button>
  );
}

export default Button;

In this code, we're using the `bg-primary` class to set the background colour of the button to our custom `primary` colour. We're also using the `hover:bg-secondary` class to change the background colour to our custom `secondary` colour on hover.

Creating a Reusable Card Component

To create a reusable card component, you can use a combination of HTML and CSS classes. Let's create a card component that uses our custom colours:

import React from 'react';

function Card({ children }) {
  return (
    <div
      className="bg-white shadow-md rounded px-4 py-2 border border-gray-200"
    >
      {children}
    </div>
  );
}

export default Card;

In this code, we're using the `bg-white` class to set the background colour of the card to white. We're also using the `shadow-md` class to add a medium-sized shadow to the card.

Using the Button and Card Components

To use the button and card components, you can import them into your main App component:

import React from 'react';
import Button from './Button';
import Card from './Card';

function App() {
  return (
    <div>
      <Card>
        <h2>Hello World!</h2>
        <Button>Click me!</Button>
      </Card>
    </div>
  );
}

export default App;

In this code, we're using the `Card` component to wrap our content, and the `Button` component to create a reusable button.

Do this now

To apply the concepts of Tailwind typography, colour, and component patterns, complete the following exercise. It should take you around 45 minutes to an hour, depending on your familiarity with the Tailwind configuration and CSS.

1. Open your project's Tailwind configuration file, usually named `tailwind.config.js`, and define your own brand colours. For example, you can add a primary colour, a secondary colour, and an accent colour.
2. Look through your project's CSS and identify any repeated button styles. Extract these styles into a single reusable class. For instance, you might create a `btn-primary` class that applies the primary colour, padding, and font size to any button element.
3. Write a short reflection (around 100-150 words) on which of the three approaches (inline styles, utility-first CSS, or component-based CSS) you would choose for your next project and why. Consider factors such as maintainability, scalability, and ease of use.

How to know you got it right

To verify that you've completed the exercise correctly, go through the following checklist:

• Your `tailwind.config.js` file contains custom brand colours that are applied consistently throughout your project.
• You've extracted repeated button styles into a reusable class, reducing code duplication and improving maintainability.
• Your reflection clearly explains which approach you prefer and provides valid reasons for your choice, demonstrating an understanding of the trade-offs involved.

By completing these steps and verifying your work, you'll gain hands-on experience with Tailwind typography, colour, and component patterns, and develop a deeper understanding of how to apply these concepts in your own projects.

Common mistakes

Beginners often make the following mistakes when working with Tailwind Typography, Colour and Component Patterns:

• Using arbitrary CSS instead of Tailwind classes. This looks like adding a style attribute to an HTML element. It happens because beginners are used to writing custom CSS. The fix is to replace the custom CSS with the corresponding Tailwind classes.
• Incorrectly nesting components. This looks like a misplaced tag. It happens because beginners have trouble understanding the hierarchy of components. The fix is to carefully review the component structure and ensure proper nesting.
• Forgetting to include the @tailwind directive in the CSS file. This looks like a blank or unstyled page. It happens because beginners overlook this crucial step. The fix is to add the @tailwind directive to the CSS file.
• Using the wrong colour syntax. This looks like color: blue instead of text-blue-500. It happens because beginners are used to standard CSS colour names. The fix is to use the correct Tailwind colour syntax, which includes the colour name and shade.

Questions students ask

Here are some common questions students ask about Tailwind Typography, Colour and Component Patterns:

• What is the difference between text-lg and font-size: 18px? Tailwind's text-lg is more flexible and responsive than a fixed font size.
• How do I create a custom colour palette in Tailwind? You can add custom colours to the tailwind.config.js file.
• Can I use Tailwind classes with other CSS frameworks? Yes, but be cautious of potential conflicts and test thoroughly.

That completes Month 1 of the Webbo3 Frontend Development programme.