option for desktop-first approach

[bysxx]

While I find Tailwind CSS to be quite effective for mobile-first design, it seems a bit cumbersome when used for desktop-first projects. This is primarily because it necessitates appending max-* to every media query, which can make the code somewhat cluttered.

It would be beneficial if there were an option to choose between using (max-sm & sm) and (min-sm & sm) for media queries. This feature would greatly enhance the flexibility and cleanliness of the code in different project settings.

Example

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  responsive: 'desktop-first', // default: 'mobile-first'
}

[adamwathan]

Hey! You can configure your breakpoints to be max-width breakpoints if you like: https://tailwindcss.com/docs/screens#max-width-breakpoints

[bysxx]

I thought that option only set the width of the breakpoint before..

thank you!