├── package.json
├── README.md
├── index.js
└── src.js


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwind-breakpoint-tool",
 3 |   "version": "1.0.0",
 4 |   "description": "A simple breakpoint tool for development of your Tailwind sites.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/thedevdojo/tailwind-breakpoint-tool.git"
12 |   },
13 |   "keywords": [
14 |     "tailwindcss",
15 |     "tailwind",
16 |     "tailwind",
17 |     "tools",
18 |     "breakpoint",
19 |     "responsive"
20 |   ],
21 |   "author": "Tony Lea",
22 |   "license": "ISC",
23 |   "bugs": {
24 |     "url": "https://github.com/thedevdojo/tailwind-breakpoint-tool/issues"
25 |   },
26 |   "homepage": "https://github.com/thedevdojo/tailwind-breakpoint-tool#readme"
27 | }
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🛠️ TailwindCSS Breakpoint Tool
 2 | 
 3 | A simple breakpoint notification that shows up at the top of the screen when you resize your window and hides after you stop resizing.
 4 | 
 5 | ```html
 6 | <script src="//unpkg.com/tailwind-breakpoint-tool" defer></script>
 7 | ```
 8 | 
 9 | https://github.com/thedevdojo/tailwind-breakpoint-tool/assets/601261/5e7af794-1ccd-4f33-9e76-28e26f0a0662
10 | 
11 | ## How to use
12 | 
13 | This tool is only meant to be used during development and it works pairs perfectly with the <a href="https://tailwindcss.com/docs/installation/play-cdn" target="_blank">Tailwind Play CDN</a>. You can include this tool right alongside it:
14 | 
15 | ```html
16 | <script src="//unpkg.com/tailwind-breakpoint-tool" defer></script>
17 | <!-- Right alongside the Play CDN -->
18 | <script src="https://cdn.tailwindcss.com"></script>
19 | ```
20 | Resize your window and see the little breakpoint tool pop down from the top of the screen 🔮
21 | 
22 | ---
23 | 
24 | This tool utilizes some Tailwind classes itself, so if you are not utilizing the TailwindCDN there may be some classes that do not display correctly. In this case you may just want to copy and paste the javascript from the `index.js` anywhere on your page.
25 | 
26 | ```html
27 | <script>
28 | // copy/paste content from index.js here.
29 | </script>
30 | ```
31 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded",function(){let e=null,n="breakPoints",t=function(){document.getElementById(n)&&(document.getElementById(n).classList.add("-translate-y-full"),document.getElementById(n).classList.remove("mt-3"),setTimeout(function(){document.getElementById(n).remove()},500))};window.addEventListener("resize",function(l){let s=window.innerWidth,d=document.createElement("div");if(d.id=n,d.className="fixed top-0 ease-out duration-300 flex -translate-y-full items-center w-auto px-2 py-1  text-xs text-gray-200 -translate-x-1/2 border rounded-full border-neutral-200/50 dark:border-neutral-700/70 shadow-3xl backdrop-blur-lg bg-white/80 dark:bg-neutral-900 left-1/2",d.style.zIndex=9999,!document.getElementById(n)){let a=`
 2 |                     <div class="px-1.5 py-px font-bold bg-blue-500 rounded-full">
 3 |                         <span class="inline-block sm:hidden">XS</span>
 4 |                         <span class="hidden sm:inline-block md:hidden">SM</span>
 5 |                         <span class="hidden md:inline-block lg:hidden">MD</span>
 6 |                         <span class="hidden lg:inline-block xl:hidden">LG</span>
 7 |                         <span class="hidden xl:inline-block">XL</span>
 8 |                     </div>
 9 |                     <span class="px-2 py-1 text-black dark:text-white"><span id="currentWidth">${s}</span>px</span>
