How to apply responsive font sizes in Tailwind

Tailwind CSS is a popular utility-first CSS framework that makes it easy to style your applications using predefined classes. One useful feature of Tailwind is the ability to apply responsive font sizes using media queries. In this blog post, we'll take a look at how to use media queries in Tailwind to apply responsive font sizes to your text.

Media queries in Tailwind

Tailwind includes a number of utility classes that allow you to apply styles based on the size of the viewport. These utility classes are prefixed with the size abbreviation, followed by a colon (e.g. sm:, md:, lg:, etc.). For example, you can use the sm: prefix to apply styles only on small screens, or the lg: prefix to apply styles only on large screens.

Applying responsive font sizes

To apply responsive font sizes in Tailwind, you can use the text- utility classes along with media queries. For example, to apply a larger font size on small screens and a smaller font size on large screens, you can use the following classes:

<p className="text-lg sm:text-sm">Small on small screens</p>

In this example, the text-lg class will be applied on all screen sizes, while the sm:text-sm class will apply a smaller size only on small screens.

Even though this is a valid solution it can be challenging in a bigger project to ensure that all devs use the same styles and responsive adjustments.

Creating a custom Typography component

While applying responsive font sizes using media queries and the text- utility classes is a simple and effective method, you may find that it becomes cumbersome to repeat this process for each element in your application. In this case, it may be more convenient to create a custom Typography component that encapsulates this logic and makes it easier to apply responsive font sizes to your text.

For example, you could create a Typography component like the following:

import React, { ElementType } from "react";

type Variant =
  | "h1"
  | "h2"
  | "h3"
  | "h4"
  | "h5"
  | "body"
  | "body-small"
  | "small";

interface Props {
  variant: Variant;
  children: React.ReactNode;
  className?: string;
  as?: ElementType;
}

const tags: Record<Variant, ElementType> = {
  h1: "h1",
  h2: "h2",
  h3: "h3",
  h4: "h4",
  h5: "h5",
  body: "p",
  "body-small": "p",
  small: "span"
};

const sizes: Record<Variant, string> = {
  h1: "text-5xl font-bold sm:text-4xl",
  h2: "text-4xl font-bold sm:text-3xl",
  h3: "text-3xl font-bold sm:text-2xl",
  h4: "text-2xl font-bold sm:text-1xl",
  h5: "text-xl font-bold sm:text-lg",
  body: "text-lg sm:text-md",
  "body-small": "text-md sm:text-sm",
  small: "text-sm sm:text-xs"
};

export const Typography = ({ variant, children, className, as }: Props) => {
  const sizeClasses = sizes[variant];
  const Tag = as || tags[variant];

  return <Tag className={`${sizeClasses} ${className}`}>{children}</Tag>;
};

Now you can user this component like this:

import Typography from './Typography';

// ...

<Typography variant="h1">Heading 1</Typography>
<Typography variant="body" as="div">Body text with div</Typography>
<Typography variant="small">Small text</Typography>

With this custom Typography component, you can easily apply responsive font sizes to your text in a way that's similar to how Material-UI does it. Simply pass in the desired variant (e.g. 'h1', 'body1') and the component will handle the rest.

Full example code you can find here:
Codesandbox

In conclusion, applying responsive font sizes in Tailwind is a simple matter of using media queries and the text- utility classes. Alternatively, you can create a custom Typography component that encapsulates this logic and makes it easier to apply responsive font sizes to your text. This can be especially convenient if you have many elements in your application that need to have responsive font sizes applied to them.