How to make Tailwind desktop-first

How to make Tailwind desktop-first

Setup your Tailwind config if most of your users are on desktop

Irvin Zhan

• July 11, 2024

Tailwind uses a mobile-first system. You start by designing for mobile screens with utilities like text-md, then make it work for desktops by adding breakpoints like lg:text-lg.

Mobile-first design works well for UI like marketing pages that are on mobile devices, but most web apps don't need mobile support, except for a few cases like links from emails. This is especially true for B2B SaaS apps.

How do you know if you should be desktop-first? You probably should if:

  1. Your users rarely use your product on mobile.
  2. You’re just starting out and don’t have time to make everything responsive.
  3. You want to be ready if parts of your app need to be mobile-friendly later.

If this sounds like you, this quick guide will show you how to make your Tailwind config desktop-first.

Configuring your Tailwind config

By default, breakpoints like lg:text-lg apply to specific screen sizes and larger. This means unprefixed utilities are for mobile, and prefixed ones are for desktop.

To make it desktop-first, you want breakpoints to apply to specific screen sizes and smaller. You can change this in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      "2xl": { max: "1535px" },
      // => @media (max-width: 1535px) { ... }

xl: { max: "1279px" },
      // => @media (max-width: 1279px) { ... }

lg: { max: "1023px" },
      // => @media (max-width: 1023px) { ... }

md: { max: "767px" },
      // => @media (max-width: 767px) { ... }

sm: { max: "639px" },
      // => @media (max-width: 639px) { ... }
    },
  },
}

Naming your breakpoints

In most web apps, you don't need to use all the breakpoints. Instead, name your breakpoints.

Naming your breakpoints helps you remember them and helps your designer create screens at agreed-upon breakpoints.

We've helped thousands of users set up their Tailwind config at Subframe. The best advice is to start with one breakpoint: mobile. Most users will just use that and be fine. A desktop breakpoint is also useful if you need to change some mobile styles.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        mobile: { max: "767px" },
        // => @media (max-width: 767px) { ... }

desktop: { min: "768px" },
        // => @media (min-width: 768px) { ... }
      },
    },
  },
}

If you need more control, you can add a tablet breakpoint to tell it apart from mobile, but it's usually not needed.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        mobile: { max: "479px" },
        // => @media (max-width: 479px) { ... }

tablet: { max: "767px" },
        // => @media (max-width: 767px) { ... }

desktop: { min: "768px" },
        // => @media (min-width: 768px) { ... }
      },
    },
  },
}

Now with desktop-first breakpoints, you can continue creating desktop layouts and add mobile support later on:

<div className="flex mobile:flex-col">{/* I can add mobile:flex-col later on to make div vertical! */}</div>

Setting up your Tailwind config file for desktop-first and best practices can take a lot of time. You might want to consider using a Tailwind config generator that sets it all up for you.