├── .gitignore ├── LICENSE ├── README.md ├── dist └── tailwind.css ├── index.html ├── package.json ├── postcss.config.js ├── src └── index.js ├── static └── examle.png └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn.lock 3 | package-lock.json 4 | .idea 5 | 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Jeroen Gerits 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tailwind CSS ~ Debug Mode 2 | 3 | A plugin that provides a `debug` component that makes it visually easier to view the document structure. 4 | 5 | ## Preview 6 | 7 | ![](static/examle.png) 8 | 9 | ## Example 10 | 11 | View an example of the debug mode in action: [https://jeroengerits.github.io/tailwind-debug-mode/](https://jeroengerits.github.io/tailwind-debug-mode/) 12 | 13 | ## Basic usage 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | ``` 21 | 22 | > Currently, the plugin only supports the `debug` component on a body element. 23 | 24 | ## Installation 25 | 26 | Install the plugin 27 | 28 | ```sh 29 | # Using npm 30 | npm install tailwind-debug-mode 31 | 32 | # Using Yarn 33 | yarn add tailwind-debug-mode 34 | ``` 35 | 36 | Then add the plugin to your `tailwind.config.js` file: 37 | 38 | ```js 39 | // tailwind.config.js 40 | module.exports = { 41 | plugins: [ 42 | require('tailwind-debug-mode'), 43 | // ... 44 | ], 45 | } 46 | ``` 47 | 48 | ## Configuration 49 | 50 | Optionally - define your custom color scheme 51 | 52 | ```js 53 | // tailwind.config.js 54 | module.exports = { 55 | plugins: [ 56 | require('tailwind-debug-mode')({ 57 | wireColor: '#000000cc', // the color of the wires 58 | svgColor: '#000000cc', // the color of the svg 59 | textColor: '#33333399', // the color of the text on hover 60 | inputColor: '#33333322', // the background color of input elements 61 | }), 62 | // ... 63 | ], 64 | } 65 | ``` 66 | -------------------------------------------------------------------------------- /dist/tailwind.css: -------------------------------------------------------------------------------- 1 | /* 2 | ! tailwindcss v3.0.22 | MIT License | https://tailwindcss.com 3 | */ 4 | 5 | /* 6 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 7 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 8 | */ 9 | 10 | *, 11 | ::before, 12 | ::after { 13 | box-sizing: border-box; 14 | /* 1 */ 15 | border-width: 0; 16 | /* 2 */ 17 | border-style: solid; 18 | /* 2 */ 19 | border-color: #e5e7eb; 20 | /* 2 */ 21 | } 22 | 23 | ::before, 24 | ::after { 25 | --tw-content: ''; 26 | } 27 | 28 | /* 29 | 1. Use a consistent sensible line-height in all browsers. 30 | 2. Prevent adjustments of font size after orientation changes in iOS. 31 | 3. Use a more readable tab size. 32 | 4. Use the user's configured `sans` font-family by default. 33 | */ 34 | 35 | html { 36 | line-height: 1.5; 37 | /* 1 */ 38 | -webkit-text-size-adjust: 100%; 39 | /* 2 */ 40 | -moz-tab-size: 4; 41 | /* 3 */ 42 | -o-tab-size: 4; 43 | tab-size: 4; 44 | /* 3 */ 45 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 46 | 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 47 | 'Segoe UI Symbol', 'Noto Color Emoji'; 48 | /* 4 */ 49 | } 50 | 51 | /* 52 | 1. Remove the margin in all browsers. 53 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. 54 | */ 55 | 56 | body { 57 | margin: 0; 58 | /* 1 */ 59 | line-height: inherit; 60 | /* 2 */ 61 | } 62 | 63 | /* 64 | 1. Add the correct height in Firefox. 65 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 66 | 3. Ensure horizontal rules are visible by default. 67 | */ 68 | 69 | hr { 70 | height: 0; 71 | /* 1 */ 72 | color: inherit; 73 | /* 2 */ 74 | border-top-width: 1px; 75 | /* 3 */ 76 | } 77 | 78 | /* 79 | Add the correct text decoration in Chrome, Edge, and Safari. 80 | */ 81 | 82 | abbr:where([title]) { 83 | -webkit-text-decoration: underline dotted; 84 | text-decoration: underline dotted; 85 | } 86 | 87 | /* 88 | Remove the default font size and weight for headings. 89 | */ 90 | 91 | h1, 92 | h2, 93 | h3, 94 | h4, 95 | h5, 96 | h6 { 97 | font-size: inherit; 98 | font-weight: inherit; 99 | } 100 | 101 | /* 102 | Reset links to optimize for opt-in styling instead of opt-out. 103 | */ 104 | 105 | a { 106 | color: inherit; 107 | text-decoration: inherit; 108 | } 109 | 110 | /* 111 | Add the correct font weight in Edge and Safari. 112 | */ 113 | 114 | b, 115 | strong { 116 | font-weight: bolder; 117 | } 118 | 119 | /* 120 | 1. Use the user's configured `mono` font family by default. 121 | 2. Correct the odd `em` font sizing in all browsers. 122 | */ 123 | 124 | code, 125 | kbd, 126 | samp, 127 | pre { 128 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 129 | 'Courier New', monospace; 130 | /* 1 */ 131 | font-size: 1em; 132 | /* 2 */ 133 | } 134 | 135 | /* 136 | Add the correct font size in all browsers. 137 | */ 138 | 139 | small { 140 | font-size: 80%; 141 | } 142 | 143 | /* 144 | Prevent `sub` and `sup` elements from affecting the line height in all browsers. 145 | */ 146 | 147 | sub, 148 | sup { 149 | font-size: 75%; 150 | line-height: 0; 151 | position: relative; 152 | vertical-align: baseline; 153 | } 154 | 155 | sub { 156 | bottom: -0.25em; 157 | } 158 | 159 | sup { 160 | top: -0.5em; 161 | } 162 | 163 | /* 164 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 165 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 166 | 3. Remove gaps between table borders by default. 167 | */ 168 | 169 | table { 170 | text-indent: 0; 171 | /* 1 */ 172 | border-color: inherit; 173 | /* 2 */ 174 | border-collapse: collapse; 175 | /* 3 */ 176 | } 177 | 178 | /* 179 | 1. Change the font styles in all browsers. 180 | 2. Remove the margin in Firefox and Safari. 181 | 3. Remove default padding in all browsers. 182 | */ 183 | 184 | button, 185 | input, 186 | optgroup, 187 | select, 188 | textarea { 189 | font-family: inherit; 190 | /* 1 */ 191 | font-size: 100%; 192 | /* 1 */ 193 | line-height: inherit; 194 | /* 1 */ 195 | color: inherit; 196 | /* 1 */ 197 | margin: 0; 198 | /* 2 */ 199 | padding: 0; 200 | /* 3 */ 201 | } 202 | 203 | /* 204 | Remove the inheritance of text transform in Edge and Firefox. 205 | */ 206 | 207 | button, 208 | select { 209 | text-transform: none; 210 | } 211 | 212 | /* 213 | 1. Correct the inability to style clickable types in iOS and Safari. 214 | 2. Remove default button styles. 215 | */ 216 | 217 | button, 218 | [type='button'], 219 | [type='reset'], 220 | [type='submit'] { 221 | -webkit-appearance: button; 222 | /* 1 */ 223 | background-color: transparent; 224 | /* 2 */ 225 | background-image: none; 226 | /* 2 */ 227 | } 228 | 229 | /* 230 | Use the modern Firefox focus style for all focusable elements. 231 | */ 232 | 233 | :-moz-focusring { 234 | outline: auto; 235 | } 236 | 237 | /* 238 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 239 | */ 240 | 241 | :-moz-ui-invalid { 242 | box-shadow: none; 243 | } 244 | 245 | /* 246 | Add the correct vertical alignment in Chrome and Firefox. 247 | */ 248 | 249 | progress { 250 | vertical-align: baseline; 251 | } 252 | 253 | /* 254 | Correct the cursor style of increment and decrement buttons in Safari. 255 | */ 256 | 257 | ::-webkit-inner-spin-button, 258 | ::-webkit-outer-spin-button { 259 | height: auto; 260 | } 261 | 262 | /* 263 | 1. Correct the odd appearance in Chrome and Safari. 264 | 2. Correct the outline style in Safari. 265 | */ 266 | 267 | [type='search'] { 268 | -webkit-appearance: textfield; 269 | /* 1 */ 270 | outline-offset: -2px; 271 | /* 2 */ 272 | } 273 | 274 | /* 275 | Remove the inner padding in Chrome and Safari on macOS. 276 | */ 277 | 278 | ::-webkit-search-decoration { 279 | -webkit-appearance: none; 280 | } 281 | 282 | /* 283 | 1. Correct the inability to style clickable types in iOS and Safari. 284 | 2. Change font properties to `inherit` in Safari. 285 | */ 286 | 287 | ::-webkit-file-upload-button { 288 | -webkit-appearance: button; 289 | /* 1 */ 290 | font: inherit; 291 | /* 2 */ 292 | } 293 | 294 | /* 295 | Add the correct display in Chrome and Safari. 296 | */ 297 | 298 | summary { 299 | display: list-item; 300 | } 301 | 302 | /* 303 | Removes the default spacing and border for appropriate elements. 304 | */ 305 | 306 | blockquote, 307 | dl, 308 | dd, 309 | h1, 310 | h2, 311 | h3, 312 | h4, 313 | h5, 314 | h6, 315 | hr, 316 | figure, 317 | p, 318 | pre { 319 | margin: 0; 320 | } 321 | 322 | fieldset { 323 | margin: 0; 324 | padding: 0; 325 | } 326 | 327 | legend { 328 | padding: 0; 329 | } 330 | 331 | ol, 332 | ul, 333 | menu { 334 | list-style: none; 335 | margin: 0; 336 | padding: 0; 337 | } 338 | 339 | /* 340 | Prevent resizing textareas horizontally by default. 341 | */ 342 | 343 | textarea { 344 | resize: vertical; 345 | } 346 | 347 | /* 348 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 349 | 2. Set the default placeholder color to the user's configured gray 400 color. 350 | */ 351 | 352 | input::-moz-placeholder, 353 | textarea::-moz-placeholder { 354 | opacity: 1; 355 | /* 1 */ 356 | color: #9ca3af; 357 | /* 2 */ 358 | } 359 | 360 | input:-ms-input-placeholder, 361 | textarea:-ms-input-placeholder { 362 | opacity: 1; 363 | /* 1 */ 364 | color: #9ca3af; 365 | /* 2 */ 366 | } 367 | 368 | input::placeholder, 369 | textarea::placeholder { 370 | opacity: 1; 371 | /* 1 */ 372 | color: #9ca3af; 373 | /* 2 */ 374 | } 375 | 376 | /* 377 | Set the default cursor for buttons. 378 | */ 379 | 380 | button, 381 | [role='button'] { 382 | cursor: pointer; 383 | } 384 | 385 | /* 386 | Make sure disabled buttons don't get the pointer cursor. 387 | */ 388 | 389 | :disabled { 390 | cursor: default; 391 | } 392 | 393 | /* 394 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 395 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 396 | This can trigger a poorly considered lint error in some tools but is included by design. 397 | */ 398 | 399 | img, 400 | svg, 401 | video, 402 | canvas, 403 | audio, 404 | iframe, 405 | embed, 406 | object { 407 | display: block; 408 | /* 1 */ 409 | vertical-align: middle; 410 | /* 2 */ 411 | } 412 | 413 | /* 414 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 415 | */ 416 | 417 | img, 418 | video { 419 | max-width: 100%; 420 | height: auto; 421 | } 422 | 423 | /* 424 | Ensure the default browser behavior of the `hidden` attribute. 425 | */ 426 | 427 | [hidden] { 428 | display: none; 429 | } 430 | 431 | *, 432 | ::before, 433 | ::after { 434 | --tw-translate-x: 0; 435 | --tw-translate-y: 0; 436 | --tw-rotate: 0; 437 | --tw-skew-x: 0; 438 | --tw-skew-y: 0; 439 | --tw-scale-x: 1; 440 | --tw-scale-y: 1; 441 | --tw-pan-x: ; 442 | --tw-pan-y: ; 443 | --tw-pinch-zoom: ; 444 | --tw-scroll-snap-strictness: proximity; 445 | --tw-ordinal: ; 446 | --tw-slashed-zero: ; 447 | --tw-numeric-figure: ; 448 | --tw-numeric-spacing: ; 449 | --tw-numeric-fraction: ; 450 | --tw-ring-inset: ; 451 | --tw-ring-offset-width: 0px; 452 | --tw-ring-offset-color: #fff; 453 | --tw-ring-color: rgb(59 130 246 / 0.5); 454 | --tw-ring-offset-shadow: 0 0 #0000; 455 | --tw-ring-shadow: 0 0 #0000; 456 | --tw-shadow: 0 0 #0000; 457 | --tw-shadow-colored: 0 0 #0000; 458 | --tw-blur: ; 459 | --tw-brightness: ; 460 | --tw-contrast: ; 461 | --tw-grayscale: ; 462 | --tw-hue-rotate: ; 463 | --tw-invert: ; 464 | --tw-saturate: ; 465 | --tw-sepia: ; 466 | --tw-drop-shadow: ; 467 | --tw-backdrop-blur: ; 468 | --tw-backdrop-brightness: ; 469 | --tw-backdrop-contrast: ; 470 | --tw-backdrop-grayscale: ; 471 | --tw-backdrop-hue-rotate: ; 472 | --tw-backdrop-invert: ; 473 | --tw-backdrop-opacity: ; 474 | --tw-backdrop-saturate: ; 475 | --tw-backdrop-sepia: ; 476 | } 477 | 478 | .container { 479 | width: 100%; 480 | } 481 | 482 | @media (min-width: 640px) { 483 | .container { 484 | max-width: 640px; 485 | } 486 | } 487 | 488 | @media (min-width: 768px) { 489 | .container { 490 | max-width: 768px; 491 | } 492 | } 493 | 494 | @media (min-width: 1024px) { 495 | .container { 496 | max-width: 1024px; 497 | } 498 | } 499 | 500 | @media (min-width: 1280px) { 501 | .container { 502 | max-width: 1280px; 503 | } 504 | } 505 | 506 | @media (min-width: 1536px) { 507 | .container { 508 | max-width: 1536px; 509 | } 510 | } 511 | 512 | body.debug img { 513 | opacity: 0.25 !important; 514 | filter: grayscale(100) !important; 515 | transition: all 0.5s ease-in-out !important; 516 | outline: 1px solid #000000cc !important; 517 | } 518 | 519 | body.debug img:hover { 520 | opacity: 0.75 !important; 521 | } 522 | 523 | body.debug *, 524 | body.debug *::before, 525 | body.debug *::after, 526 | body.debug, 527 | body.debug::before, 528 | body.debug::after { 529 | user-drag: none !important; 530 | text-shadow: none !important; 531 | -webkit-user-select: none !important; 532 | -moz-user-select: none !important; 533 | -ms-user-select: none !important; 534 | user-select: none !important; 535 | border-color: transparent !important; 536 | background: none #fbfbf8 !important; 537 | transition: all 0.5s ease-in-out !important; 538 | color: transparent !important; 539 | outline: 1px solid #000000cc !important; 540 | } 541 | 542 | body.debug *:hover > * { 543 | color: #33333399 !important; 544 | z-index: 1000 !important; 545 | outline: 2px solid #000000cc !important; 546 | } 547 | 548 | body.debug svg, 549 | body.debug svg:hover > * { 550 | outline: none !important; 551 | box-shadow: none !important; 552 | } 553 | 554 | body.debug svg *, 555 | body.debug svg *:hover { 556 | color: #000000cc !important; 557 | outline: none !important; 558 | box-shadow: none !important; 559 | } 560 | 561 | body.debug input, 562 | body.debug input:hover { 563 | background-color: #33333322 !important; 564 | outline: none !important; 565 | box-shadow: none !important; 566 | } 567 | 568 | body.debug::before { 569 | content: ' 2 | 3 | 4 | 5 | 9 | 10 | Tailwind Debug Example - Templates by https://tailblocks.cc/ 11 | 15 | 24 | 25 | 26 |
40 | 52 | ON GITHUB 57 |
58 |
59 |
60 | 61 | 71 | 72 | 73 | Tailblocks 74 | 75 | 81 | 97 |
98 |
99 |
100 |
101 |
102 |

