jonsugar/show-tailwind-breakpoint.html

jonsugar · 2019-10-30T12:27:19Z

Note:
This works for the default tailwind configuration. You may need to make edits if you change your breakpoint configuration.

UPDATE:
@Lelectrolux has implemented my idea as a custom tailwind plugin. This has the advantages of:

Not requiring you to add markup to your template.
Working with non-standard tailwind configurations.

Another solution that shows the current breakpoint and works in any css context is available at https://brkpnt.com.

danyelkeddah · 2019-10-30T12:54:48Z

Nice one @jonsugar 👍

floriangaechter · 2019-10-30T13:25:36Z

Awesome work @jonsugar!

Here's the same thing as a bookmarklet if you don't want it to be there all the time:

javascript:(function()%7Bconst%20div%20%3D%20document.createElement('div')%3Bdiv.innerHTML%20%3D%20%60%3Cdiv%20class%3D%22flex%20items-center%20m-2%20fixed%20bottom-0%20right-0%20border%20border-gray-400%20rounded%20p-2%20bg-gray-300%20text-pink-600%20text-sm%22%3E%3Csvg%20class%3D%22h-6%20w-auto%20inline%22%20viewBox%3D%220%200%2080%2064%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22url(%23paint0_linear)%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M32%2016C24.8%2016%2020.3%2019.6%2018.5%2026.8C21.2%2023.2%2024.35%2021.85%2027.95%2022.75C30.004%2023.2635%2031.4721%2024.7536%2033.0971%2026.4031C35.7443%2029.0901%2038.8081%2032.2%2045.5%2032.2C52.7%2032.2%2057.2%2028.6%2059%2021.4C56.3%2025%2053.15%2026.35%2049.55%2025.45C47.496%2024.9365%2046.0279%2023.4464%2044.4029%2021.7969C41.7557%2019.1099%2038.6919%2016%2032%2016ZM18.5%2032.2C11.3%2032.2%206.8%2035.8%205%2043C7.7%2039.4%2010.85%2038.05%2014.45%2038.95C16.504%2039.4635%2017.9721%2040.9536%2019.5971%2042.6031C22.2443%2045.2901%2025.3081%2048.4%2032%2048.4C39.2%2048.4%2043.7%2044.8%2045.5%2037.6C42.8%2041.2%2039.65%2042.55%2036.05%2041.65C33.996%2041.1365%2032.5279%2039.6464%2030.9029%2037.9969C28.2557%2035.3099%2025.1919%2032.2%2018.5%2032.2Z%22%3E%3C%2Fpath%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear%22%20x1%3D%223.5%22%20y1%3D%2216%22%20x2%3D%2259%22%20y2%3D%2248%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%232298BD%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230ED7B5%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3ECurrent%20breakpoint%3Cspan%20class%3D%22ml-1%20sm%3Ahidden%20md%3Ahidden%20lg%3Ahidden%20xl%3Ahidden%22%3Edefault%20(%26lt%3B%20640px)%3C%2Fspan%3E%3Cspan%20class%3D%22ml-1%20hidden%20sm%3Ainline%20md%3Ahidden%20font-extrabold%22%3Esm%3C%2Fspan%3E%3Cspan%20class%3D%22ml-1%20hidden%20md%3Ainline%20lg%3Ahidden%20font-extrabold%22%3Emd%3C%2Fspan%3E%3Cspan%20class%3D%22ml-1%20hidden%20lg%3Ainline%20xl%3Ahidden%20font-extrabold%22%3Elg%3C%2Fspan%3E%3Cspan%20class%3D%22ml-1%20hidden%20xl%3Ainline%20font-extrabold%22%3Exl%3C%2Fspan%3E%3C%2Fdiv%3E%60.trim()%3Bdocument.body.appendChild(div.firstChild)%7D)()

jonsugar · 2019-10-30T13:34:12Z

Nice @floriangaechter! That's awesome 👍

TitasGailius · 2019-10-30T14:14:37Z

Nice.

Also, what kind of avatar generator did you use? :)

jonsugar · 2019-10-30T14:58:56Z

@TitasGailius https://avatarmaker.com/

Lelectrolux · 2019-10-30T21:07:37Z

Standalone forkable gist : https://gist.github.com/Lelectrolux/8f9a78491a5c9617078a73c091e01415

