11ty & TailwindCSS
Brian Mitchell & Ryan Rampersad
The JAM stack is popular these days. Sometimes you’re building something a little smaller, and you want less churn and maintenance. What’s old is new again with Eleventy (11ty) - a simple static site generator. Join us for our talk about exploring 11ty and redesigning a place near and dear, JavaScriptMN.com.
JavaScript, APIs, Markup
Static site generator
Jekyll : Ruby :: 11ty : JavaScript
Data + Templates =✨11ty✨= Site
Omg templates
⚙️ Configurable ⚙️
no, seriously
And you probably want to
configure it at least a little
Minify CSS
Minify JS
Minify HTML
Cachebusting
Auto deploy
Transpile JS
Image optimizations
Bundler
Client side JS framework
We've long liked the idea of using static site generators to avoid complexity and improve performance, whenever the use case allows it. Although Eleventy has been around for a few years, it's recently caught our attention as it's matured and previous favorites such as Gatsby.js displayed some scalability problems. Eleventy is quick to learn and easy to build sites with. We also like the ease with which you can create semantic (and therefore more accessible) markup with its templating and its simple and robust support for pagination.
— ThoughtWorks (October 2020)
Bringing the “Script” back to JavaScript
Phase 1: "Semantic" CSS
Phase 2: Decoupling styles from structure
Phase 3: Content-agnostic CSS components
Phase 4: Content-agnostic components + utility classes
🔥 Phase 5: Utility-first CSS 🔥
Naming things
Look, I got lazy and I had to start saving space...
Abstraction soup!
Styled components, anyone?
Ok, I admit it, maybe it is classname soup too
What if many things in your websites and apps were really one-offs?
🤔
Discrete design tokens
“Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.” ��—Chris Messina, tech evangelist and former developer experience lead at Uber
With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development.���—Jina Anne
Orthogonal
Disclaimer�this one is off the rails
Disclaimer�this one is off the rails
Disclaimer: this one is off the rails
A few more things...
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e2e8f0}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#a0aec0}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#a0aec0}input::placeholder,textarea::placeholder{color:#a0aec0}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:"Dank Mono","Fira Code",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}.prose{color:#4a5568;max-width:65ch}.prose [class~=lead]{color:#4a5568;font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose a{color:#1a202c;text-decoration:underline}.prose strong{color:#1a202c;font-weight:600}.prose ol{counter-reset:list-counter;margin-top:1.25em;margin-bottom:1.25em}.prose ol>li{position:relative;counter-increment:list-counter;padding-left:1.75em}.prose ol>li::before{content:counter(list-counter) ".";position:absolute;font-weight:400;color:currentColor}.prose ul>li{position:relative;padding-left:1.75em}.prose ul>li::before{content:"";position:absolute;background-color:#cbd5e0;border-radius:50%;width:.375em;height:.375em;top:calc(.875em - .1875em);left:.25em}.prose hr{border-color:#e2e8f0;border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose blockquote{font-weight:500;font-style:italic;color:#1a202c;border-left-width:.25rem;border-left-color:#e2e8f0;quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose blockquote p:first-of-type::before{content:open-quote}.prose blockquote p:last-of-type::after{content:close-quote}.prose h1{color:#1a202c;font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose h2{color:#1a202c;font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose h3{color:#1a202c;font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose h4{color:#1a202c;font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose figure figcaption{color:#718096;font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose code{color:#1a202c;font-weight:600;font-size:.875em}.prose code::before{content:"`"}.prose code::after{content:"`"}.prose pre{color:#e2e8f0;background-color:#2d3748;overflow-x:auto;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-right:1.1428571em;padding-bottom:.8571429em;padding-left:1.1428571em}.prose pre code{background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:400;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose pre code::before{content:""}.prose pre code::after{content:""}.prose table{width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose thead{color:#1a202c;font-weight:600;border-bottom-width:1px;border-bottom-color:#cbd5e0}.prose thead th{vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose tbody tr{border-bottom-width:1px;border-bottom-color:#e2e8f0}.prose tbody tr:last-child{border-bottom-width:0}.prose tbody td{vertical-align:top;padding-top:.5714286em;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose{font-size:1rem;line-height:1.75}.prose p{margin-top:1.25em;margin-bottom:1.25em}.prose img{margin-top:2em;margin-bottom:2em}.prose video{margin-top:2em;margin-bottom:2em}.prose figure{margin-top:2em;margin-bottom:2em}.prose figure>*{margin-top:0;margin-bottom:0}.prose h2 code{font-size:.875em}.prose h3 code{font-size:.9em}.prose ul{margin-top:1.25em;margin-bottom:1.25em}.prose li{margin-top:.5em;margin-bottom:.5em}.prose ol>li:before{left:0}.prose>ul>li p{margin-top:.75em;margin-bottom:.75em}.prose>ul>li>:first-child{margin-top:1.25em}.prose>ul>li>:last-child{margin-bottom:1.25em}.prose>ol>li>:first-child{margin-top:1.25em}.prose>ol>li>:last-child{margin-bottom:1.25em}.prose ol ol,.prose ol ul,.prose ul ol,.prose ul ul{margin-top:.75em;margin-bottom:.75em}.prose hr+*{margin-top:0}.prose h2+*{margin-top:0}.prose h3+*{margin-top:0}.prose h4+*{margin-top:0}.prose thead th:first-child{padding-left:0}.prose thead th:last-child{padding-right:0}.prose tbody td:first-child{padding-left:0}.prose tbody td:last-child{padding-right:0}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}.space-x-0>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(0px * var(--space-x-reverse));margin-left:calc(0px * calc(1 - var(--space-x-reverse)))}.space-y-2>:not(template)~:not(template){--space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--space-y-reverse)));margin-bottom:calc(.5rem * var(--space-y-reverse))}.space-y-4>:not(template)~:not(template){--space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--space-y-reverse)));margin-bottom:calc(1rem * var(--space-y-reverse))}.space-y-8>:not(template)~:not(template){--space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--space-y-reverse)));margin-bottom:calc(2rem * var(--space-y-reverse))}.space-x-16>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(4rem * var(--space-x-reverse));margin-left:calc(4rem * calc(1 - var(--space-x-reverse)))}.divide-x-2>:not(template)~:not(template){--divide-x-reverse:0;border-right-width:calc(2px * var(--divide-x-reverse));border-left-width:calc(2px * calc(1 - var(--divide-x-reverse)))}.divide-y>:not(template)~:not(template){--divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--divide-y-reverse)));border-bottom-width:calc(1px * var(--divide-y-reverse))}.divide-black>:not(template)~:not(template){--divide-opacity:1;border-color:#000;border-color:rgba(0,0,0,var(--divide-opacity))}.divide-gray-100>:not(template)~:not(template){--divide-opacity:1;border-color:#f7fafc;border-color:rgba(247,250,252,var(--divide-opacity))}.divide-gray-200>:not(template)~:not(template){--divide-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--divide-opacity))}.divide-solid>:not(template)~:not(template){border-style:solid}.bg-black{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}.bg-jsmn-yellow{--bg-opacity:1;background-color:#e5cf5f;background-color:rgba(229,207,95,var(--bg-opacity))}.bg-jsmn-black{--bg-opacity:1;background-color:#242323;background-color:rgba(36,35,35,var(--bg-opacity))}.hover\:bg-jsmn-yellow:hover{--bg-opacity:1;background-color:#e5cf5f;background-color:rgba(229,207,95,var(--bg-opacity))}.border-transparent{border-color:transparent}.border-black{--border-opacity:1;border-color:#000;border-color:rgba(0,0,0,var(--border-opacity))}.border-jsmn-yellow{--border-opacity:1;border-color:#e5cf5f;border-color:rgba(229,207,95,var(--border-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-gray-400{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.hover\:border-jsmn-yellow:hover{--border-opacity:1;border-color:#e5cf5f;border-color:rgba(229,207,95,var(--border-opacity))}.hover\:border-gray-600:hover{--border-opacity:1;border-color:#718096;border-color:rgba(113,128,150,var(--border-opacity))}.focus\:border-white:focus{--border-opacity:1;border-color:#fff;border-color:rgba(255,255,255,var(--border-opacity))}.rounded-md{border-radius:.375rem}.border-2{border-width:2px}.border-4{border-width:4px}.border{border-width:1px}.border-t-2{border-top-width:2px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.self-center{align-self:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.h-6{height:1.5rem}.h-8{height:2rem}.h-16{height:4rem}.h-32{height:8rem}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-8xl{font-size:6rem}.leading-5{line-height:1.25rem}.leading-7{line-height:1.75rem}.list-outside{list-style-position:outside}.list-disc{list-style-type:disc}.m-2{margin:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-8{margin-top:2rem;margin-bottom:2rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-1{margin-top:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.mt-10{margin-top:2.5rem}.mb-10{margin-bottom:2.5rem}.mb-20{margin-bottom:5rem}.-mt-4{margin-top:-1rem}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.overflow-hidden{overflow:hidden}.p-2{padding:.5rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.pt-2{padding-top:.5rem}.pb-3{padding-bottom:.75rem}.pt-4{padding-top:1rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.top-0{top:0}.left-0{left:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.text-center{text-align:center}.text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-800{--text-opacity:1;color:#2d3748;color:rgba(45,55,72,var(--text-opacity))}.hover\:text-white:hover{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.focus\:text-white:focus{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.uppercase{text-transform:uppercase}.hover\:underline:hover{text-decoration:underline}.w-6{width:1.5rem}.w-auto{width:auto}.w-2\/3{width:66.666667%}.w-full{width:100%}.grid-cols-none{grid-template-columns:none}.transform{--transform-translate-x:0;--transform-translate-y:0;--transform-rotate:0;--transform-skew-x:0;--transform-skew-y:0;--transform-scale-x:1;--transform-scale-y:1;transform:translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))}.rotate-1{--transform-rotate:1deg}.-rotate-1{--transform-rotate:-1deg}.hover\:-rotate-25:hover{--transform-rotate:-25deg}.transition-all{transition-property:all}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-150{transition-duration:150ms}.duration-200{transition-duration:.2s}@-webkit-keyframes spin{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}@-webkit-keyframes ping{100%,75%{transform:scale(2);opacity:0}}@keyframes ping{100%,75%{transform:scale(2);opacity:0}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}@-webkit-keyframes bounce{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}[data-animated-logo] path{stroke-dasharray:17364.90625;stroke-dashoffset:17364.90625;-webkit-animation-name:animated-logo-animation;animation-name:animated-logo-animation;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:5s;animation-duration:5s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes animated-logo-animation{from{stroke-dashoffset:17364.90625}to{stroke-dashoffset:0}}@keyframes animated-logo-animation{from{stroke-dashoffset:17364.90625}to{stroke-dashoffset:0}}@media (prefers-reduced-motion){*{-webkit-animation-play-state:paused!important;animation-play-state:paused!important;transition:none!important}}.special-bg{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23e5cf5f' fill-opacity='0.10' fill-rule='evenodd'/%3E%3C/svg%3E")}.plc-4>*{padding-left:1rem}:root{--box-flap-color-1:#94cbe3;--box-flap-color-2:#b73f53;--box-flap-color-3:#6b334a;--box-flap-size:4rem;--box-flap-offset:2rem}.box-flap{position:relative}.box-flap-1,.box-flap-2{mix-blend-mode:multiply;filter:none;z-index:-1;width:calc(100% + (var(--box-flap-size) * 2));height:calc(100% + (var(--box-flap-size) * 2));position:absolute;display:block;-webkit-animation:flapping 10s ease-in-out infinite;animation:flapping 10s ease-in-out infinite;transform:translateX(calc(-1 * 4rem)) translateY(calc(-1 * 4rem))}@-webkit-keyframes flapping{0%,100%{-webkit-clip-path:polygon(0 0,calc(100% - var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 100%,calc(0% + var(--box-flap-offset)) calc(100% - var(--box-flap-offset)));clip-path:polygon(0 0,calc(100% - var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 100%,calc(0% + var(--box-flap-offset)) calc(100% - var(--box-flap-offset)))}50%{-webkit-clip-path:polygon(calc(0% + var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 0,calc(100% - var(--box-flap-offset)) calc(100% - var(--box-flap-offset)),0 100%);clip-path:polygon(calc(0% + var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 0,calc(100% - var(--box-flap-offset)) calc(100% - var(--box-flap-offset)),0 100%)}}@keyframes flapping{0%,100%{-webkit-clip-path:polygon(0 0,calc(100% - var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 100%,calc(0% + var(--box-flap-offset)) calc(100% - var(--box-flap-offset)));clip-path:polygon(0 0,calc(100% - var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 100%,calc(0% + var(--box-flap-offset)) calc(100% - var(--box-flap-offset)))}50%{-webkit-clip-path:polygon(calc(0% + var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 0,calc(100% - var(--box-flap-offset)) calc(100% - var(--box-flap-offset)),0 100%);clip-path:polygon(calc(0% + var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 0,calc(100% - var(--box-flap-offset)) calc(100% - var(--box-flap-offset)),0 100%)}}.box-flap-1{-webkit-animation-delay:-5s;animation-delay:-5s;background-color:var(--box-flap-color-1);-webkit-clip-path:polygon(0 0,calc(100% - var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 100%,calc(0% + var(--box-flap-offset)) calc(100% - var(--box-flap-offset)));clip-path:polygon(0 0,calc(100% - var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 100%,calc(0% + var(--box-flap-offset)) calc(100% - var(--box-flap-offset)))}.box-flap-2{background-color:var(--box-flap-color-2);-webkit-clip-path:polygon(calc(0% + var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 0,calc(100% - var(--box-flap-offset)) calc(100% - var(--box-flap-offset)),0 100%);clip-path:polygon(calc(0% + var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),100% 0,calc(100% - var(--box-flap-offset)) calc(100% - var(--box-flap-offset)),0 100%)}@media (min-width:640px){.sm\:space-y-0>:not(template)~:not(template){--space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--space-y-reverse)));margin-bottom:calc(0px * var(--space-y-reverse))}.sm\:space-x-2>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(.5rem * var(--space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--space-x-reverse)))}.sm\:space-x-4>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(1rem * var(--space-x-reverse));margin-left:calc(1rem * calc(1 - var(--space-x-reverse)))}.sm\:block{display:block}.sm\:hidden{display:none}.sm\:flex-no-wrap{flex-wrap:nowrap}.sm\:items-stretch{align-items:stretch}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:ml-6{margin-left:1.5rem}.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-2{padding-left:.5rem;padding-right:.5rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pl-16{padding-left:4rem}.sm\:w-auto{width:auto}.sm\:w-1\/2{width:50%}.sm\:w-1\/3{width:33.333333%}.sm\:gap-2{grid-gap:.5rem;gap:.5rem}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}
20KB raw
5KB gzipped
293 rules, 343 selectors
Tailwind prose for markdown
Tailwind standard
Custom CSS, animations
Give it two weeks
It’s not perfect�But it’s good
Give it a try
11ty & TailwindCSS
Brian Mitchell & Ryan Rampersad
@BrianMitchL�@ryanmr