Pricing

103 |

104 | Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical. 105 |

106 |
107 | 108 | 109 |
110 |
111 |
112 |
113 |
116 |

START

117 |

118 | Free 119 |

120 |

121 | 124 | 133 | 134 | Vexillologist pitchfork 136 |

137 |

138 | 141 | 150 | 151 | Tumeric plaid portland 153 |

154 |

155 | 158 | 167 | 168 | Mixtape chillwave tumeric 170 |

171 | 187 |

188 | Literally you probably haven't heard of them jean shorts. 189 |

190 |
191 |
192 |
193 |
196 | POPULAR 200 |

PRO

201 |

204 | $38 205 | /mo 206 |

207 |

208 | 211 | 220 | 221 | Vexillologist pitchfork 223 |

224 |

225 | 228 | 237 | 238 | Tumeric plaid portland 240 |

241 |

242 | 245 | 254 | 255 | Hexagon neutra unicorn 257 |

258 |

259 | 262 | 271 | 272 | Mixtape chillwave tumeric 274 |

275 | 291 |

292 | Literally you probably haven't heard of them jean shorts. 293 |

294 |
295 |
296 |
297 |
300 |

BUSINESS

301 |

304 | $56 305 | /mo 306 |

307 |

308 | 311 | 320 | 321 | Vexillologist pitchfork 323 |