I liked the concept, but didn't care for the extra html markup needed and really don't like that it doesn't find the breakpoints by itself.

I created a new solution as a tailwindcss plugin, so I can get the list of breakpoints form the config itself, and used a after css pseudo element on the body to be completely extra markup free.

Added bonus, a quick if (process.env.NODE_ENV === "production") return ensure it won't ever be left in production.

Only downgrade, I'm dependent on tailwindcss.com favicon (https://tailwindcss.com/favicon-32x32.png), as you can't use svg in pseudo element, but it's a really minor inconvenient unless csp. Changing the code with a local img or no img is trivial anyway

// tailwind.config.js
module.exports = {
  // ...
  
  plugins: [
    function({addBase, theme}) {
      if (process.env.NODE_ENV === "production") return
  
      const screens = theme('screens', {})
      const breakpoints = Object.keys(screens)
      
      addBase({
        'body::after': {
          content: `"Current breakpoint default (< ${screens[breakpoints[0]]})"`,
          position: 'fixed',
          right: '.5rem', // could replace with theme('spacing.2', '.5rem'), same for most of the other values
          bottom: '.5rem',
          padding: '.5rem .5rem .5rem 2rem',
          background: 'no-repeat .5rem center / 1.25rem url(https://tailwindcss.com/favicon-32x32.png), #edf2f7',
          border: '1px solid #cbd5e0',
          color: '#d53f8c',
          fontSize: '.875rem',
          fontWeight: '600',
          zIndex: '99999',
        },
        ...breakpoints.reduce((acc, current) => {
          acc[`@media (min-width: ${screens[current]})`] = {
            'body::after': {
              content: `"Current breakpoint ${current}"`
            }
          }
          return acc
        }, {})
      })
    }
  ]
}

It generates this css with the default config

