Desktop first tailwind css required when do create-next-app

[guptasomnath]

Goals

We know that Tailwind CSS defaults to mobile-first. When we run npx create-next-app, there isn’t an option to set up Tailwind as desktop-first. Without this, switching a Next.js project from mobile-first to desktop-first is very difficult. You have to delete node_modules and the .next folder, modify the global CSS to change from mobile-first, reinstall the dependencies, and restart the app—a huge hassle. Many developers, like me, are more comfortable writing CSS desktop-first and then making it responsive for mobile devices.

Non-Goals

No response

Background

1. Many developers, like me, prefer writing CSS desktop-first and then adjusting it for mobile. It just feels more intuitive.

2. With mobile-first, we often end up writing more code than necessary. For example, when using Flexbox or Grid, their automatic responsiveness usually only needs adjustments for small screens. But in mobile-first, you have to handle the sm: breakpoints even when it’s not really needed.

3. Switching an existing project from mobile-first to desktop-first is a huge hassle. You have to update the global CSS, delete node_modules, rerun the Next.js app, clear the browser cache, and more. It’s time-consuming and frustrating.

Proposal

First of all, desktop-first is set to No (false) by default. If set to Yes (true), a utils.css file can be added inside the globals directory to configure the desktop-first approach. This has already been implemented, and a PR will be submitted very soon.

[icyJoseph]

This feels out of scope for Next.js / create-next-app.

Next.js is styling-agnostic, and Tailwind is explicitly mobile-first by design (min-width breakpoints).

This is essentially asking Next.js to maintain a workaround for using Tailwind in a way Tailwind itself doesn’t promote. That should live as a community template, not in the default scaffolding.

• https://tailwindcss.com/docs/responsive-design#working-mobile-first
• [V4] breakpoint CSS using (width <= ... ) or max-width tailwindlabs/tailwindcss#15653

Adding and maintaining extra “desktop-first” CSS scaffolding in create-next-app would be ongoing maintenance burden and would bake a particular styling philosophy into the framework template.

And yes, the vast majority of projects is likely using Tailwind, but I don't have any data on how many prefer a desktop-first variant out of the box.

If there’s a need for a desktop-first workflow, it likely belongs upstream as a Tailwind discussion, a community template / starter, or even a showcase in this very discussions section.

create-next-app should stay minimal and avoid shipping extra CSS conventions it would need to support long-term.

[guptasomnath]

Thanks for the detailed explanation—I really appreciate you taking the time to outline those concerns.

I totally agree that create-next-app should remain lean and styling-agnostic. My intention wasn't to alter the default philosophy, but rather to propose an entirely optional, opt-in flag (default: false).

Here was my reasoning:

Zero Impact on Defaults: Those who wanted the traditional mobile-first Tailwind workflow wouldn't be impacted at all.

Convenience for Specific Projects: This would be a "quality of life" flag for teams working on desktop-first designs (e.g., complex dashboards) who wanted to quickly scaffold that workflow. It would simply offer a tiny utility layer without actually changing how Tailwind works.

That being said, I totally understand your point about the maintenance overhead. If even an optional flag is too much for the core scaffolding to handle, I totally get it.