324 |

325 | 328 | 337 | 338 | Tumeric plaid portland 340 |

341 |

342 | 345 | 354 | 355 | Hexagon neutra unicorn 357 |

358 |

359 | 362 | 371 | 372 | Vexillologist pitchfork 374 |

375 |

376 | 379 | 388 | 389 | Mixtape chillwave tumeric 391 |

392 | 408 |

409 | Literally you probably haven't heard of them jean shorts. 410 |

411 |
412 |
413 |
414 |
417 |

SPECIAL

418 |

421 | $72 422 | /mo 423 |

424 |

425 | 428 | 437 | 438 | Vexillologist pitchfork 440 |

441 |

442 | 445 | 454 | 455 | Tumeric plaid portland 457 |

458 |

459 | 462 | 471 | 472 | Hexagon neutra unicorn 474 |

475 |

476 | 479 | 488 | 489 | Vexillologist pitchfork 491 |

492 |

493 | 496 | 505 | 506 | Mixtape chillwave tumeric 508 |

509 | 525 |

526 | Literally you probably haven't heard of them jean shorts. 527 |

528 |
529 |
530 |
531 |
532 |
533 |
536 |

537 | Knausgaard typewriter readymade marfa 538 |

539 |

540 | Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid swag typewriter 541 | affogato, hella selvage wolf narwhal dreamcatcher. 542 |

