Last active
August 8, 2024 21:43
-
-
Save asasvirtuais/64968870ea67656746dbd542f0422e05 to your computer and use it in GitHub Desktop.
We got to talk about Tailwind CSS a.k.a. THE LINE
I introduce you, the most chad CSS component
<div id="Wrapper-container" className="delay-100 delay-1000 delay-150 delay-200 delay-300 delay-500 delay-700 delay-75 duration-100 duration-1000 duration-150 duration-200 duration-300 duration-500 duration-700 duration-75 ease-linear .ease-* transition .transition-* animate-bounce animate-none animate-ping animate-pulse animate-spin bg-auto bg-bottom bg-center bg-contain bg-cover bg-fixed bg-left bg-left-bottom bg-left-top bg-local bg-no-repeat bg-none bg-opacity-0 bg-opacity-100 bg-opacity-25 bg-opacity-50 bg-opacity-75 bg-repeat bg-repeat-round bg-repeat-space bg-repeat-x bg-repeat-y bg-right bg-right-bottom bg-right-top bg-scroll bg-top bg-clip-border bg-clip-content bg-clip-padding bg-clip-text bg-black bg-blue-100 bg-blue-200 bg-blue-300 bg-blue-400 bg-blue-500 bg-blue-600 bg-blue-700 bg-blue-800 bg-blue-900 bg-current bg-gray-100 bg-gray-200 bg-gray-300 bg-gray-400 bg-gray-500 bg-gray-600 bg-gray-700 bg-gray-800 bg-gray-900 bg-green-100 bg-green-200 bg-green-300 bg-green-400 bg-green-500 bg-green-600 bg-green-700 bg-green-800 bg-green-900 bg-indigo-100 bg-indigo-200 bg-indigo-300 bg-indigo-400 bg-indigo-500 bg-indigo-600 bg-indigo-700 bg-indigo-800 bg-indigo-900 bg-orange-100 bg-orange-200 bg-orange-300 bg-orange-400 bg-orange-500 bg-orange-600 bg-orange-700 bg-orange-800 bg-orange-900 bg-pink-100 bg-pink-200 bg-pink-300 bg-pink-400 bg-pink-500 bg-pink-600 bg-pink-700 bg-pink-800 bg-pink-900 bg-purple-100 bg-purple-200 bg-purple-300 bg-purple-400 bg-purple-500 bg-purple-600 bg-purple-700 bg-purple-800 bg-purple-900 bg-red-100 bg-red-200 bg-red-300 bg-red-400 bg-red-500 bg-red-600 bg-red-700 bg-red-800 bg-red-900 bg-teal-100 bg-teal-200 bg-teal-300 bg-teal-400 bg-teal-500 bg-teal-600 bg-teal-700 bg-teal-800 bg-teal-900 bg-transparent bg-white bg-yellow-100 bg-yellow-200 bg-yellow-300 bg-yellow-400 bg-yellow-500 bg-yellow-600 bg-yellow-700 bg-yellow-800 bg-yellow-900 bg-gradient-to-b bg-gradient-to-bl bg-gradient-to-br bg-gradient-to-l bg-gradient-to-r bg-gradient-to-t bg-gradient-to-tl bg-gradient-to-tr from-blue-100 from-current from-gray-100 from-indigo-100 from-pink-100 from-purple-100 from-red-100 from-transparent from-transparent from-white from-yellow-100 to-black to-blue-100 to-current to-gray-100 to-green-100 to-indigo-100 to-pink-100 to-purple-100 to-red-100 to-transparent to-white to-yellow-100 top-1 via-black via-blue-100 via-current via-gray-100 via-green-100 via-indigo-100 via-pink-100 via-purple-100 via-red-100 via-transparent via-white via-yellow-100 border-black border-blue-100 border-blue-200 border-blue-300 border-blue-400 border-blue-500 border-blue-600 border-blue-700 border-blue-800 border-blue-900 border-current border-gray-100 border-gray-200 border-gray-300 border-gray-400 border-gray-500 border-gray-600 border-gray-700 border-gray-800 border-gray-900 border-green-100 border-green-200 border-green-300 border-green-400 border-green-500 border-green-600 border-green-700 border-green-800 border-green-900 border-indigo-100 border-indigo-200 border-indigo-300 border-indigo-400 border-indigo-500 border-indigo-600 border-indigo-700 border-indigo-800 border-indigo-900 border-orange-100 border-orange-200 border-orange-300 border-orange-400 border-orange-500 border-orange-600 border-orange-700 border-orange-800 border-orange-900 border-pink-100 border-pink-200 border-pink-300 border-pink-400 border-pink-500 border-pink-600 border-pink-700 border-pink-800 border-pink-900 border-purple-100 border-purple-200 border-purple-300 border-purple-400 border-purple-500 border-purple-600 border-purple-700 border-purple-800 border-purple-900 border-red-100 border-red-200 border-red-300 border-red-400 border-red-500 border-red-600 border-red-700 border-red-800 border-red-900 border-teal-100 border-teal-200 border-teal-300 border-teal-400 border-teal-500 border-teal-600 border-teal-700 border-teal-800 border-teal-900 border-transparent border-white border-yellow-100 border-yellow-200 border-yellow-300 border-yellow-400 border-yellow-500 border-yellow-600 border-yellow-700 border-yellow-800 border-yellow-900 border border-*-# .border-t-2 border-0 border-2 border-4 border-8 border-b border-b-0 border-blue-50 border-collapse border-dashed border-dotted border-double border-gray-50 border-green-50 border-indigo-50 border-l border-l-0 border-none border-opacity-0 border-opacity-25 border-*-# border-pink-50 border-purple-50 border-r border-r-0 border-red-50 border-separate border-solid border-t border-t-0 border-yellow-50 divide-gray-100 .divide-*-# divide-opacity-25 .divide-opacity-* divide-x divide-x-0 divide-x-2 divide-x-4 divide-x-8 divide-x-reverse .divide-*-reverse divide-y divide-y-0 divide-y-2 divide-y-4 divide-y-8 rounded .rounded-* rounded-2xl rounded-3xl rounded-b-2xl rounded-b-3xl rounded-b-xl rounded-bl-2xl rounded-bl-3xl rounded-bl-xl rounded-br-2xl rounded-br-3xl rounded-br-xl rounded-l-2xl rounded-l-xl rounded-r-2xl rounded-r-3xl rounded-r-xl rounded-t-2xl rounded-t-3xl rounded-t-xl rounded-tl-2xl rounded-tl-3xl rounded-tl-xl rounded-tr-2xl rounded-tr-3xl rounded-tr-xl rounded-xl box-border box-content bg-blue-50 bg-gray-50 bg-green-50 bg-indigo-50 bg-opacity-10 bg-pink-50 bg-purple-50 bg-red-50 bg-yellow-50 block flex flow-root grid hidden inline inline-block inline-flex inline-grid divide-black divide-blue-100 divide-current divide-dashed divide-dotted divide-doubble divide-gray-100 divide-green-100 divide-indigo-100 divide-none divide-opacity-0 divide-pink-100 divide-purple-100 divide-red-100 divide-solid divide-transparent divide-white divide-x-reverse divide-y-reverse divide-yellow-100 content-start .content-* flex-1 flex-auto flex-col flex-col-reverse flex-grow .flex-grow-0 flex-initial flex-no-wrap flex-none flex-row flex-row-reverse flex-shrink .flex-shrink-0 flex-wrap flex-wrap-reverse items-stretch .items-* justify-start .justify-* order-1 .order-* self-start .self-* content-around content-between content-center content-end content-evenly content-start contents flex-nowrap justify-items-auto justify-items-center justify-items-end justify-items-start justify-items-stretch justify-self-auto justify-self-center justify-self-end justify-self-start justify-self-stretch space-x-7 space-x-px space-x-reverse space-y-px space-y-reverse focus-within from-black auto-cols-auto auto-cols-fr auto-cols-max auto-cols-min auto-rows-auto auto-rows-fr auto-rows-max auto-rows-min auto-rows-min col-auto col-end-1 col-end-1 .col-end-* col-end-auto col-gap-0 .col-gap-* col-span-1 col-span-1 .col-span-* col-span-full col-start-1 col-start-1 .col-start-* col-start-auto gap-0 gap-0 .gap-* gap-px gap-x-0 gap-x-px gap-y-0 gap-y-px grid-cols-1 .grid-cols-* grid-flow-col grid-flow-col-dense grid-flow-row grid-flow-row-dense grid-rows-1 .grid-rows-* place-content-around place-content-between place-content-center place-content-end place-content-evenly place-content-start place-content-stretch place-items-auto place-items-center place-items-end place-items-start place-items-stretch place-self-auto place-self-end place-self-start place-self-stretch row-auto row-end-1 row-end-2 row-end-3 row-end-4 row-end-5 row-end-6 row-end-7 row-end-auto row-gap-0 .row-gap-* row-span-1 row-span-1 .row-span-* row-span-full row-start-1 row-start-2 row-start-3 row-start-4 row-start-5 row-start-6 row-start-7 row-start-auto group-hover group-hover h-0 h-1 h-10 h-12 h-16 h-2 h-20 h-24 h-3 h-32 h-4 h-40 h-48 h-5 h-56 h-6 h-64 h-8 h-auto h-full h-px h-screen max-h-full max-h-px max-h-screen min-h-0 min-h-full min-h-screen list-disc .list-* list-inside .list-outside -m-1 -m-10 -m-12 -m-16 -m-2 -m-20 -m-24 -m-3 -m-32 -m-4 -m-40 -m-48 -m-5 -m-56 -m-6 -m-64 -m-8 -m-px -mb-1 -mb-10 -mb-12 -mb-16 -mb-2 -mb-20 -mb-24 -mb-3 -mb-32 -mb-4 -mb-40 -mb-48 -mb-5 -mb-56 -mb-6 -mb-64 -mb-8 -mb-px -ml-1 -ml-10 -ml-12 -ml-16 -ml-2 -ml-20 -ml-24 -ml-3 -ml-32 -ml-4 -ml-40 -ml-48 -ml-5 -ml-56 -ml-6 -ml-64 -ml-8 -ml-px -mr-1 -mr-10 -mr-12 -mr-16 -mr-2 -mr-20 -mr-24 -mr-3 -mr-32 -mr-4 -mr-40 -mr-48 -mr-5 -mr-56 -mr-6 -mr-64 -mr-8 -mr-px -mt-1 -mt-10 -mt-12 -mt-16 -mt-2 -mt-20 -mt-24 -mt-3 -mt-32 -mt-4 -mt-40 -mt-48 -mt-5 -mt-56 -mt-6 -mt-64 -mt-8 -mt-px -mx-1 -mx-10 -mx-12 -mx-16 -mx-2 -mx-20 -mx-24 -mx-3 -mx-32 -mx-4 -mx-40 -mx-48 -mx-5 -mx-56 -mx-6 -mx-64 -mx-8 -mx-px -my-1 -my-10 -my-12 -my-16 -my-2 -my-20 -my-24 -my-3 -my-32 -my-4 -my-40 -my-48 -my-5 -my-56 -my-6 -my-64 -my-8 -my-px m-0 m-1 m-10 m-12 m-16 m-2 m-20 m-24 m-3 m-32 m-4 m-40 m-48 m-5 m-56 m-6 m-64 m-8 m-auto m-px mb-0 mb-1 mb-10 mb-11 mb-12 mb-16 mb-2 mb-20 mb-24 mb-3 mb-32 mb-4 mb-40 mb-48 mb-5 mb-56 mb-6 mb-64 mb-8 mb-auto mb-px ml-0 ml-1 ml-10 ml-11 ml-12 ml-16 ml-2 ml-20 ml-24 ml-3 ml-32 ml-4 ml-40 ml-48 ml-5 ml-56 ml-6 ml-64 ml-8 ml-auto ml-px mr-0 mr-1 mr-10 mr-11 mr-12 mr-16 mr-2 mr-20 mr-24 mr-3 mr-32 mr-4 mr-40 mr-48 mr-5 mr-56 mr-6 mr-64 mr-8 mr-auto mr-px mt-0 mt-1 mt-10 mt-11 mt-11 mt-12 mt-16 mt-2 mt-20 mt-24 mt-3 mt-32 mt-4 mt-40 mt-48 mt-5 mt-56 mt-6 mt-64 mt-8 mt-auto mt-px mx-0 mx-1 mx-10 mx-11 mx-12 mx-16 mx-2 mx-20 mx-24 mx-3 mx-32 mx-4 mx-40 mx-48 mx-5 mx-56 mx-6 mx-64 mx-8 mx-auto mx-px my-0 my-1 my-10 my-11 my-12 my-16 my-2 my-20 my-24 my-3 my-32 my-4 my-40 my-48 my-5 my-56 my-6 my-64 my-8 my-auto my-px lining-nums normal-nums oldstyle-nums stacked-fractions opacity-10 outline-black outline-white p-0 p-1 p-10 p-11 p-12 p-16 p-2 p-20 p-24 p-3 p-32 p-4 p-40 p-48 p-5 p-56 p-6 p-64 p-8 p-px pb-0 pb-1 pb-10 pb-11 pb-12 pb-16 pb-2 pb-20 pb-24 pb-3 pb-32 pb-4 pb-40 pb-48 pb-5 pb-56 pb-6 pb-64 pb-8 pb-px pl-0 pl-1 pl-10 pl-11 pl-12 pl-16 pl-2 pl-20 pl-24 pl-3 pl-32 pl-4 pl-40 pl-48 pl-5 pl-56 pl-6 pl-64 pl-8 pl-px pr-0 pr-1 pr-10 pr-11 pr-12 pr-16 pr-2 pr-20 pr-24 pr-3 pr-32 pr-4 pr-40 pr-48 pr-5 pr-56 pr-6 pr-64 pr-8 pr-px pt-0 pt-1 pt-10 pt-11 pt-12 pt-16 pt-2 pt-20 pt-24 pt-3 pt-32 pt-4 pt-40 pt-48 pt-5 pt-56 pt-6 pt-64 pt-8 pt-px px-0 px-1 px-10 px-11 px-12 px-16 px-2 px-20 px-24 px-3 px-32 px-4 px-40 px-48 px-5 px-56 px-6 px-64 px-8 px-px py-0 py-1 py-10 py-11 py-12 py-16 py-2 py-20 py-24 py-3 py-32 py-4 py-40 py-48 py-5 py-56 py-6 py-64 py-8 py-px -bottom-1 -bottom-px -inset-0 -inset-px -inset-x-0 -inset-y-0 -inset-y-full -inset-y-px -left-0 -left-full -left-px -m-0 -m-px -mb-0 -mb-px -ml-0 -ml-px -mr-0 -mr-px -mt-0 -mt-px -mx-0 -mx-px -my-0 -my-px -right-0 -right-full -right-px -rotate-1 -skew-x-1 -skew-y-1 -space-x-0 -space-x-px -space-y-0 -space-y-px -top-0 -top-px -translate-x-0 -translate-x-full -translate-x-px -translate-y-0 -translate-y-px absolute absolute align-* align-baseline align-bottom align-middle align-text-bottom align-text-top align-top bottom-0 bottom-0 .bottom-* bottom-auto bottom-full bottom-px clear-both clear-left clear-none clear-right clearfix fixed float-* inset-1 inset-full inset-px inset-x-1 inset-x-full inset-x-px inset-y-0 .inset-*-# inset-y-1 inset-y-full inset-y-px left-0 .left-* left-1 left-full left-px object-bottom object-center object-contain .object-* object-left object-left-bottom object-left-top object-right object-right-bottom object-right-top object-top relative right-0 .right-* right-1 right-auto right-full right-px static sticky top-0 .top-* top-full top-px z-10 .z-* focus hover container lg: md: sm: xl: ring ring-0 ring-black ring-blue-100 ring-current ring-gray-100 ring-green-100 ring-inding-100 ring-inset ring-offset-0 ring-offset-black ring-offset-blue-100 ring-offset-current ring-offset-gray-100 ring-offset-green-100 ring-offset-indigo-100 ring-offset-pink-100 ring-offset-purple-100 ring-offset-red-100 ring-offset-transparent ring-offset-white ring-offset-yellow-100 ring-opacity-0 ring-pink-100 ring-purple-100 ring-red-100 ring-transparent ring-white ring-yellow-100 overscroll-contain overscroll-x-auto overscroll-x-contain overscroll-x-none overscroll-y-auto overscroll-y-contain overscroll-y-none shadow shadow-2xl shadow-inner shadow-lg shadow-md shadow-none shadow-outline shadow-sm shadow-xl shadow-xs h-11 -space-x-1 .-space-x-* -space-y-1 .-space-y-* space-x-1 .space-x-* space-x-reverse .space-y-reverse space-y-1 .space-y-* fill-current stroke-0 .stroke-* stroke-current table table-auto .table-fixed table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group antialiased break-all break-normal break-words capitalize font-black font-bold font-extrabold font-hairline font-light font-medium font-mono font-normal font-sans font-semibold font-serif font-thin italic leading-10 leading-3 leading-4 leading-5 leading-6 leading-7 leading-8 leading-9 leading-loose leading-none leading-normal leading-relaxed leading-snug leading-tight line-through lowercase no-underline normal-case not-italic subpixel-antialiased text-2xl text-3xl text-4xl text-5xl text-6xl text-base text-center text-justify text-left text-lg text-opacity-* text-right text-sm text-xl text-xs tracking-normal tracking-tight tracking-tighter tracking-wide tracking-wider tracking-widest truncate underline uppercase whitespace-normal .whitespace-* text-black text-blue-100 text-blue-200 text-blue-300 text-blue-400 text-blue-50 text-blue-500 text-blue-600 text-blue-700 text-blue-800 text-blue-900 text-current text-gray-100 text-gray-200 text-gray-300 text-gray-400 text-gray-50 text-gray-500 text-gray-600 text-gray-700 text-gray-800 text-gray-900 text-green-100 text-green-200 text-green-300 text-green-400 text-green-50 text-green-500 text-green-600 text-green-700 text-green-800 text-green-900 text-indigo-100 text-indigo-200 text-indigo-300 text-indigo-400 text-indigo-50 text-indigo-500 text-indigo-600 text-indigo-700 text-indigo-800 text-indigo-900 text-opacity-10 text-orange-100 text-orange-200 text-orange-300 text-orange-400 text-orange-500 text-orange-600 text-orange-700 text-orange-800 text-orange-900 text-pink-100 text-pink-200 text-pink-300 text-pink-400 text-pink-50 text-pink-500 text-pink-600 text-pink-700 text-pink-800 text-pink-900 text-purple-100 text-purple-200 text-purple-300 text-purple-400 text-purple-50 text-purple-500 text-purple-600 text-purple-700 text-purple-800 text-purple-900 text-red-100 text-red-200 text-red-300 text-red-400 text-red-50 text-red-500 text-red-600 text-red-700 text-red-800 text-red-900 text-teal-100 text-teal-200 text-teal-300 text-teal-400 text-teal-500 text-teal-600 text-teal-700 text-teal-800 text-teal-900 text-transparent text-white text-yellow-100 text-yellow-200 text-yellow-300 text-yellow-400 text-yellow-50 text-yellow-500 text-yellow-600 text-yellow-700 text-yellow-800 text-yellow-900 -rotate-180 -rotate-45 -rotate-90 -skew-x-12 -skew-x-3 -skew-x-6 -skew-y-12 -skew-y-3 -skew-y-6 -translate-x-1 -translate-x-1/2 -translate-x-10 -translate-x-12 -translate-x-16 -translate-x-2 -translate-x-20 -translate-x-24 -translate-x-3 -translate-x-32 -translate-x-4 -translate-x-40 -translate-x-48 -translate-x-5 -translate-x-56 -translate-x-6 -translate-x-64 -translate-x-8 -translate-x-full -translate-x-px -translate-y-1 -translate-y-1/2 -translate-y-10 -translate-y-12 -translate-y-16 -translate-y-2 -translate-y-20 -translate-y-24 -translate-y-3 -translate-y-32 -translate-y-4 -translate-y-40 -translate-y-48 -translate-y-5 -translate-y-56 -translate-y-6 -translate-y-64 -translate-y-8 -translate-y-full -translate-y-px diagonal-fractions origin-center .origin-* rotate-0 rotate-1 rotate-180 rotate-45 rotate-90 scale-0 .scale-* scale-x-0 scale-x-100 scale-x-105 scale-x-110 scale-x-125 scale-x-150 scale-x-50 scale-x-75 scale-x-90 scale-x-95 scale-y-0 scale-y-100 scale-y-105 scale-y-110 scale-y-125 scale-y-150 scale-y-50 scale-y-75 scale-y-90 scale-y-95 skew-x-0 skew-x-1 skew-x-12 skew-x-2 skew-x-3 skew-x-6 skew-y-0 skew-y-1 skew-y-12 skew-y-2 skew-y-3 skew-y-6 transform .transform-none transform-gpu translate-x-0 translate-x-1 translate-x-1/2 translate-x-10 translate-x-11 translate-x-12 translate-x-16 translate-x-2 translate-x-20 translate-x-24 translate-x-3 translate-x-32 translate-x-4 translate-x-40 translate-x-48 translate-x-5 translate-x-56 translate-x-6 translate-x-64 translate-x-8 translate-x-full translate-x-px translate-y-0 translate-y-1 translate-y-1/2 translate-y-10 translate-y-11 translate-y-12 translate-y-16 translate-y-2 translate-y-20 translate-y-24 translate-y-3 translate-y-32 translate-y-4 translate-y-40 translate-y-48 translate-y-5 translate-y-56 translate-y-6 translate-y-64 translate-y-8 translate-y-full translate-y-px font-extralight text-7xl text-8xl text-9xl appearance-none cursor-auto cursor-default cursor-move cursor-not-allowed cursor-pointer cursor-text cursor-wait outline-none overflow-hidden .overflow-* placeholder-black::placeholder placeholder-blue-100 placeholder-blue-600::placeholder placeholder-current placeholder-current::placeholder placeholder-gray-100 placeholder-gray-100::placeholder placeholder-gray-200::placeholder placeholder-gray-300::placeholder placeholder-gray-400::placeholder placeholder-gray-500::placeholder placeholder-gray-600::placeholder placeholder-gray-600::placeholder placeholder-gray-700::placeholder placeholder-gray-800::placeholder placeholder-gray-900::placeholder placeholder-green-100 placeholder-green-600::placeholder placeholder-indigo-100 placeholder-indigo-600::placeholder placeholder-opacity-0 placeholder-opacity-10 placeholder-opacity-100 placeholder-opacity-25 placeholder-opacity-50 placeholder-opacity-75 placeholder-orange-600::placeholder placeholder-pink-100 placeholder-pink-600::placeholder placeholder-purple-100 placeholder-purple-600::placeholder placeholder-red-100 placeholder-red-600::placeholder placeholder-teal-600::placeholder placeholder-transparent placeholder-transparent::placeholder placeholder-white placeholder-white::placeholder placeholder-yellow-100 placeholder-yellow-600::placeholder pointer-events-auto pointer-events-none resize resize-none resize-x resize-y scrolling-touch .scrolling-auto select-all select-auto select-none select-text invisible opacity-0 opacity-100 opacity-25 opacity-50 opacity-75 sr-only .not-sr-only visible max-h-0 max-w-0 max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-7xl max-w-full max-w-lg max-w-max max-w-md max-w-min max-w-none max-w-prose max-w-screen-2xl max-w-screen-lg max-w-screen-md max-w-screen-sm max-w-screen-xl max-w-sm max-w-xl max-w-xs min-w-0 min-w-full min-w-max min-w-min w-0 w-1 w-1/12 w-1/2 w-1/3 w-1/4 w-1/5 w-1/6 w-10 w-10/12 w-11 w-11/12 w-12 w-16 w-2 w-2/12 w-2/3 w-2/4 w-2/5 w-2/6 w-20 w-24 w-3 w-3/12 w-3/4 w-3/5 w-3/6 w-32 w-4 w-4/12 w-4/5 w-4/6 w-40 w-48 w-5 w-5/12 w-5/6 w-56 w-6 w-6/12 w-64 w-7/12 w-8 w-8/12 w-9/12 w-auto w-full w-px w-screen">
Very minimal..
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
IMO libraries like ChakraUI with css attributes passed as component props are just way better for code maintenance.
As opposed to tailwind
My brain will just ignore a line like "inline-block min-w-[120px] p-4 text-white bg-black", and redact it with [TODO: REFACTOR].