search

tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
82.84k stars 4.2k forks source link

Max-width screens named with numbers (e.g. 1800, 1440 instead of xl, lg) not working #13946

Open Bobakanoosh opened 4 months ago

Bobakanoosh commented 4 months ago

Re-opening https://github.com/tailwindlabs/tailwindcss/issues/5956, which asks for support for numerically named max-width breakpoints.

It was initially fixed, and then reverted in https://github.com/tailwindlabs/tailwindcss/pull/6289.

What version of Tailwind CSS are you using? 3.4.4

What build tool (or framework if it abstracts the build tool) are you using? N/A

What version of Node.js are you using? N/A

What browser are you using? N/A

What operating system are you using? N/A

Reproduction URL https://play.tailwindcss.com/HZk7pMuTwQ

Describe your issue I personally prefer to use numbered breakpoint names (e.g. 1800, 1200 vs 2xl, xl) as it feels a lot more intuitive during development. This worked with min-width breakpoints, but seems to not work with max-width breakpoints. The playground link documents this issue pretty well.

G0HAN3 commented 3 months ago

Hey @Bobakanoosh can you assign me this issue.

amiii123malviya commented 3 months ago

Hello @Bobakanoosh,

Is this issue still active? I would like to work on this.

Best Regards.

Bobakanoosh commented 3 months ago

Anyone is free to work on this, I'm not a maintained so I cannot assign anyone.

farhanmian commented 1 week ago

Hi @Bobakanoosh, It's working.

Add this code in tailwind.config file:

screens: { 568: "568px", 768: "768px", 1024: "1024px", 1280: "1280px", },

Example: In tailwind.config

import type { Config } from "tailwindcss";

const config: Config = { content: [ "./src/pages//*.{js,ts,jsx,tsx,mdx}", "./src/components/*/.{js,ts,jsx,tsx,mdx}", "./src/app//*.{js,ts,jsx,tsx,mdx}", ], theme: { screens: { 568: "568px", 768: "768px", 1024: "1024px", 1280: "1280px", }, }, plugins: [], }; export default config;

img