543 |
544 |
545 | 546 | 552 |
553 | 558 |
559 |

560 | Neutra shabby chic ramps, viral fixie. 561 |

562 |
563 | 581 | 602 |
603 |
604 |
605 | hero 612 |
613 |
614 | 615 |
616 |
617 |

618 | Slow-carb next level shoindcgoitch ethical authentic, poko scenester 619 |

620 |

621 | Poke slow-carb mixtape knausgaard, typewriter street art gentrify hammock starladder 622 | roathse. Craies vegan tousled etsy austin. 623 |

624 |
625 |
628 |

Sign Up

629 |
630 | 631 | 637 |
638 |
639 | 640 | 646 |
647 | 652 |

653 | Literally you probably haven't heard of them jean shorts. 654 |

655 |
656 |
657 |
658 |
659 |
660 |

BRAND NAME

661 |

662 | Animated Night Hill Illustrations 663 |

664 |
665 | Description 668 | Reviews 669 | Details 670 |
671 |

672 | Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha taximy chia 673 | microdosing tilde DIY. XOXO fam inxigo juiceramps cornhole raw denim forage brooklyn. 674 | Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle 675 | pour-over, neutra jean. 676 |

677 |
678 | Color 679 | Blue 680 |
681 |
682 | Size 683 | Medium 684 |
685 |
686 | Quantity 687 | 4 688 |
689 |
690 | $58.00 691 | 696 | 712 |
713 |
714 | ecommerce 719 |
720 |
721 |
722 |
723 |