body::after {
  content: "Current breakpoint default (< 640px)";
  position: fixed;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  background: no-repeat 0.5rem center / 1.25rem url(https://tailwindcss.com/favicon-32x32.png), #edf2f7;
  border: 1px solid #e2e8f0;
  color: #d53f8c;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 99999;
}

@media (min-width: 640px) {
  body::after {
    content: "Current breakpoint sm";
  }
}

@media (min-width: 768px) {
  body::after {
    content: "Current breakpoint md";
  }
}

@media (min-width: 1024px) {
  body::after {
    content: "Current breakpoint lg";
  }
}

@media (min-width: 1280px) {
  body::after {
    content: "Current breakpoint xl";
  }
}

Result is the same :

I'll probably release this as a package some day with this gist credited for the initial idea, but in the meantime, here you go.

EDIT : I didn't bother muddying the proof of concept with more complex custom breakpoints like max-width or range breakpoints. I'm not sure it's completely possible to deal with.

But as long as you are doing vanilla mobile first stuff, it will work fine

EDIT 2 A few quirks to deal with on more real sites.. I'll update

EDIT 3 All good, code updated. z-index: 99999 + position: fixed. First time I ever used fixed ^^

EDIT 4
Pinging the forks that could be interested
@lstables
@sportuondo
@AgusRdz

mikemand · 2019-10-30T21:59:04Z

@Lelectrolux Does this handle adding extra breakpoints? For example, my Tailwind config has this:

module.exports = {
    theme: {
        extend: {
            ...
            screens: {
                'xxl': '1440px',
            },
            ...
        },
    },
};

Lelectrolux · 2019-10-30T22:09:53Z

@mikemand

Yes as long as they are "mobile first" breakpoints and ordered from smaller to larger. Your specific case works.

But these ones probably wont out of the box (didn't test, tbh) :

module.exports = {
    theme: {
        extend: {
            ...
            screens: {
                'sm': {'max': '639px'}, // desktop first instead, this one could be easily supported with a small change I think
                'sm-to-md': {'min': '640px', 'max': '767px'}, // range, trickier, might still be doable under a few conditions
            },
            ...
        },
    },
};

RicSala · 2023-09-20T15:47:07Z

Super handy, thanks!

angel-langdon · 2023-11-08T20:17:50Z

Simple React component to display the current value:

I use an environment variable to prevent displaying this component in production

export default function BreakpointDisplay() {
  if (process.env.NEXT_PUBLIC_ENV == "DEV") {
    return (
      <div className="absolute bottom-3 right-3 bg-black">
        <span className="sm:hidden">base</span>
        <span className="hidden sm:block lg:hidden">sm</span>
        <span className="hidden lg:block xl:hidden">lg</span>
        <span className="hidden xl:block 2xl:hidden">xl</span>
        <span className="hidden 2xl:block 3xl:hidden">2xl</span>
        <span className="hidden 3xl:block 4xl:hidden">3xl</span>
      </div>
    );
  }
  return null;
}

Dineshs91 · 2024-09-13T06:22:27Z

I've built a free chrome extension Tailwind responsive breakpoint display if anyone is looking to not adding their own code or need a chrome extension.

	<div class="flex items-center m-2 fixed bottom-0 right-0 border border-gray-400 rounded p-2 bg-gray-300 text-pink-600 text-sm">
	<svg class="h-6 w-auto inline" viewBox="0 0 80 64" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path fill="url(#paint0_linear)" fill-rule="evenodd" clip-rule="evenodd" d="M32 16C24.8 16 20.3 19.6 18.5 26.8C21.2 23.2 24.35 21.85 27.95 22.75C30.004 23.2635 31.4721 24.7536 33.0971 26.4031C35.7443 29.0901 38.8081 32.2 45.5 32.2C52.7 32.2 57.2 28.6 59 21.4C56.3 25 53.15 26.35 49.55 25.45C47.496 24.9365 46.0279 23.4464 44.4029 21.7969C41.7557 19.1099 38.6919 16 32 16ZM18.5 32.2C11.3 32.2 6.8 35.8 5 43C7.7 39.4 10.85 38.05 14.45 38.95C16.504 39.4635 17.9721 40.9536 19.5971 42.6031C22.2443 45.2901 25.3081 48.4 32 48.4C39.2 48.4 43.7 44.8 45.5 37.6C42.8 41.2 39.65 42.55 36.05 41.65C33.996 41.1365 32.5279 39.6464 30.9029 37.9969C28.2557 35.3099 25.1919 32.2 18.5 32.2Z"></path>
	<defs>
	<linearGradient id="paint0_linear" x1="3.5" y1="16" x2="59" y2="48" gradientUnits="userSpaceOnUse">
	<stop stop-color="#2298BD"></stop>
	<stop offset="1" stop-color="#0ED7B5"></stop>
	</linearGradient>
	</defs>
	</svg>
	Current breakpoint
	<span class="ml-1 sm:hidden md:hidden lg:hidden xl:hidden">default (< 640px)</span>
	<span class="ml-1 hidden sm:inline md:hidden font-extrabold">sm</span>
	<span class="ml-1 hidden md:inline lg:hidden font-extrabold">md</span>
	<span class="ml-1 hidden lg:inline xl:hidden font-extrabold">lg</span>
	<span class="ml-1 hidden xl:inline font-extrabold">xl</span>
	</div>

jonsugar/show-tailwind-breakpoint.html

jonsugar commented Oct 30, 2019 •

edited

Loading

danyelkeddah commented Oct 30, 2019

floriangaechter commented Oct 30, 2019

jonsugar commented Oct 30, 2019

TitasGailius commented Oct 30, 2019

jonsugar commented Oct 30, 2019 •

edited

Loading

Lelectrolux commented Oct 30, 2019 •

edited

Loading

mikemand commented Oct 30, 2019

Lelectrolux commented Oct 30, 2019 •

edited

Loading

RicSala commented Sep 20, 2023

angel-langdon commented Nov 8, 2023

Dineshs91 commented Sep 13, 2024

jonsugar/show-tailwind-breakpoint.html

jonsugar commented Oct 30, 2019 • edited Loading

danyelkeddah commented Oct 30, 2019

floriangaechter commented Oct 30, 2019

jonsugar commented Oct 30, 2019

TitasGailius commented Oct 30, 2019

jonsugar commented Oct 30, 2019 • edited Loading

Lelectrolux commented Oct 30, 2019 • edited Loading

mikemand commented Oct 30, 2019

Lelectrolux commented Oct 30, 2019 • edited Loading

RicSala commented Sep 20, 2023

angel-langdon commented Nov 8, 2023

Dineshs91 commented Sep 13, 2024

jonsugar commented Oct 30, 2019 •

edited

Loading

jonsugar commented Oct 30, 2019 •

edited

Loading

Lelectrolux commented Oct 30, 2019 •

edited

Loading

Lelectrolux commented Oct 30, 2019 •

edited

Loading