10 |                     <span id="resizerElementCloseButton" class="flex items-center justify-center w-5 h-5 text-gray-500 rounded-full cursor-pointer dark:text-neutral-300 bg-neutral-200/60 dark:bg-neutral-700/80 dark:hover:bg-neutral-700 hover:bg-neutral-200">
11 |                         <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
12 |                     </span>
13 |                 `;d.innerHTML=a,document.body.appendChild(d),setTimeout(function(){document.getElementById("resizerElementCloseButton").addEventListener("click",function(e){t()}),d.classList.remove("-translate-y-full"),d.classList.add("mt-3")},1)}document.getElementById("currentWidth").innerText=s,clearInterval(e),e=setInterval(function(){t()},3e3)})});


--------------------------------------------------------------------------------
/src.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function(){
 2 |     let removeElementInterval = null;
 3 |     const removeElementDelay = 3000;
 4 |     const resizerElementId = 'breakPoints';
 5 |     const breakPointToolRemoveResizerElement = function(){
 6 |         if(document.getElementById(resizerElementId)){
 7 |             document.getElementById(resizerElementId).classList.add('-translate-y-full');
 8 |             document.getElementById(resizerElementId).classList.remove('mt-3');
 9 |             setTimeout(function(){
10 |                 document.getElementById(resizerElementId).remove();
11 |             }, 500);
12 |         }
13 |     }
14 |     
15 |     window.addEventListener('resize', function(event){
16 |         
17 |         const currentWidth = window.innerWidth;
18 |         const responsiveSizeEl = document.createElement("div");
19 |         responsiveSizeEl.id = resizerElementId;
20 |         responsiveSizeEl.className = 'fixed top-0 ease-out duration-300 flex -translate-y-full items-center w-auto px-2 py-1  text-xs text-gray-200 -translate-x-1/2 border rounded-full border-neutral-200/50 dark:border-neutral-700/70 shadow-3xl backdrop-blur-lg bg-white/80 dark:bg-neutral-900 left-1/2'
21 |         responsiveSizeEl.style.zIndex = 9999;
22 | 
23 |         if(!document.getElementById(resizerElementId)){
24 |             const responsiveSizeHTML = `
25 |                     <div class="px-1.5 py-px font-bold bg-blue-500 rounded-full">
26 |                         <span class="inline-block sm:hidden">XS</span>
27 |                         <span class="hidden sm:inline-block md:hidden">SM</span>
28 |                         <span class="hidden md:inline-block lg:hidden">MD</span>
29 |                         <span class="hidden lg:inline-block xl:hidden">LG</span>
30 |                         <span class="hidden xl:inline-block">XL</span>
31 |                     </div>
32 |                     <span class="px-2 py-1 text-black dark:text-white"><span id="currentWidth">${currentWidth}</span>px</span>
33 |                     <span id="resizerElementCloseButton" class="flex items-center justify-center w-5 h-5 text-gray-500 rounded-full cursor-pointer dark:text-neutral-300 bg-neutral-200/60 dark:bg-neutral-700/80 dark:hover:bg-neutral-700 hover:bg-neutral-200">
34 |                         <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
35 |                     </span>
36 |                 `;
37 |             responsiveSizeEl.innerHTML = responsiveSizeHTML;
38 |             document.body.appendChild(responsiveSizeEl);
39 |             setTimeout(function(){
40 |                 document.getElementById('resizerElementCloseButton').addEventListener('click', function(event){
41 |                     breakPointToolRemoveResizerElement();
42 |                 });
43 |                 responsiveSizeEl.classList.remove('-translate-y-full');
44 |                 responsiveSizeEl.classList.add('mt-3');
45 |             }, 1);
46 |         }
47 | 
48 |         document.getElementById('currentWidth').innerText = currentWidth;
49 | 
50 |         clearInterval(removeElementInterval);
51 |         removeElementInterval = setInterval(function(){
52 |             breakPointToolRemoveResizerElement();
53 |         }, removeElementDelay);
54 |         
55 |     });
56 | });


--------------------------------------------------------------------------------