724 | Pitchfork Kickstarter Taxidermy 725 |

726 |

727 | Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile 728 | poke farm-to-table. 729 |

730 |
731 |
732 |
733 |
734 |
737 | 746 | 747 | 748 |
749 |

Shooting Stars

750 |

751 | Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm. 752 |

753 |
754 |
755 |
756 |
757 |
760 | 769 | 770 | 771 | 772 | 773 |
774 |

The Catalyzer

775 |

776 | Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm. 777 |

778 |
779 |
780 |
781 |
782 |
785 | 794 | 795 | 796 | 797 |
798 |

Neptune

799 |

800 | Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm. 801 |

802 |
803 |
804 |
805 |
806 |
809 | 818 | 821 | 822 |
823 |

Melanchole

824 |

825 | Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm. 826 |

827 |
828 |
829 |
830 |
831 |
834 | 843 | 844 | 845 |
846 |

Bunker

847 |

848 | Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm. 849 |

850 |
851 |
852 |
853 |
854 |
857 | 866 | 867 | 868 |
869 |

Ramona Falls

870 |

871 | Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm. 872 |

873 |
874 |
875 |
876 | 881 |
882 |
883 |
884 |

885 | Raw Denim Heirloom Man Braid 886 |

887 |

888 | Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub 889 | indxgo juice poutine, ramps microdosing banh mi pug. 890 |

891 |
892 |
893 |
894 |
895 | 904 | 905 | 906 | 907 | Authentic Cliche Forage 908 |
909 |
910 |
911 |
912 | 921 | 922 | 923 | 924 | Kinfolk Chips Snackwave 925 |
926 |
927 |
928 |
929 | 938 | 939 | 940 | 941 | Coloring Book Ethical 942 |
943 |
944 |
945 |
946 | 955 | 956 | 957 | 958 | Typewriter Polaroid Cray 959 |
960 |
961 |
962 |
963 | 972 | 973 | 974 | 975 | Pack Truffaut Blue 976 |
977 |
978 |
979 |
980 | 989 | 990 | 991 | 992 | The Catcher In The Rye 993 |
994 |
995 |
996 | 1001 |
1002 |
1003 |
1004 |
1005 |
1006 | testimonial 1013 |

1014 | Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's 1015 | cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag 1016 | drinking vinegar cronut adaptogen squid fanny pack vaporware. 1017 |

1018 | 1019 |

1020 | HOLDEN CAULFIELD 1021 |

1022 |

Senior Product Designer

1023 |
1024 |
1025 |
1026 |
1027 | testimonial 1034 |

1035 | Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's 1036 | cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag 1037 | drinking vinegar cronut adaptogen squid fanny pack vaporware. 1038 |

1039 | 1040 |

1041 | ALPER KAMU 1042 |

1043 |

UI Develeoper

1044 |
1045 |
1046 |
1047 |
1048 | testimonial 1055 |

1056 | Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's 1057 | cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag 1058 | drinking vinegar cronut adaptogen squid fanny pack vaporware. 1059 |

1060 | 1061 |

1062 | HENRY LETHAM 1063 |

1064 |

CTO

1065 |
1066 |
1067 |
1068 |
1069 |
1070 | 1292 | 1293 | 1294 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "license": "MIT", 3 | "version": "0.0.8", 4 | "name": "tailwind-debug-mode", 5 | "description": "A Tailwind CSS plugin that makes it easier to debug layouts.", 6 | "repository": "https://github.com/jeroengerits/tailwind-debug-mode", 7 | "author": "Jeroen Gerits ", 8 | "main": "src/index.js", 9 | "keywords": [ 10 | "tailwind", 11 | "tailwind-plugin", 12 | "tailwindcss", 13 | "tailwindcss-plugin", 14 | "plugin", 15 | "debug", 16 | "debug-mode", 17 | "layout", 18 | "debug-layout", 19 | "debug-layout-mode" 20 | ], 21 | "files": [ 22 | "src/*.js" 23 | ], 24 | "publishConfig": { 25 | "access": "public" 26 | }, 27 | "prettier": { 28 | "printWidth": 100, 29 | "semi": false, 30 | "singleQuote": true, 31 | "trailingComma": "es5" 32 | }, 33 | "scripts": { 34 | "dev": "concurrently \"npm run serve\" \"npm run watch\"", 35 | "serve": "live-server .", 36 | "watch": "npm run build -- -w", 37 | "build": "tailwindcss -o dist/tailwind.css", 38 | "format": "prettier . --write" 39 | }, 40 | "peerDependencies": { 41 | "tailwindcss": ">=3.0.0" 42 | }, 43 | "devDependencies": { 44 | "autoprefixer": "^10.4.2", 45 | "concurrently": "^7.0.0", 46 | "live-server": "^1.2.1", 47 | "postcss": "^8.4.6", 48 | "prettier": "^2.5.1", 49 | "tailwindcss": "^3.0.22" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin') 2 | 3 | const debug = plugin.withOptions(function ( 4 | options = { 5 | wireColor: 'black', 6 | textColor: 'transparent', 7 | svgColor: 'black', 8 | } 9 | ) { 10 | return function ({ addComponents, theme }) { 11 | // Inspired by: https://github.com/jorenvanhee/tailwindcss-debug-screens 12 | const screens = { 13 | [`body.debug::before`]: Object.assign({ 14 | content: `' 40 | (screens[`@screen ${screen}`] = { 41 | [`body.debug::before`]: { 42 | content: `'${screen}'`, 43 | }, 44 | }) 45 | ) 46 | 47 | // Inspired by: https://twitter.com/w3bits_/status/1443901426292326407 48 | const wires = { 49 | 'body.debug img': { 50 | opacity: '.25 !important', 51 | filter: 'grayscale(100) !important', 52 | transition: 'all .5s ease-in-out !important', 53 | outline: `1px solid ${options.wireColor} !important`, 54 | }, 55 | 'body.debug img:hover': { 56 | opacity: '.75 !important', 57 | }, 58 | 'body.debug *, body.debug *::before, body.debug *::after, body.debug, body.debug::before, body.debug::after': 59 | { 60 | userDrag: 'none !important', 61 | textShadow: 'none !important', 62 | userSelect: 'none !important', 63 | borderColor: 'transparent !important', 64 | background: 'none #fbfbf8 !important', 65 | transition: 'all .5s ease-in-out !important', 66 | color: `transparent !important`, 67 | outline: `1px solid ${options.wireColor} !important`, 68 | }, 69 | 'body.debug *:hover > *': { 70 | color: `${options.textColor} !important`, 71 | zIndex: '1000 !important', 72 | outline: `2px solid ${options.wireColor} !important`, 73 | }, 74 | 'body.debug svg, body.debug svg:hover > *': { 75 | outline: 'none !important', 76 | boxShadow: 'none !important', 77 | }, 78 | 'body.debug svg *, body.debug svg *:hover': { 79 | color: `${options.svgColor} !important`, 80 | outline: 'none !important', 81 | boxShadow: 'none !important', 82 | }, 83 | 'body.debug input, body.debug input:hover': { 84 | backgroundColor: `${options.inputColor} !important`, 85 | outline: 'none !important', 86 | boxShadow: 'none !important', 87 | }, 88 | } 89 | addComponents([wires, screens]) 90 | } 91 | }) 92 | 93 | module.exports = debug 94 | -------------------------------------------------------------------------------- /static/examle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeroengerits/tailwind-debug-mode/11bd6184e2a9e9994c2c5facb754318160d0f41a/static/examle.png -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ['./index.html'], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [ 7 | require('./src')({ 8 | screensColor: '#000000cc', 9 | wireColor: '#000000cc', 10 | svgColor: '#000000cc', 11 | textColor: '#33333399', 12 | inputColor: '#33333322', 13 | }), 14 | ], 15 | } 16 | --------------------------------------------------------------------------------