Tailwind CSS - Cheatsheet

36 | 37 | <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 38 | {v.data.map((v2, i) => ( 39 | <Heading data={v2} key={i} /> 40 | ))} 41 | </div> 42 | </div> 43 | )); 44 | 45 | const ref = useRef(); 46 | 47 | useEffect(async () => { 48 | if (ref.current) { 49 | // CODE TEXT 50 | const codeEls = ref.current.querySelectorAll('code'); 51 | for (let i = 0; i < codeEls.length; i++) { 52 | let text = codeEls[i].innerText; 53 | const bracketsRegex = /\[(.*?)\]/g; 54 | const bracketsArr = text.match(bracketsRegex); 55 | 56 | if (bracketsArr && bracketsArr.length > 0) { 57 | bracketsArr.map((v) => { 58 | v = v.slice(1, -1); 59 | text = text.replaceAll( 60 | `${v}`, 61 | `<span class="text-sky-600">${v}</span>` 62 | ); 63 | }); 64 | } 65 | 66 | codeEls[i].innerHTML = text 67 | .replaceAll('|', '<span class="text-red-800">|</span>') 68 | .replaceAll( 69 | '$spacing', 70 | '<span class="text-green-700">$spacing</span>' 71 | ) 72 | .replaceAll('$color', '<span class="text-green-700">$color</span>'); 73 | } 74 | 75 | // SUB HEADINGS 76 | const Els = ref.current.querySelectorAll('[data-id="sub-heading"]'); 77 | for (let i = 0; i < Els.length; i++) { 78 | let text = Els[i].innerText; 79 | const bracketsRegex = /\[(.*?)\]/g; 80 | const bracketsArr = text.match(bracketsRegex); 81 | 82 | if (bracketsArr && bracketsArr.length > 0) { 83 | bracketsArr.map((v) => { 84 | v = v.slice(1, -1); 85 | text = text.replaceAll( 86 | `${v}`, 87 | `<span class="text-sky-600 font-norma ">${v}</span>` 88 | ); 89 | }); 90 | } 91 | 92 | Els[i].innerHTML = text; 93 | } 94 | } 95 | }, []); 96 | 97 | return ( 98 | <div ref={ref}> 99 | <div className="grid grid-cols-1 lg:flex lg:flex-wrap lg:justify-around lg:gap-2 lg:gap-y-10 p-4 pt-20 py-20 "> 100 | <Loop className="lg:hidden" screen={'sm'} /> 101 | <Loop className="hidden lg:block xl:hidden" screen={'lg'} /> 102 | <Loop className="hidden xl:block 2xl:hidden " screen={'xl'} /> 103 | <Loop className="hidden 2xl:block " screen={'2xl'} /> 104 | </div> 105 | </div> 106 | ); 107 | 108 | // <div className="grid grid-cols-1 lg:flex lg:flex-wrap lg:justify-around p-4 "> 109 | // <div className="my-4"> 110 | // <Title title="flex" /> 111 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 112 | // {cheatsheet.flexbox.map((v, i) => ( 113 | // <Heading data={v} key={i} /> 114 | // ))} 115 | // </div> 116 | // </div> 117 | // <div className="my-4"> 118 | // <Title title="Grid" /> 119 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 120 | // {cheatsheet.grid.map((v, i) => ( 121 | // <Heading data={v} key={i} /> 122 | // ))} 123 | // </div> 124 | // </div> 125 | // <div className="my-4"> 126 | // <Title title="Flex/Grid" /> 127 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 128 | // {cheatsheet.flexboxAndGrid.map((v, i) => ( 129 | // <Heading data={v} key={i} /> 130 | // ))} 131 | // </div> 132 | // </div> 133 | // <div className="my-4"> 134 | // <Title title="Sizing" /> 135 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 136 | // {cheatsheet.sizing.map((v, i) => ( 137 | // <Heading data={v} key={i} /> 138 | // ))} 139 | // </div> 140 | // </div> 141 | 142 | // <div className="my-4"> 143 | // <Title title="spacing" /> 144 | // {cheatsheet.spacing.map((v, i) => ( 145 | // <Heading data={v} key={i} /> 146 | // ))} 147 | // </div> 148 | 149 | // <div className="my-4"> 150 | // <Title title="Layout" /> 151 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 152 | // {cheatsheet.layout.map((v, i) => ( 153 | // <Heading data={v} key={i} /> 154 | // ))} 155 | // </div> 156 | // </div> 157 | 158 | // <div className="my-4"> 159 | // <Title title="Typography" /> 160 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 161 | // {cheatsheet.typography.map((v, i) => ( 162 | // <Heading data={v} key={i} /> 163 | // ))} 164 | // </div> 165 | // </div> 166 | 167 | // <div className="my-4"> 168 | // <Title title="Background" /> 169 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 170 | // {cheatsheet.background.map((v, i) => ( 171 | // <Heading data={v} key={i} /> 172 | // ))} 173 | // </div> 174 | // </div> 175 | 176 | // <div className="my-4"> 177 | // <Title title="Border" /> 178 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 179 | // {cheatsheet.border.map((v, i) => ( 180 | // <Heading data={v} key={i} /> 181 | // ))} 182 | // </div> 183 | // </div> 184 | 185 | // <div className="my-4"> 186 | // <Title title="transition & Animation" /> 187 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 188 | // {cheatsheet.transition.map((v, i) => ( 189 | // <Heading data={v} key={i} /> 190 | // ))} 191 | // </div> 192 | // </div> 193 | // <div className="my-4"> 194 | // <Title title="transform" /> 195 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 196 | // {cheatsheet.transform.map((v, i) => ( 197 | // <Heading data={v} key={i} /> 198 | // ))} 199 | // </div> 200 | // </div> 201 | // <div className="my-4"> 202 | // <Title title="effect" /> 203 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 204 | // {cheatsheet.effect.map((v, i) => ( 205 | // <Heading data={v} key={i} /> 206 | // ))} 207 | // </div> 208 | // </div> 209 | // <div className="my-4"> 210 | // <Title title="table" /> 211 | // {cheatsheet.table.map((v, i) => ( 212 | // <Heading data={v} key={i} /> 213 | // ))} 214 | // </div> 215 | // <div className="my-4"> 216 | // <Title title="svg" /> 217 | // {cheatsheet.svg.map((v, i) => ( 218 | // <Heading data={v} key={i} /> 219 | // ))} 220 | // </div> 221 | 222 | // <div className="my-4"> 223 | // <Title title="Interactivity" /> 224 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 225 | // {cheatsheet.interactivity.map((v, i) => ( 226 | // <Heading data={v} key={i} /> 227 | // ))} 228 | // </div> 229 | // </div> 230 | // <div className="my-4"> 231 | // <Title title="accessibility" /> 232 | // {cheatsheet.accessibility.map((v, i) => ( 233 | // <Heading data={v} key={i} /> 234 | // ))} 235 | // </div> 236 | // <div className="my-4"> 237 | // <Title title="filters" /> 238 | // <div className="flex flex-row overflow-x-scroll lg:overflow-hidden"> 239 | // {cheatsheet.filters.map((v, i) => ( 240 | // <Heading data={v} key={i} /> 241 | // ))} 242 | // </div> 243 | // </div> 244 | // </div> 245 | // ); 246 | } 247 | 248 | export default Content; 249 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {FaHeart} from 'react-icons/fa'; 3 | 4 | function Footer() { 5 | return ( 6 | <footer 7 | className=" 8 | flex flex-col 9 | w-full 10 | items-center 11 | itali 12 | ffamily-b 13 | text-xl 14 | md:text-2xl 15 | py-32 16 | font-thin 17 | bg-purple-100 18 | text-red-700 19 | uppercase 20 | "> 21 | <div className="text-sm text-gray-700">Made with</div> 22 | <div className="flex justify-center items-center border-4 border-rose-100 bg-rose-200 my-2 w-10 h-10 p-2 rounded-full"> 23 | <FaHeart color="red" /> 24 | </div> 25 | <a className="text-2xl capitalize" href="https://umeshmk.github.io/"> 26 | Umesh Kadam 27 | </a> 28 | </footer> 29 | ); 30 | } 31 | 32 | export default Footer; 33 | -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Breakpoints from './header/Breakpoints'; 3 | import Spacing from './header/Spacing'; 4 | import Colors from './header/Colors'; 5 | import Others from './header/Others'; 6 | 7 | function Header() { 8 | return ( 9 | <header className="grid grid-cols-1 gap-5 bg-purple-100 p-5 lg:py-20 lg:pb-32 "> 10 | {/* MOBILE */} 11 | <div className="grid grid-cols-1 gap-10 mt-5 lg:hidden"> 12 | <Spacing /> 13 | <Colors /> 14 | <Breakpoints /> 15 | <Others type="PseudoClass" /> 16 | <Others type="PseudoClassAria" /> 17 | <Others type="PseudoClassmedia" /> 18 | <Others type="Functions" /> 19 | <Others type="Opacity" /> 20 | <Others type="ColorsNum" /> 21 | </div> 22 | 23 | {/* TABLET-LANDSCAPE */} 24 | <div className="hidden 2xl:hidden lg:grid lg:grid-cols-2 gap-10 mt-0 "> 25 | <div> 26 | <Spacing /> 27 | </div> 28 | <div className="flex flex-col justify-between"> 29 | <Breakpoints /> 30 | <Others type="PseudoClass" /> 31 | <Others type="PseudoClassmedia" /> 32 | </div> 33 | </div> 34 | <div className="hidden 2xl:hidden lg:grid grid-cols-1 gap-10 mt-5 "> 35 | <div className="grid grid-cols-9 gap-10"> 36 | <Others className="col-span-3" type="PseudoClassAria" /> 37 | <Others className="col-span-2" type="Functions" /> 38 | <Others className="col-span-2" type="Opacity" /> 39 | <Others className="col-span-2" type="ColorsNum" /> 40 | </div> 41 | <Colors /> 42 | </div> 43 | 44 | {/* LARGE DESKTOP */} 45 | <div className="hidden 2xl:grid 2xl:grid-cols-2 gap-24 mt-0 "> 46 | <div> 47 | <Spacing /> 48 | </div> 49 | <div className="flex flex-col justify-between"> 50 | <Breakpoints /> 51 | <Others type="PseudoClass" /> 52 | <div className="grid grid-cols-4 gap-10"> 53 | <Others type="PseudoClassmedia" /> 54 | <Others type="Functions" /> 55 | <Others type="Opacity" /> 56 | <Others type="ColorsNum" /> 57 | </div> 58 | </div> 59 | </div> 60 | <div className="hidden 2xl:grid grid-cols-1 gap-10 mt-5 "> 61 | <div className="grid grid-cols-7 gap-10"></div> 62 | <Colors /> 63 | </div> 64 | </header> 65 | ); 66 | } 67 | 68 | export default Header; 69 | -------------------------------------------------------------------------------- /src/components/Nav.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Nav() { 4 | return ( 5 | <nav 6 | className=" 7 | flex flex-row 8 | items-center 9 | justify-between 10 | text-gray-800 11 | bg-purple-50 12 | px-4 13 | py-5 14 | "> 15 | <div className="flex flex-col"> 16 | <div className="text-red-700 font-semibold text-xl"> 17 | <a href="https://umeshmk.github.io/Tailwindcss-cheatsheet/"> 18 | Tailwind CSS 19 | </a> 20 | </div> 21 | <span className="text-sm font-thin">Cheatsheet v3</span> 22 | </div> 23 | <ul className="flex flex-row items-center text-sm"> 24 | <li className="flex pr-5 lg:pr-10 font-thin text-sm lg:text-lg underline"> 25 | <a href="v2.1/">v2.1</a> 26 | </li> 27 | <li className="flex flex-col"> 28 | <a href="https://github.com/umeshmk/Tailwindcss-cheatsheet"> 29 | <i className="fab fa-github text-red-700 text-4xl"></i> 30 | </a> 31 | </li> 32 | </ul> 33 | </nav> 34 | ); 35 | } 36 | 37 | export default Nav; 38 | -------------------------------------------------------------------------------- /src/components/Title.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Title({title}) { 4 | return ( 5 | <div> 6 | <h1 className=" inline-block text-xl text-red-900 bg-red-100 font-bold p-2 pr-3 capitalize "> 7 | <span className="text-red-600 font-normal"># </span> 8 | {title} 9 | </h1> 10 | </div> 11 | ); 12 | } 13 | 14 | export default Title; 15 | -------------------------------------------------------------------------------- /src/components/header/Breakpoints.jsx: -------------------------------------------------------------------------------- 1 | import React, {useContext, useEffect} from 'react'; 2 | import Title from '../Title'; 3 | import {TailwindContext} from '../../context/TailwindContext'; 4 | 5 | function Breakpoints() { 6 | const {responsive} = useContext(TailwindContext); 7 | 8 | return ( 9 | <div className=""> 10 | <Title title="Breakpoints" /> 11 | <div className="grid text-center overflow-x-scroll lg:overflow-hidden"> 12 | <div className="grid grid-cols-1 gap-y- bg-purple-50 text-blue-500 py-4 "> 13 | {Object.values(responsive).map((v) => { 14 | return ( 15 | <div className="grid grid-cols-3 py-2" key={v.size}> 16 | <div className="bg-purple-30 border-b- border-purple-200 "> 17 | {v.icon} 18 | </div> 19 | <div className="text-gray-700 italic border-x-2 border-purple-300 "> 20 | {v.size} 21 | </div> 22 | <div className="ffamily-b text-red-800 font-normal"> 23 | .{v.class} 24 | </div> 25 | </div> 26 | ); 27 | })} 28 | </div> 29 | </div> 30 | </div> 31 | ); 32 | } 33 | 34 | export default Breakpoints; 35 | -------------------------------------------------------------------------------- /src/components/header/Colors.jsx: -------------------------------------------------------------------------------- 1 | import React, {useContext} from 'react'; 2 | import Title from '../Title'; 3 | import {TailwindContext} from '../../context/TailwindContext'; 4 | 5 | function Colors() { 6 | const {basic} = useContext(TailwindContext); 7 | const {colors, colorsNum} = basic; 8 | 9 | let listColorSize = (color) => ( 10 | <div className="mr-1 lg:m-0 border border-red-50 grow" key={color}> 11 | <div className={`text-center text-xs py-4 px-0 m-0 text-${color}-500 `}> 12 | {color} 13 | </div> 14 | 15 | {colorsNum.map((v) => { 16 | return ( 17 | <div className="" key={v}> 18 | <div 19 | className={ 20 | 'py-4 px-4 lg:px-3 m-0 text-xs text-center bg-' + 21 | color + 22 | '-' + 23 | v 24 | }> 25 | <div className={`text-${color}-${v === 400 ? '6' : '4'}00 `}> 26 | {v} 27 | </div> 28 | </div> 29 | </div> 30 | ); 31 | })} 32 | </div> 33 | ); 34 | 35 | return ( 36 | <div className=""> 37 | <Title title="Colors" /> 38 | <div className=""> 39 | <div className="flex lg:justify-evenly overflow-x-scroll lg:overflow-x-auto bg-purple-100 "> 40 | {colors.map((v) => { 41 | return listColorSize(v); 42 | })} 43 | </div> 44 | </div> 45 | </div> 46 | ); 47 | } 48 | 49 | export default Colors; 50 | -------------------------------------------------------------------------------- /src/components/header/Others.jsx: -------------------------------------------------------------------------------- 1 | import React, {useContext} from 'react'; 2 | import Title from '../Title'; 3 | import {TailwindContext} from '../../context/TailwindContext'; 4 | 5 | const Tags = ({arr}) => ( 6 | <div className="flex flex-wrap gap- italic bg-purple-50 g-white py-3 px-2 tracking-wide"> 7 | {arr.map((v) => ( 8 | <div 9 | className="border-purple-300 border-r-2 py-px p-2 mb-1 last:border-0" 10 | key={v}> 11 | <span className="ffamily-b text-red-800 font-normal">{v}</span> 12 | </div> 13 | ))} 14 | </div> 15 | ); 16 | 17 | const View = (title, data) => ( 18 | <div> 19 | <Title title={title} /> 20 | <Tags arr={data} /> 21 | </div> 22 | ); 23 | 24 | function Others({className, type}) { 25 | const {basic} = useContext(TailwindContext); 26 | const { 27 | pseudoClass, 28 | pseudoClassAria, 29 | pseudoClassmedia, 30 | functions, 31 | opacity, 32 | colorsNum, 33 | } = basic; 34 | 35 | const data = { 36 | PseudoClass: View('Pseudo Class', pseudoClass), 37 | PseudoClassAria: View('Pseudo Class - Aria', pseudoClassAria), 38 | PseudoClassmedia: View('Pseudo Class - Media', pseudoClassmedia), 39 | Opacity: View('Opacity', opacity), 40 | ColorsNum: View('Colors', colorsNum), 41 | Functions: View('Functions & Directives', functions), 42 | }; 43 | return <div className={`${className}`}>{data[type]}</div>; 44 | } 45 | 46 | export default Others; 47 | -------------------------------------------------------------------------------- /src/components/header/Spacing.jsx: -------------------------------------------------------------------------------- 1 | import React, {useContext} from 'react'; 2 | import Title from '../Title'; 3 | import {TailwindContext} from '../../context/TailwindContext'; 4 | 5 | function Spacing({title}) { 6 | const {basic} = useContext(TailwindContext); 7 | 8 | return ( 9 | <div className=""> 10 | <Title title="Spacing" /> 11 | <div className="flex flex-col items-start justify-center bg-purple-50 p-6 overflow-x-scroll lg:overflow-hidden"> 12 | {basic.spacing.map((v) => { 13 | return ( 14 | <div className="flex flex-row items-center pt-1" key={v}> 15 | <div className="w-10 text-sm text-gray-800"> {v} </div> 16 | <div className={'bg-purple-300 h-2 w-' + v}></div> 17 | </div> 18 | ); 19 | })} 20 | </div> 21 | </div> 22 | ); 23 | } 24 | 25 | export default Spacing; 26 | -------------------------------------------------------------------------------- /src/context/TailwindContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {basic} from './basic'; 3 | import {responsive} from './responsive'; 4 | import {cheatsheet} from './cheatsheet'; 5 | import {responsiveIcons} from './icons'; 6 | 7 | export const data = { 8 | basic, 9 | responsive, 10 | cheatsheet, 11 | responsiveIcons, 12 | }; 13 | export const TailwindContext = React.createContext(null); 14 | -------------------------------------------------------------------------------- /src/context/background.json: -------------------------------------------------------------------------------- 1 | { 2 | "bg-attachment": {"col": 1, "data": ["bg-fixed", "bg-local", "bg-scroll"]}, 3 | 4 | "bg-clip": { 5 | "col": 1, 6 | "data": [ 7 | "bg-clip-border", 8 | "bg-clip-padding", 9 | "bg-clip-content", 10 | "bg-clip-text" 11 | ] 12 | }, 13 | "[bg-color|gradient-Color-Stops]": { 14 | "col": 1, 15 | "data": [ 16 | "[bg|from]-transparent", 17 | "[bg|from]-[inherit|current]", 18 | "[bg|from]-[white|black]", 19 | "[bg|from]-[$color]-[50-900]" 20 | ] 21 | }, 22 | "bg-position": { 23 | "col": 1, 24 | "data": [ 25 | "bg-center", 26 | "bg-[left|right|top|bottom]", 27 | "bg-[left|right]-[top|bottom]" 28 | ] 29 | }, 30 | 31 | "bg-image": { 32 | "col": 2, 33 | "data": [ 34 | "bg-none", 35 | "bg-gradient-to-[t|r|b|l]", 36 | "bg-gradient-to-[tl|tr|bl|br]" 37 | ] 38 | }, 39 | "bg-repeat": { 40 | "col": 2, 41 | "data": [ 42 | "bg-repeat", 43 | "bg-norepeat", 44 | "bg-repeat-[x|y]", 45 | "bg-repeat-round", 46 | "bg-repeat-space" 47 | ] 48 | }, 49 | "bg-size": {"col": 2, "data": ["bg-auto", "bg-cover", "bg-contain"]}, 50 | "bg-origin": { 51 | "col": 2, 52 | "data": ["bg-origin-border", "bg-origin-padding", "bg-origin-content"] 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/context/basic.js: -------------------------------------------------------------------------------- 1 | export let basic = { 2 | spacing: [ 3 | '0', 4 | 'px', 5 | '0.5', 6 | '1', 7 | '1.5', 8 | '2', 9 | '2.5', 10 | '3', 11 | '3.5', 12 | '4', 13 | '5', 14 | '6', 15 | '7', 16 | '8', 17 | '9', 18 | '10', 19 | '11', 20 | '12', 21 | '14', 22 | '16', 23 | '20', 24 | '24', 25 | '28', 26 | '32', 27 | '36', 28 | '40', 29 | '44', 30 | '48', 31 | '52', 32 | '56', 33 | '60', 34 | '64', 35 | '72', 36 | '80', 37 | '96', 38 | ], 39 | 40 | colors: [ 41 | 'slate', 42 | 'gray', 43 | 'zinc', 44 | 'neutral', 45 | 'stone', 46 | 'amber', 47 | 'yellow', 48 | 'lime', 49 | 'green', 50 | 'emerald', 51 | 'teal', 52 | 'cyan', 53 | 'sky', 54 | 'blue', 55 | 'indigo', 56 | 'violet', 57 | 'purple', 58 | 'fuchsia', 59 | 'pink', 60 | 'rose', 61 | 'red', 62 | 'orange', 63 | ], 64 | pseudoClass: [ 65 | 'hover', 66 | 'focus', 67 | 'focus-within', 68 | 'focus-visible', 69 | 'active', 70 | 'visited', 71 | 'target', 72 | 'first', 73 | 'last', 74 | 'only', 75 | 'odd', 76 | 'even', 77 | 'first-of-type', 78 | 'last-of-type', 79 | 'only-of-type', 80 | 'empty', 81 | 'disabled', 82 | 'enabled', 83 | 'checked', 84 | 'indeterminate', 85 | 'default', 86 | 'required', 87 | 'valid', 88 | 'invalid', 89 | 'in-range', 90 | 'out-of-range', 91 | 'placeholder-shown', 92 | 'autofill', 93 | 'read-only', 94 | 'before', 95 | 'after', 96 | 'first-letter', 97 | 'first-line', 98 | 'marker', 99 | 'selection', 100 | 'file', 101 | 'backdrop', 102 | 'placeholder', 103 | 'supports-[…]', 104 | 'data-[…]', 105 | 'rtl', 106 | 'ltr', 107 | 'open', 108 | ], 109 | pseudoClassmedia: [ 110 | 'sm', 111 | 'md', 112 | 'lg', 113 | 'xl', 114 | '2xl', 115 | 'min-[…]', 116 | 'max-sm', 117 | 'max-md', 118 | 'max-lg', 119 | 'max-xl', 120 | 'max-2xl', 121 | 'max-[…]', 122 | 'dark', 123 | 'portrait', 124 | 'landscape', 125 | 'motion-safe', 126 | 'motion-reduce', 127 | 'contrast-more', 128 | 'contrast-less', 129 | 'print', 130 | ], 131 | pseudoClassAria: [ 132 | 'aria-checked', 133 | 'aria-disabled', 134 | 'aria-expanded', 135 | 'aria-hidden', 136 | 'aria-pressed', 137 | 'aria-readonly', 138 | 'aria-required', 139 | 'aria-selected', 140 | 'aria-[…]', 141 | ], 142 | functions: [ 143 | '@tailwind', 144 | '@apply', 145 | '@layer', 146 | '@config', 147 | 'theme()', 148 | 'screen()', 149 | ], 150 | variants: { 151 | 'all-utility': ['responsive'], 152 | 'background-color': ['hover', 'focus'], 153 | 'border-color': ['hover', 'focus'], 154 | 'box-shadow': ['hover', 'focus'], 155 | 'font-weight': ['hover', 'focus'], 156 | opacity: ['hover', 'focus'], 157 | outline: ['focus'], 158 | 'text-color': ['hover', 'focus'], 159 | 'text-decoration': ['hover', 'focus'], 160 | }, 161 | opacity: [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100], 162 | colorsNum: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900], 163 | }; 164 | -------------------------------------------------------------------------------- /src/context/border.json: -------------------------------------------------------------------------------- 1 | { 2 | "[border|divide|outline|ring|ring-offset]-color": { 3 | "col": 1, 4 | "data": [ 5 | "[border|divide|ring|ring-offset]-transparent", 6 | "[border|divide|ring|ring-offset]-[inherit|current]", 7 | "[border|divide|ring|ring-offset]-white", 8 | "[border|divide|ring|ring-offset]-black", 9 | "[border|divide|ring|ring-offset]-[$color]-[50-900]" 10 | ] 11 | }, 12 | 13 | "[border|divide|outline]-style": { 14 | "col": 1, 15 | "data": [ 16 | "[border|divide]-solid", 17 | "[border|divide|outline]-dotted", 18 | "[border|divide|outline]-dashed", 19 | "[border|divide|outline]-double", 20 | "[border|divide|outline]-none", 21 | "border-hidden", 22 | "outline" 23 | ] 24 | }, 25 | "border-width": { 26 | "col": 2, 27 | "data": [ 28 | "border", 29 | "border-[0|2|4|8]", 30 | "border-[x|y]", 31 | "border-[x|y]-[0|2|4|8]", 32 | "border-[t|r|b|l]", 33 | "border-[t|r|b|l]-[0|2|4|8]" 34 | ] 35 | }, 36 | "divide width": { 37 | "col": 2, 38 | "data": ["divide-[x|y]", "divide-[x|y]-reverse", "divide-[x|y]-[0|2|4|8]"] 39 | }, 40 | 41 | "ring-width": { 42 | "col": 2, 43 | "data": ["ring", "ring-inset", "ring-[0|1|2|4|8]"] 44 | }, 45 | "ring-offset-width": { 46 | "col": 2, 47 | "data": ["ring-offset-[0|1|2|4|8]"] 48 | }, 49 | "outline-width": { 50 | "col": 2, 51 | "data": ["outline-[0|1|2|4|8]"] 52 | }, 53 | "outline-offset-width": { 54 | "col": 2, 55 | "data": ["outline-offset-[0|1|2|4|8]"] 56 | }, 57 | 58 | "border-radius": { 59 | "col": 1, 60 | "data": [ 61 | "rounded", 62 | "rounded-[sm|md|lg|xl|2xl|3xl]", 63 | "rounded-[full|none]", 64 | "rounded-[t|r|b|l]", 65 | "rounded-[t|r|b|l]-[full|none]", 66 | "rounded-[t|r|b|l]-[sm|md|lg|xl|2xl|3xl]", 67 | "rounded-[tr|tl|br|bl]", 68 | "rounded-[tr|tl|br|bl]-[full|none]", 69 | "rounded-[tr|tl|br|bl]-[sm|md|lg|xl|2xl|3xl]" 70 | ] 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/context/cheatsheet.js: -------------------------------------------------------------------------------- 1 | import {pick as _pick, chunk as _chunk, keys as _keys} from 'lodash'; 2 | import flexboxAndGrid from './flexbox-and-grid.json'; 3 | import layout from './layout.json'; 4 | import others from './others.json'; 5 | import background from './background.json'; 6 | import border from './border.json'; 7 | import typography from './typography.json'; 8 | import filters from './filters.json'; 9 | import interactivity from './interactivity.json'; 10 | 11 | const createColArray = (data) => { 12 | let maxCol = 1; 13 | Object.values(data).map((v) => { 14 | if (v.col > maxCol) maxCol = v.col; 15 | }); 16 | 17 | const finalArray = []; 18 | for (let i = 1; i <= maxCol; i++) { 19 | const colObj = {}; 20 | Object.entries(data).map(([k, v]) => { 21 | if (v.col === i) colObj[k] = v.data; 22 | }); 23 | finalArray.push(colObj); 24 | } 25 | 26 | return finalArray; 27 | }; 28 | 29 | export let cheatsheet = { 30 | background: {title: 'Background', data: createColArray(background)}, 31 | border: {title: 'Border', data: createColArray(border)}, 32 | effect: {title: 'effect', data: createColArray(others.effect)}, 33 | table: {title: 'table', data: createColArray(others.table)}, 34 | svg: {title: 'svg', data: createColArray(others.svg)}, 35 | interactivity: {title: 'Interactivity', data: createColArray(interactivity)}, 36 | accessibility: { 37 | title: 'accessibility', 38 | data: createColArray(others.accessibility), 39 | }, 40 | sizing: {title: 'Sizing', data: createColArray(others.sizing)}, 41 | spacing: {title: 'spacing', data: createColArray(others.spacing)}, 42 | typography: {title: 'Typography', data: createColArray(typography)}, 43 | layout: {title: 'Layout', data: createColArray(layout)}, 44 | flexbox: {title: 'flex', data: createColArray(flexboxAndGrid.flexbox)}, 45 | grid: {title: 'Grid', data: createColArray(flexboxAndGrid.grid)}, 46 | flexboxAndGrid: { 47 | title: 'Flex/Grid', 48 | data: createColArray(flexboxAndGrid.flexboxAndGrid), 49 | }, 50 | transition: { 51 | title: 'transition & Animation', 52 | data: createColArray(others.transition), 53 | }, 54 | transform: {title: 'transform', data: createColArray(others.transform)}, 55 | filters: {title: 'filters', data: createColArray(filters)}, 56 | }; 57 | 58 | export let cheatsheetOrder = (() => { 59 | const order = (sm, lg, xl, _2xl) => { 60 | return { 61 | sm: sm, 62 | lg: lg ?? sm, 63 | xl: xl ?? lg ?? sm, 64 | '2xl': _2xl ?? lg ?? sm, 65 | }; 66 | }; 67 | return { 68 | flexbox: order(1, 1, null, 1), 69 | grid: order(2, 2, null, 2), 70 | flexboxAndGrid: order(3, 4, 3, 3), 71 | background: order(4, undefined, null, 7), 72 | border: order(5, undefined, null, 4), 73 | sizing: order(6, 7, null, 12), 74 | spacing: order(7, 3, 4), 75 | typography: order(8, null, null, 6), 76 | layout: order(9, null, null, 5), 77 | interactivity: order(11), 78 | transition: order(12), 79 | transform: order(13), 80 | filters: order(14, null, null, 11), 81 | effect: order(15, 16, 15), 82 | table: order(16, 15, null, 12), 83 | svg: order(16), 84 | accessibility: order(17), 85 | }; 86 | })(); 87 | -------------------------------------------------------------------------------- /src/context/filters.json: -------------------------------------------------------------------------------- 1 | { 2 | "Blur": { 3 | "col": 2, 4 | "data": [ 5 | "[blur|backdrop-blur]", 6 | "[blur|backdrop-blur]-[sm|md|lg|xl|2xl|3xl]", 7 | "[blur|backdrop-blur]-none" 8 | ] 9 | }, 10 | "Brightness": { 11 | "col": 1, 12 | "data": [ 13 | "brightness-[0|50|75|90|95|100|105|110|125|150|200]", 14 | "backdrop-brightness-[0|50|75|90|95|100|105|110|125|150|200]" 15 | ] 16 | }, 17 | "Contrast": { 18 | "col": 1, 19 | "data": [ 20 | "contrast-[0|50|75|100|125|150|200]", 21 | "backdrop-contrast-[0|50|75|100|125|150|200]" 22 | ] 23 | }, 24 | "Drop-Shadow": { 25 | "col": 2, 26 | "data": ["drop-shadow", "drop-shadow-[sm|md|lg|xl|2xl]", "drop-shadow-none"] 27 | }, 28 | "[Grayscale | Invert | Sepia]": { 29 | "col": 2, 30 | "data": [ 31 | "[grayscale|invert|sepia]-0", 32 | "[grayscale|invert|sepia]", 33 | "backdrop-[grayscale|invert|sepia]-0", 34 | "backdrop-[grayscale|invert|sepia]" 35 | ] 36 | }, 37 | "Hue-Rotate": { 38 | "col": 1, 39 | "data": [ 40 | "hue-rotate-[0|15|30|60|90|180]", 41 | "backdrop-hue-rotate-[0|15|30|60|90|180]" 42 | ] 43 | }, 44 | "Backdrop-Opacity": {"col": 1, "data": ["backdrop-opacity-[$OPACITY]"]}, 45 | "Saturate": { 46 | "col": 1, 47 | "data": [ 48 | "saturate-[0|50|100|150|200]", 49 | "backdrop-saturate-[0|50|100|150|200]" 50 | ] 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/context/flexbox-and-grid.json: -------------------------------------------------------------------------------- 1 | { 2 | "flexbox": { 3 | "flex basis": { 4 | "col": 1, 5 | "data": [ 6 | "basis-[$SPACING]", 7 | "basis-auto", 8 | "basis-full", 9 | "basis-1/2", 10 | "basis-[1-2]/3", 11 | "basis-[1-3]/4", 12 | "basis-[1-4]/5", 13 | "basis-[1-5]/6", 14 | "basis-[1-11]/12" 15 | ] 16 | }, 17 | "direction": { 18 | "col": 1, 19 | "data": ["flex-row", "flex-col", "flex-row-reverse", "flex-col-reverse"] 20 | }, 21 | "wrap": { 22 | "col": 1, 23 | "data": ["flex-wrap", "flex-wrap-reverse", "flex-nowrap"] 24 | }, 25 | "flex": { 26 | "col": 2, 27 | "data": ["flex-initial", "flex-1", "flex-auto", "flex-none"] 28 | }, 29 | "flex-grow": {"col": 2, "data": ["grow", "grow-0"]}, 30 | "flex-shrink": {"col": 2, "data": ["shrink", "shrink-0"]}, 31 | "flex-order": { 32 | "col": 2, 33 | "data": ["order-first", "order-last", "order-none", "order-[1-12]"] 34 | } 35 | }, 36 | "grid": { 37 | "grid-template-rows": { 38 | "col": 1, 39 | "data": ["grid-rows-[1-6]", "grid-rows-none"] 40 | }, 41 | "grid-template-columns": { 42 | "col": 1, 43 | "data": ["grid-cols-[1-12]", "grid-cols-none"] 44 | }, 45 | "grid-column-[start|end]": { 46 | "col": 1, 47 | "data": [ 48 | "col-auto", 49 | "col-span-[1-12]", 50 | "col-span-full", 51 | "col-start-[1-13]", 52 | "col-start-auto", 53 | "col-end-[1-13]", 54 | "col-end-auto" 55 | ] 56 | }, 57 | "grid-row-[start|end]": { 58 | "col": 1, 59 | "data": [ 60 | "row-auto", 61 | "row-span-[1-6]", 62 | "row-span-full", 63 | "row-start-[1-7]", 64 | "row-start-auto", 65 | "row-end-[1-7]", 66 | "row-end-auto" 67 | ] 68 | }, 69 | "grid-auto-flow": { 70 | "col": 2, 71 | "data": [ 72 | "grid-flow-row", 73 | "grid-flow-col", 74 | "grid-flow-dense", 75 | "grid-flow-row-dense", 76 | "grid-flow-col-dense" 77 | ] 78 | }, 79 | "grid-auto-columns": { 80 | "col": 2, 81 | "data": [ 82 | "auto-cols-auto", 83 | "auto-cols-min", 84 | "auto-cols-max", 85 | "auto-cols-fr" 86 | ] 87 | }, 88 | "grid-auto-rows": { 89 | "col": 2, 90 | "data": [ 91 | "auto-rows-auto", 92 | "auto-rows-min", 93 | "auto-rows-max", 94 | "auto-rows-fr" 95 | ] 96 | } 97 | }, 98 | "flexboxAndGrid": { 99 | "gap": { 100 | "col": 1, 101 | "data": ["gap-[$SPACING]", "gap-x-[$SPACING]", "gap-y-[$SPACING]"] 102 | }, 103 | "justify-content": { 104 | "col": 1, 105 | "data": [ 106 | "justify-start", 107 | "justify-center", 108 | "justify-end", 109 | "justify-between", 110 | "justify-around", 111 | "justify-evenly" 112 | ] 113 | }, 114 | "justify-items": { 115 | "col": 1, 116 | "data": [ 117 | "justify-items-start", 118 | "justify-items-end", 119 | "justify-items-center", 120 | "justify-items-stretch" 121 | ] 122 | }, 123 | "justify-self": { 124 | "col": 1, 125 | "data": [ 126 | "justify-self-auto", 127 | "justify-self-start", 128 | "justify-self-end", 129 | "justify-self-center", 130 | "justify-self-stretch" 131 | ] 132 | }, 133 | "align-content": { 134 | "col": 2, 135 | "data": [ 136 | "content-center", 137 | "content-start", 138 | "content-end", 139 | "content-between", 140 | "content-around", 141 | "content-evenly", 142 | "content-baseline" 143 | ] 144 | }, 145 | "align-items": { 146 | "col": 2, 147 | "data": [ 148 | "items-start", 149 | "items-end", 150 | "items-center", 151 | "items-baseline", 152 | "items-stretch" 153 | ] 154 | }, 155 | "align-self": { 156 | "col": 2, 157 | "data": [ 158 | "self-auto", 159 | "self-start", 160 | "self-end", 161 | "self-center", 162 | "self-stretch", 163 | "self-baseline" 164 | ] 165 | }, 166 | "place-content": { 167 | "col": 3, 168 | "data": [ 169 | "place-content-center", 170 | "place-content-start", 171 | "place-content-end", 172 | "place-content-between", 173 | "place-content-around", 174 | "place-content-evenly", 175 | "place-content-stretch", 176 | "place-content-baseline" 177 | ] 178 | }, 179 | "place-items": { 180 | "col": 3, 181 | "data": [ 182 | "place-items-auto", 183 | "place-items-start", 184 | "place-items-end", 185 | "place-items-center", 186 | "place-items-stretch" 187 | ] 188 | }, 189 | "place-self": { 190 | "col": 3, 191 | "data": [ 192 | "place-self-auto", 193 | "place-self-start", 194 | "place-self-end", 195 | "place-self-center", 196 | "place-self-stretch" 197 | ] 198 | } 199 | } 200 | } 201 | -------------------------------------------------------------------------------- /src/context/icons.jsx: -------------------------------------------------------------------------------- 1 | const r1 = ( 2 | <svg 3 | width="8.57142857142857" 4 | height="24" 5 | viewBox="0 0 10 28" 6 | xmlns="http://www.w3.org/2000/svg" 7 | class="fill-current block mx-auto mb-1"> 8 | <path 9 | d="M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 8.5 28h-7A1.5 1.5 0 0 1 0 26.5v-13A1.5 1.5 0 0 1 1.5 12zM1 15v10h8V15H1zm4 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM4 13v1h2v-1H4z" 10 | fill-rule="evenodd"></path> 11 | </svg> 12 | ); 13 | const r2 = ( 14 | <svg 15 | width="11.999999999999998" 16 | height="24" 17 | viewBox="0 0 14 28" 18 | xmlns="http://www.w3.org/2000/svg" 19 | class="fill-current block mx-auto mb-1"> 20 | <path 21 | d="M1.5 6h11A1.5 1.5 0 0 1 14 7.5v19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 26.5v-19A1.5 1.5 0 0 1 1.5 6zM1 9v16h12V9H1zm6 18.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM7 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" 22 | fill-rule="evenodd"></path> 23 | </svg> 24 | ); 25 | const r3 = ( 26 | <svg 27 | width="22.28571428571428" 28 | height="24" 29 | viewBox="0 0 26 28" 30 | xmlns="http://www.w3.org/2000/svg" 31 | class="fill-current block mx-auto mb-1"> 32 | <path 33 | d="M26 26.5a1.5 1.5 0 0 1-1.5 1.5h-23A1.5 1.5 0 0 1 0 26.5v-14A1.5 1.5 0 0 1 1.5 11h23a1.5 1.5 0 0 1 1.5 1.5v14zm-3 .5V12H3v15h20zm1.5-6.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-23-.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" 34 | fill-rule="evenodd"></path> 35 | </svg> 36 | ); 37 | const r4 = ( 38 | <svg 39 | width="32.57142857142856" 40 | height="24" 41 | viewBox="0 0 38 28" 42 | xmlns="http://www.w3.org/2000/svg" 43 | class="fill-current block mx-auto mb-1"> 44 | <path 45 | d="M34 26h4v1c-1.333.667-2.667 1-4 1H4c-1.333 0-2.667-.333-4-1v-1h4V7.5A1.5 1.5 0 0 1 5.5 6h27A1.5 1.5 0 0 1 34 7.5V26zM6 8v18h26V8H6z" 46 | fill-rule="evenodd"></path> 47 | </svg> 48 | ); 49 | const r5 = ( 50 | <svg 51 | width="30.85714285714285" 52 | height="24" 53 | viewBox="0 0 36 28" 54 | xmlns="http://www.w3.org/2000/svg" 55 | class="fill-current block mx-auto mb-1"> 56 | <path d="M20.857 24l.857 3H24v1H12v-1h2.286l.857-3H1.5A1.5 1.5 0 0 1 0 22.5v-21A1.5 1.5 0 0 1 1.5 0h33A1.5 1.5 0 0 1 36 1.5v21a1.5 1.5 0 0 1-1.5 1.5H20.857zM2 2v18h32V2H2z"></path> 57 | </svg> 58 | ); 59 | const r6 = ( 60 | <svg 61 | width="30.85714285714285" 62 | height="24" 63 | viewBox="0 0 36 28" 64 | xmlns="http://www.w3.org/2000/svg" 65 | class="fill-current block mx-auto mb-1"> 66 | <path d="M20.857 24l.857 3H24v1H12v-1h2.286l.857-3H1.5A1.5 1.5 0 0 1 0 22.5v-21A1.5 1.5 0 0 1 1.5 0h33A1.5 1.5 0 0 1 36 1.5v21a1.5 1.5 0 0 1-1.5 1.5H20.857zM2 2v18h32V2H2z"></path> 67 | </svg> 68 | ); 69 | 70 | export const responsiveIcons = { 71 | r1, 72 | r2, 73 | r3, 74 | r4, 75 | r5, 76 | r6, 77 | }; 78 | -------------------------------------------------------------------------------- /src/context/interactivity.json: -------------------------------------------------------------------------------- 1 | { 2 | "[Accent|Caret] Color": { 3 | "col": 1, 4 | "data": [ 5 | "accent-transparent", 6 | "accent-[inherit|current]", 7 | "accent-white", 8 | "accent-black", 9 | "accent-[$color]-[50-900]" 10 | ] 11 | }, 12 | "Appearance": {"col": 1, "data": ["appearance-none"]}, 13 | "Cursor": { 14 | "col": 1, 15 | "data": [ 16 | "cursor-[none|auto|default|pointer]", 17 | "cursor-[wait|text|move|help]", 18 | "cursor-[progress|cell|crosshair]", 19 | "cursor-[alias|copy|no-drop]", 20 | "cursor-[grab|grabbing]", 21 | "cursor-not-allowed", 22 | "cursor-context-menu", 23 | "cursor-vertical-text", 24 | "cursor-all-scroll", 25 | "cursor-[row|col]-resize", 26 | "cursor-[n|e|s|w]-resize", 27 | "cursor-[ne|nw|se|sw|ew|ns]-resize", 28 | "cursor-[nesw|nwse]-resize", 29 | "cursor-zoom-[in|out]" 30 | ] 31 | }, 32 | "Pointer Events": { 33 | "col": 1, 34 | "data": ["pointer-events-auto", "pointer-events-none"] 35 | }, 36 | "Resize": {"col": 3, "data": ["resize", "resize-[x/y]", "resize-none"]}, 37 | "Scroll Behavior": {"col": 2, "data": ["scroll-auto", "scroll-smooth"]}, 38 | "Scroll Margin": { 39 | "col": 2, 40 | "data": [ 41 | "[-]scroll-m-[$spacing]", 42 | "[-]scroll-m[x|y]-[$spacing]", 43 | "[-]scroll-m[t|r|b|l]-[$spacing]" 44 | ] 45 | }, 46 | "Scroll Padding": { 47 | "col": 2, 48 | "data": [ 49 | "[-]scroll-p-[$spacing]", 50 | "[-]scroll-p[x|y]-[$spacing]", 51 | "[-]scroll-p[t|r|b|l]-[$spacing]" 52 | ] 53 | }, 54 | "Scroll Snap Align": { 55 | "col": 2, 56 | "data": ["snap-start", "snap-end", "snap-center", "snap-align-none"] 57 | }, 58 | "Scroll Snap Stop": { 59 | "col": 2, 60 | "data": ["snap-normal", "snap-always"] 61 | }, 62 | "Scroll Snap Type": { 63 | "col": 2, 64 | "data": [ 65 | "snap-none", 66 | "snap-[x|y]", 67 | "snap-both", 68 | "snap-mandatory", 69 | "snap-proximity" 70 | ] 71 | }, 72 | "Touch Action": { 73 | "col": 3, 74 | "data": [ 75 | "touch-auto", 76 | "touch-none", 77 | "touch-pan-[x|y]", 78 | "touch-pan-[left|right]", 79 | "touch-pan-[up|down]", 80 | "touch-pinch-zoom", 81 | "touch-manipulation" 82 | ] 83 | }, 84 | "User Select": { 85 | "col": 3, 86 | "data": ["select-none", "select-text", "select-all", "select-auto"] 87 | }, 88 | "Will Change": { 89 | "col": 3, 90 | "data": [ 91 | "will-change-auto", 92 | "will-change-scroll", 93 | "will-change-contents", 94 | "will-change-transform" 95 | ] 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/context/layout.json: -------------------------------------------------------------------------------- 1 | { 2 | "Aspect Ratio": { 3 | "col": 4, 4 | "data": ["aspect-auto", "aspect-square", "aspect-video"] 5 | }, 6 | "Container": {"col": 1, "data": ["container"]}, 7 | "Columns": { 8 | "col": 1, 9 | "data": [ 10 | "columns-[1-12]", 11 | "columns-auto", 12 | "coloumns-[3xs|2xs|xs]", 13 | "coloumns-[sm|md|lg|xl]", 14 | "coloumns-[2-7]xl" 15 | ] 16 | }, 17 | "Break [Before|After]": { 18 | "col": 3, 19 | "data": [ 20 | "break-[before|after]-auto", 21 | "break-[before|after]-all", 22 | "break-[before|after]-[avoid|avoid-page]", 23 | "break-[before|after]-page", 24 | "break-[before|after]-[left|right]", 25 | "break-[before|after]-column" 26 | ] 27 | }, 28 | "Break Inside": { 29 | "col": 3, 30 | "data": [ 31 | "break-inside-auto", 32 | "break-inside-[avoid|avoid-page]", 33 | "break-inside-avoid-column" 34 | ] 35 | }, 36 | "Box Decoration Break": { 37 | "col": 4, 38 | "data": ["box-decoration-clone", "box-decoration-slice"] 39 | }, 40 | "Box Sizing": {"col": 1, "data": ["box-border", "box-content"]}, 41 | "Display": { 42 | "col": 2, 43 | "data": [ 44 | "[block|inline|inline-block]", 45 | "[flex|inline-flex]", 46 | "[grid|inline-grid]", 47 | "table", 48 | "table-[caption|cell]", 49 | "table-[row|column]", 50 | "table-[row|column]-group", 51 | "table-[header|footer]-group", 52 | "flow-root", 53 | "contents", 54 | "hidden" 55 | ] 56 | }, 57 | "Float": {"col": 1, "data": ["float-[left|right]", "float-none"]}, 58 | "Clear": { 59 | "col": 1, 60 | "data": ["clear-[left|right]", "clear-both", "clear-none"] 61 | }, 62 | "Isolation": {"col": 4, "data": ["isolate", "isolation-auto"]}, 63 | "Object-Fit": { 64 | "col": 4, 65 | "data": [ 66 | "object-contain", 67 | "object-cover", 68 | "object-fill", 69 | "object-none", 70 | "object-scale-down" 71 | ] 72 | }, 73 | "Object-Positions": { 74 | "col": 4, 75 | "data": [ 76 | "object-center", 77 | "object-[top|bottom]", 78 | "object-[left|right]", 79 | "object-[left|right]-[top|bottom]" 80 | ] 81 | }, 82 | 83 | "Overflow": { 84 | "col": 3, 85 | "data": [ 86 | "overflow-auto", 87 | "overflow-[hidden|visible]", 88 | "overflow-scroll", 89 | "overflow-[x|y]-auto", 90 | "overflow-[x|y]-[hidden|visible]", 91 | "overflow-[x|y]-scroll" 92 | ] 93 | }, 94 | "overscroll-behavior": { 95 | "col": 3, 96 | "data": [ 97 | "overscroll-auto", 98 | "overscroll-contain", 99 | "overscroll-none", 100 | "overscroll-[x|y]-auto", 101 | "overscroll-[x|y]-contain", 102 | "overscroll-[x|y]-none" 103 | ] 104 | }, 105 | "Positions": { 106 | "col": 1, 107 | "data": ["static", "relative", "absolute", "fixed", "sticky"] 108 | }, 109 | "Positions-TRBL": { 110 | "col": 2, 111 | "data": [ 112 | "[top|right|bottom|left]-[$SPACING]", 113 | "[top|right|bottom|left]-[auto|full]", 114 | "inset-[$SPACING]", 115 | "inset-[auto|full]", 116 | "inset-1/2", 117 | "inset-[1-2]/3", 118 | "inset-[1-3]/4", 119 | "inset-[x|y]-[$SPACING]", 120 | "inset-[x|y]-[auto|full]", 121 | "inset-[x|y]-1/2", 122 | "inset-[x|y]-[1-2]/3", 123 | "inset-[x|y]-[1-3]/4" 124 | ] 125 | }, 126 | "Visible": {"col": 1, "data": ["visible", "invisible", "collapse"]}, 127 | "z-index": {"col": 4, "data": ["z-[0|10|20|30|40|50]", "z-auto"]} 128 | } 129 | -------------------------------------------------------------------------------- /src/context/others.json: -------------------------------------------------------------------------------- 1 | { 2 | "spacing": { 3 | "padding": { 4 | "col": 1, 5 | "data": ["p-[$SPACING]", "p[x|y]-[$SPACING]", "p[t|r|b|l]-[$SPACING]"] 6 | }, 7 | "margin": { 8 | "col": 1, 9 | "data": [ 10 | "m-auto", 11 | "-m-[$SPACING]", 12 | "-m[x|y]-[$SPACING]", 13 | "-m[t|r|b|l]-[$SPACING]", 14 | "m-[$SPACING]", 15 | "m[x|y]-[$SPACING]", 16 | "m[t|r|b|l]-[$SPACING]" 17 | ] 18 | }, 19 | "space Between": { 20 | "col": 1, 21 | "data": [ 22 | "-space-[x|y]-[$SPACING]", 23 | "space-[x|y]-[$SPACING]", 24 | "space-[x|y]-reverse" 25 | ] 26 | } 27 | }, 28 | 29 | "sizing": { 30 | "[ width|height ]": { 31 | "col": 1, 32 | "data": [ 33 | "[w|h]-[$SPACING]", 34 | "[w|h]-[auto|full|screen|fit]", 35 | "[w|h]-[min|max]", 36 | "[w|h]-1/2", 37 | "[w|h]-[1-2]/3", 38 | "[w|h]-[1-3]/4", 39 | "[w|h]-[1-4]/5", 40 | "[w|h]-[1-5]/6", 41 | "w-[1-11]/12" 42 | ] 43 | }, 44 | "min-[ width|height ]": { 45 | "col": 1, 46 | "data": [ 47 | "min-h-screen", 48 | "min-[w|h]-0", 49 | "min-[w|h]-[full|fit]", 50 | "min-[w|h]-[min|max]" 51 | ] 52 | }, 53 | "max-width": { 54 | "col": 2, 55 | "data": [ 56 | "max-w-0", 57 | "max-w-none", 58 | "max-w-[xs|sm|md|lg|xl]", 59 | "max-w-[2-7]xl", 60 | "max-w-prose", 61 | "max-w-screen-[xs|sm|md]", 62 | "max-w-screen-[lg|xl|2xl]", 63 | "max-w-[full|fit]", 64 | "max-w-[min|max]" 65 | ] 66 | }, 67 | "max-height": { 68 | "col": 2, 69 | "data": ["max-h-[full|screen|fit]", "max-h-[min|max]", "max-h-[$SPACING]"] 70 | } 71 | }, 72 | "effect": { 73 | "Box-Shadow": { 74 | "col": 2, 75 | "data": [ 76 | "shadow", 77 | "shadow-[sm|md|lg|xl|2xl]", 78 | "shadow-inner", 79 | "shadow-none" 80 | ] 81 | }, 82 | "Box-Shadow-Color": { 83 | "col": 2, 84 | "data": [ 85 | "shadow--transparent", 86 | "shadow--{inherit|current}", 87 | "shadow--white", 88 | "shadow--black", 89 | "shadow--{$color}-{50-900}" 90 | ] 91 | }, 92 | "Opacity": {"col": 2, "data": ["opacity-[$OPACITY]"]}, 93 | "[Mix|Background]-Blend-Mode": { 94 | "col": 1, 95 | "data": [ 96 | "[mix|bg]-blend-normal", 97 | "[mix|bg]-blend-multiply", 98 | "[mix|bg]-blend-screen", 99 | "[mix|bg]-blend-overlay", 100 | "[mix|bg]-blend-{darken|lighten}", 101 | "[mix|bg]-blend-color", 102 | "[mix|bg]-blend-color-{dodge|burn}", 103 | "[mix|bg]-blend-{soft|hard}-light", 104 | "[mix|bg]-blend-difference", 105 | "[mix|bg]-blend-exclusion", 106 | "[mix|bg]-blend-[hue|saturation]", 107 | "[mix|bg]-blend-luminosity", 108 | "[mix|bg]-blend-plus-lighter" 109 | ] 110 | } 111 | }, 112 | 113 | "table": { 114 | "border-collapse": { 115 | "col": 1, 116 | "data": ["border-collapse", "border-separate"] 117 | }, 118 | "border-spacing": { 119 | "col": 1, 120 | "data": ["border-spacing-[$SPACING]", "border-spacing-[x|y]-[$SPACING]"] 121 | }, 122 | "Table-Layout": {"col": 1, "data": ["table-auto", "table-fixed"]} 123 | }, 124 | "transition": { 125 | "property": { 126 | "col": 1, 127 | "data": [ 128 | "transition-none", 129 | "transition-all", 130 | "transition", 131 | "transition-colors", 132 | "transition-opacity", 133 | "transition-shadow", 134 | "transition-transform" 135 | ] 136 | }, 137 | "[duration|delay]": { 138 | "col": 1, 139 | "data": [ 140 | "[duration|delay]-[75|100|150|200]", 141 | "[duration|delay]-[300|500|700|1000]" 142 | ] 143 | }, 144 | "timing function": { 145 | "col": 2, 146 | "data": ["ease-linear", "ease-in", "ease-out", "ease-in-out"] 147 | }, 148 | "animation": { 149 | "col": 2, 150 | "data": [ 151 | "animate-none", 152 | "animate-spin", 153 | "animate-ping", 154 | "animate-pulse", 155 | "animate-bounce" 156 | ] 157 | } 158 | }, 159 | 160 | "transform": { 161 | "transform-origin": { 162 | "col": 1, 163 | "data": [ 164 | "origin-[top|right|bottom|left]", 165 | "origin-[top|bottom]-[right|left]", 166 | "origin-center" 167 | ] 168 | }, 169 | "scale": { 170 | "col": 1, 171 | "data": [ 172 | "scale-[0|50|75|90|95|100]", 173 | "scale-[105|110|125|150]", 174 | "scale-[x|y]-[0|50|75|90|95|100]", 175 | "scale-[x|y]-[105|110|125|150]" 176 | ] 177 | }, 178 | "rotate": { 179 | "col": 1, 180 | "data": [ 181 | "rotate-[0.1.2.3.6.12.45.90.180]", 182 | "-rotate-[1.2.3.6.12.45.90.180]" 183 | ] 184 | }, 185 | "translate": { 186 | "col": 2, 187 | "data": [ 188 | "{-}translate-[x|y]-[$spacing]", 189 | "{-}translate-[x|y]-1/2", 190 | "{-}translate-[x|y]-[1|2]/3", 191 | "{-}translate-[x|y]-[1|2|3]/4", 192 | "{-}translate-[x|y]-[full|]" 193 | ] 194 | }, 195 | "skew": {"col": 2, "data": ["{-}skew-[x|y]-[0.1.2.3.6.12]"]} 196 | }, 197 | 198 | "svg": { 199 | "[fill|stroke]": { 200 | "col": 1, 201 | "data": [ 202 | "[fill|stroke]-none", 203 | "[fill|stroke]-transparent", 204 | "[fill|stroke]-[inherit|current]", 205 | "[fill|stroke]-[white|black]", 206 | "[fill|stroke]-[$color]-[50-900]" 207 | ] 208 | }, 209 | "stroke-width": {"col": 1, "data": ["stroke-[0|1|2]"]} 210 | }, 211 | 212 | "accessibility": { 213 | "screen-reader": {"col": 1, "data": ["sr-only", "not-sr-only"]} 214 | } 215 | } 216 | -------------------------------------------------------------------------------- /src/context/responsive.js: -------------------------------------------------------------------------------- 1 | import {responsiveIcons} from './icons'; 2 | const {r1, r2, r3, r4, r5, r6} = responsiveIcons; 3 | 4 | export let responsive = { 5 | Mobile: {size: '<640px', class: 'flex', icon: r1}, 6 | 'Tablet (Portrait)': {size: '640px', class: 'sm:flex', icon: r2}, 7 | 'Tablet (Landscape)': {size: '768px', class: 'md:flex', icon: r3}, 8 | Laptop: {size: '1024px', class: 'lg:flex', icon: r4}, 9 | Desktop: {size: '1280px', class: 'xl:flex', icon: r5}, 10 | DesktopLarge: {size: '1536px', class: '2xl:flex', icon: r6}, 11 | }; 12 | -------------------------------------------------------------------------------- /src/context/typography.json: -------------------------------------------------------------------------------- 1 | { 2 | "Family": {"col": 1, "data": ["font-sans", "font-serif", "font-mono"]}, 3 | "size": { 4 | "col": 1, 5 | "data": ["text-[xs|sm|lg|xl]", "text-base", "text-[2-9]xl"] 6 | }, 7 | "smoothing": {"col": 4, "data": ["antialiased", "subpixel-antialiased"]}, 8 | "style": {"col": 2, "data": ["italic", "not-italic"]}, 9 | "weight": { 10 | "col": 2, 11 | "data": [ 12 | "font-[thin|extralight|light]", 13 | "font-normal", 14 | "font-medium", 15 | "font-[semibold|bold|extrabold]", 16 | "font-black" 17 | ] 18 | }, 19 | "font-variant-numeric": { 20 | "col": 2, 21 | "data": [ 22 | "ordinal", 23 | "slashed-zero", 24 | "[normal|lining|tabular]-nums", 25 | "[oldstyle|proportional]-nums", 26 | "[diagonal|stacked]-fractions" 27 | ] 28 | }, 29 | "letter-spacing": { 30 | "col": 2, 31 | "data": [ 32 | "tracking-[tight|tighter]", 33 | "tracking-normal", 34 | "tracking-[wide|wider|widest]" 35 | ] 36 | }, 37 | "line-height": { 38 | "col": 1, 39 | "data": [ 40 | "leading-[3-10]", 41 | "leading-none", 42 | "leading-tight", 43 | "leading-snug", 44 | "leading-normal", 45 | "leading-relaxed", 46 | "leading-loose" 47 | ] 48 | }, 49 | "list-style-type": { 50 | "col": 4, 51 | "data": ["list-none", "list-disc", "list-decimal"] 52 | }, 53 | "list-style-positions": {"col": 4, "data": ["list-inside", "list-outside"]}, 54 | "text-align": { 55 | "col": 1, 56 | "data": [ 57 | "text-[left|right]", 58 | "text-center", 59 | "text-justify", 60 | "text-[start|end]" 61 | ] 62 | }, 63 | "[placeholder|text]-color": { 64 | "col": 2, 65 | "data": [ 66 | "[placeholder|text]-transparent", 67 | "[placeholder|text]-current", 68 | "[placeholder|text]-[white|black]", 69 | "[placeholder|text]-[$COLOR]-[50-900]" 70 | ] 71 | }, 72 | "text-indent": {"col": 3, "data": ["indent-[$SPACING]"]}, 73 | "text-opacity": { 74 | "col": 3, 75 | "data": ["text-opacity-[$OPACITY]"] 76 | }, 77 | "text-decoration": { 78 | "col": 3, 79 | "data": ["underline", "no-underline", "line-through", "overline"] 80 | }, 81 | "text-decoration-color": { 82 | "col": 3, 83 | "data": [ 84 | "decoration-inherit", 85 | "decoration-transparent", 86 | "decoration-current", 87 | "decoration-[white/black]", 88 | "decoration-[$COLOR]-[50-900]" 89 | ] 90 | }, 91 | "text-decoration-style": { 92 | "col": 3, 93 | "data": [ 94 | "decoration-solid", 95 | "decoration-double", 96 | "decoration-dashed", 97 | "decoration-dotted", 98 | "decoration-wavy" 99 | ] 100 | }, 101 | "text-decoration-thickness": { 102 | "col": 3, 103 | "data": [ 104 | "decoration-auto", 105 | "decoration-from-font", 106 | "decoration-[0|1|2|4|8]" 107 | ] 108 | }, 109 | "text-underline-offset": { 110 | "col": 3, 111 | "data": ["underline-offset-auto", "underline-offset-[0|1|2|4|8]"] 112 | }, 113 | "text-transform": { 114 | "col": 1, 115 | "data": ["uppercase", "lowercase", "capitalize", "normal-case"] 116 | }, 117 | "text-overflow": { 118 | "col": 1, 119 | "data": ["truncate", "text-ellipsis", "text-clip"] 120 | }, 121 | "vertical-align": { 122 | "col": 2, 123 | "data": [ 124 | "align-baseline", 125 | "align-[top|middle|bottom]", 126 | "align-text-[top|bottom]", 127 | "align-[sub|super]" 128 | ] 129 | }, 130 | "white-space": { 131 | "col": 4, 132 | "data": [ 133 | "whitespacing-normal", 134 | "whitespacing-no-wrap", 135 | "whitespacing-pre", 136 | "whitespacing-pre-[line|wrap]" 137 | ] 138 | }, 139 | "word-break": { 140 | "col": 4, 141 | "data": ["break-normal", "break-words", "break-all", "break-keep"] 142 | }, 143 | "content": {"col": 4, "data": ["content-none"]} 144 | } 145 | -------------------------------------------------------------------------------- /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umeshmk/Tailwindcss-cheatsheet/79758c83c9679f10766c6f7b25913843f2e3a97c/src/favicon.png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss/base"; 2 | @import "tailwindcss/components"; 3 | @import "tailwindcss/utilities"; 4 | 5 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"); 6 | @import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"); 7 | 8 | body { 9 | font-family: "Roboto"; 10 | } 11 | 12 | .ffamily-a { 13 | font-family: "Roboto"; 14 | } 15 | .ffamily-b { 16 | font-family: "Inconsolata"; 17 | } 18 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ['./src/**/*.{html,js,jsx}'], 3 | safelist: [{pattern: /.*(bg|text|w-).+/}], 4 | darkMode: false, // or 'media' or 'class' 5 | theme: { 6 | extend: {}, 7 | }, 8 | variants: {}, 9 | plugins: [], 10 | }; 11 | -------------------------------------------------------------------------------- /v2.1/assets/index.3c1604a3.js: -------------------------------------------------------------------------------- 1 | import{j as u,l as i,R as m,r as f,a as b}from"./vendor.ddd611f1.js";const w=function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const c of document.querySelectorAll('link[rel="modulepreload"]'))a(c);new MutationObserver(c=>{for(const d of c)if(d.type==="childList")for(const p of d.addedNodes)p.tagName==="LINK"&&p.rel==="modulepreload"&&a(p)}).observe(document,{childList:!0,subtree:!0});function o(c){const d={};return c.integrity&&(d.integrity=c.integrity),c.referrerpolicy&&(d.referrerPolicy=c.referrerpolicy),c.crossorigin==="use-credentials"?d.credentials="include":c.crossorigin==="anonymous"?d.credentials="omit":d.credentials="same-origin",d}function a(c){if(c.ep)return;c.ep=!0;const d=o(c);fetch(c.href,d)}};w();const e=u.exports.jsx,l=u.exports.jsxs;function y(){return l("nav",{className:"\r flex flex-row\r items-center\r justify-between\r text-gray-800\r bg-purple-100 \r px-4\r py-5\r ",children:[l("div",{className:"flex flex-col",children:[e("div",{className:"text-red-700 font-semibold text-xl",children:e("a",{href:"https://umeshmk.github.io/Tailwindcss-cheatsheet/",children:"Tailwind CSS"})}),e("span",{className:"text-sm font-thin",children:"Cheatsheet v2.1"})]}),l("ul",{className:"flex flex-row items-center text-sm",children:[e("li",{className:"flex pr-5 lg:pr-10 font-thin text-sm lg:text-lg underline",children:e("a",{href:"https://umeshmk.github.io/Tailwindcss-cheatsheet/",children:"v3 (Latest)"})}),e("li",{className:"flex flex-col",children:e("a",{href:"https://github.com/umeshmk/Tailwindcss-cheatsheet",children:e("i",{className:"fab fa-github text-red-700 text-4xl"})})})]})]})}function C(){return l("footer",{className:"\r flex flex-col\r w-full\r items-center\r italic\r font-mono\r text-xl\r md:text-2xl\r py-32\r font-thin\r bg-purple-200\r text-red-700\r ",children:[e("div",{children:"Made with"}),e("div",{className:"align-center bg-red-300 my-2 p-2 rounded-xl",children:"\u2764"}),e("a",{className:"",href:"https://github.com/umeshmk",children:"Umesh Kadam"})]})}function n({title:r}){return e("div",{children:l("h1",{className:" inline-block text-xl text-gray-800 bg-purple-100 font-bold p-2 capitalize ",children:[e("span",{className:"text-red-700 font-normal",children:"# "}),r]})})}let N={spacing:["0","px","0.5","1","1.5","2","2.5","3","3.5","4","5","6","7","8","9","10","11","12","14","16","20","24","28","32","36","40","44","48","52","56","60","64","72","80","96"],colors:["gray","red","yellow","green","blue","indigo","purple","pink"],pseudoClass:["responsive","focus","hover","active","group-hover","group-focus","focus-within","focus-visible","motion-safe","motion-reduce","disabled","visited","checked","first","last","odd","even"],functions:["@tailwind","@apply","@layer","@responsive","@variants","@screen"],variants:{"all-utility":["responsive"],"background-color":["hover","focus"],"border-color":["hover","focus"],"box-shadow":["hover","focus"],"font-weight":["hover","focus"],opacity:["hover","focus"],outline:["focus"],"text-color":["hover","focus"],"text-decoration":["hover","focus"]},opacity:[0,5,10,20,25,30,40,50,60,70,75,80,90,95,100],colorsNum:[50,100,200,300,400,500,600,700,800,900]},k={Mobile:["<640px",".flex"],"Tablet (Portrait)":["640px",".sm:flex"],"Tablet (Landscape)":["768px",".md:flex"],Laptop:["1024px",".lg:flex"],Desktop:["1280px",".xl:flex"],DesktopLarge:["1536px",".2xl:flex"]},x={background:{"bg-attachment":["bg-fixed","bg-local","bg-scroll"],"bg-clip":["bg-clip-border","bg-clip-padding","bg-clip-content","bg-clip-text"],"bg-color":["bg-transparent","bg-current","bg-white","bg-black","bg-[ $color ]-[ 50-900 ]"],"bg-opacity":["bg-opacity-[ $OPACITY ]"],"bg-position":["bg-{left|right|top|bottom}","bg-center","bg-{left|right}-{top|bottom}"],"bg-image":["bg-none","bg-gradient-to-[ t|r|b|l ]","bg-gradient-to-[ tl|tr|bl|br ]"],"gradient-Color-Stops":["from-transparent","from-current","from-black","from-white","from-[ $color ]-[ 50-900 ]"],"bg-repeat":["bg-repeat","bg-norepeat","bg-repeat-[ x|y ]","bg-repeat-round","bg-repeat-space"],"bg-size":["bg-auto","bg-cover","bg-contain"]},border:{"[ border|divide|ring|ring-offset ]-color":["[ border|divide|ring|ring-offset ]-transparent","[ border|divide|ring|ring-offset ]-current","[ border|divide|ring|ring-offset ]-white","[ border|divide|ring|ring-offset ]-black","[ border|divide|ring|ring-offset ]-{$color}-{50-900}"],"[ border|divide ]-style":["[ border|divide ]-solid","[ border|divide ]-dotted","[ border|divide ]-dashed","[ border|divide ]-double","[ border|divide ]-none"],"border-width":["border","border-{0|2|4|8}","border-{t|r|b|l}","border-{t|r|b|l}-{0|2|4|8}"],"border-opacity":["border-opacity-[ $OPACITY ]"],"divide width":["divide-[ x|y ]","divide-[ x|y ]-reverse","divide-[ x|y ]-[ 0|2|4|8 ]"],"[ divide|ring ]-opacity":["[ divide|ring ]-opacity-[ $OPACITY ]"],"ring-width":["ring","ring-inset","ring-[ 0|1|2|4|8 ]"],"ring-offset-width":["ring-offset-[ 0|1|2|4|8 ]"],"border-radius":["rounded","rounded-{sm|md|lg|xl}","rounded-[2|3]xl","rounded-{full|none}","rounded-{t|r|b|l}","rounded-{t|r|b|l}-{sm|md|lg|xl}","rounded-{t|r|b|l}-[2|3]xl","rounded-{t|r|b|l}-{full|none}","rounded-{tr|tl|br|bl}","rounded-{tr|tl|br|bl}-{sm|md|lg|xl}","rounded-{tr|tl|br|bl}-[2|3]xl","rounded-{tr|tl|br|bl}-{full|none}"]},interactivity:{cursor:["cursor-auto","cursor-default","cursor-pointer","cursor-wait","cursor-text","cursor-move","cursor-not-allowed"],"user-select":["select-none","select-text","select-all","select-auto"],resize:["resize","resize-{x/y}","resize-none"],"pointer-events":["pointer-events-auto","pointer-events-none"],outline:["outline-none","outline-white","outline-black"],appearance:["appearance-none"]},table:{collapse:["border-collapse","border-separate"],Layout:["table-auto","table-fixed"]},effect:{opacity:["opacity-[ $OPACITY ]"],"box-shadow":["shadow","shadow-[ sm|md|lg|xl|2xl ]","shadow-inner","shadow-none"]},svg:{fill:["fill-current"],stroke:["stroke-current"],"stroke-width":["stroke-[ 0|1|2 ]"]},accessibility:{"screen-reader":["sr-only","not-sr-only"]},sizing:{width:["w-auto","w-[ $SPACING ]","w-1/2","w-{1-2}/3","w-{1-3}/4","w-{1-4}/5","w-{1-5}/6","w-{1-11}/12","w-full","w-screen","w-min","w-max"],"min-width":["min-w-0","min-w-full","min-w-min","min-w-max"],"max-width":["max-w-0","max-w-none","max-w-[ xs|sm|md|lg ]","max-w-xl","max-w-{2-7}xl","max-w-full","max-w-full","max-w-min","max-w-max","max-w-prose","max-w-screen-[ xs|sm|md|lg ]","max-w-screen-[ xl|2xl ]"],height:["h-auto","h-[ $SPACING ]","h-1/2","h-{1-2}/3","h-{1-3}/4","h-{1-4}/5","h-{1-5}/6","h-full","h-screen"],"min-height":["min-h-0","min-h-full","min-h-screen"],"max-height":["max-h-[ $SPACING ]","max-h-full","max-h-screen"]},spacing:{padding:["p-[ $SPACING ]","p[ x|y ]-[ $SPACING ]","p[ t|r|b|l ]-[ $SPACING ]"],margin:["m-auto","-m-[ $SPACING ]","-m[ x|y ]-[ $SPACING ]","-m[ t|r|b|l ]-[ $SPACING ]","m-[ $SPACING ]","m[ x|y ]-[ $SPACING ]","m[ t|r|b|l ]-[ $SPACING ]"],spaceBetween:["-space-[ x|y ]-[ $SPACING ]","space-[ x|y ]-[ $SPACING ]","space-[ x|y ]-reverse"]},typography:{Family:["font-sans","font-serif","font-mono"],size:["text-xs","text-sm","text-base","text-lg","text-xl","text-[ 2-9 ]xl"],smoothing:["antialiased","subpixel-antialiased"],style:["italic","not-italic"],weight:["font-thin","font-extralight","font-light","font-normal","font-medium","font-semibold","font-bold","font-extrabold","font-black"],"font-variant-numeric":["normal-nums","ordinal","slashed-zero","lining-nums","oldstyle-nums","proportional-nums","tabular-nums","diagonal-fractions","stacked-fractions"],"letter-spacing":["tracking-tighter","tracking-tight","tracking-normal","tracking-wide","tracking-wider","tracking-widest"],"line-height":["leading-[ 3-10 ]","leading-none","leading-tight","leading-snug","leading-normal","leading-relaxed","leading-loose"],"list-style-type":["list-none","list-disc","list-decimal"],"list-style-positions":["list-inside","list-outside"],"[placeholder/text]-color":["[placeholder/text]-transparent","[placeholder/text]-current","[placeholder/text]-[ white/black ]","[placeholder/text]-[color}-[50-900}"],"[placeholder|text]-opacity":["[placeholder|text]-opacity-[ $OPACITY ]"],"vertical-align":["align-baseline","align-top","align-middle","align-bottom","align-text-top","align-text-bottom"],"white-spacing":["whitespacing-normal","whitespacing-no-wrap","whitespacing-pre","whitespacing-pre-line","whitespacing-pre-wrap"],"text-align":["text-left","text-right","text-center","text-justify"],"text-decoration":["underline","no-underline","line-through"],"text-overflow":["truncate","overflow-ellipsis","overflow-clip"],transform:["uppercase","lowercase","capitalize","normal-case"],"word-break":["break-normal","break-words","break-all"]},flexbox:{direction:["flex-row","flex-col","flex-row-reverse","flex-col-reverse"],wrap:["flex-wrap","flex-wrap-reverse","flex-nowrap"],flex:["flex-initial","flex-1","flex-auto","flex-none"],"flex-grow":["flex-grow","flex-grow-0"],"flex-shrink":["flex-shrink","flex-shrink-0"],"flex-order":["order-first","order-last","order-none","order-{1-12}"]},layout:{Container:["container"],"Box-Sizing":["box-border","box-content"],Float:["float-right","float-left","float-none"],Clear:["clear-left","clear-right","clear-both","clear-none"],Visible:["visible","invisible"],"z-index":["z-[ 0|10|20|30|40|50 ]","z-auto"],Overflow:["overflow-auto","overflow-hidden","overflow-visible","overflow-scroll","overflow-[ x|y ]-auto","overflow-[ x|y ]-hidden","overflow-[ x|y ]-visible","overflow-[ x|y ]-scroll"],"overscroll-behavior":["overscroll-auto","overscroll-contain","overscroll-none","overscroll-[ x|y ]-auto","overscroll-[ x|y ]-contain","overscroll-[ x|y ]-none"],"Object-Fit":["object-contain","object-cover","object-fill","object-none","object-scale-down"],"Object-Positions":["object-center","object-[ top|bottom ]","object-[ left|right ]","object-[ left|right ]-[ top|bottom ]"],Display:["[ block|inline|inline-block ]","[ flex|inline-flex ]","[ grid|inline-grid ]","table","table-[ caption|cell ]","table-[ row|column ]","table-[ row|column ]-group","table-[ header|footer ]-group","flow-root","contents","hidden"],Positions:["static","relative","absolute","fixed","sticky"],"Positions-TRBL":["[ top|right|bottom|left ]-[ $SPACING ]","[ top|right|bottom|left ]-auto","[ top|right|bottom|left ]-full","inset-[$SPACING]","inset-auto","inset-full","inset-1/[ 2|3|4 ]","inset-2/[ 3|4 ]","inset-3/4","inset-[x|y]-[$SPACING]","inset-[x|y]-auto","inset-[x|y]-full","inset-[x|y]-1/[ 2|3|4 ]","inset-[x|y]-2/[ 3|4 ]","inset-[x|y]-3/4"]},grid:{"grid-template-columns":["grid-cols-[1-12]","grid-cols-none"],"grid-column-[ start|end ]":["col-auto","col-span-[ 1-12 ]","col-span-full","col-start-[ 1-13 ]","col-start-auto","col-end-[ 1-13 ]","col-end-auto"],"grid-template-rows":["grid-rows-[ 1-6 ]","grid-rows-none"],"grid-row-[ start|end ]":["row-auto","row-span-[ 1-6 ]","row-span-full","row-start-[ 1-7 ]","row-start-auto","row-end-[ 1-7 ]","row-end-auto"],"grid-auto-flow":["grid-flow-row","grid-flow-col","grid-flow-row-dense","grid-flow-col-dense"],"grid-auto-columns":["auto-cols-auto","auto-cols-min","auto-cols-max","auto-cols-fr"],"grid-auto-rows":["auto-rows-auto","auto-rows-min","auto-rows-max","auto-rows-fr"],gap:["gap-[ $SPACING ]","gap-x-[ $SPACING ]","gap-y-[ $SPACING ]"]},boxAlignment:{"justify-content":["justify-start","justify-center","justify-end","justify-between","justify-around","justify-evenly"],"justify-items":["justify-items-auto","justify-items-start","justify-items-end","justify-items-center","justify-items-stretch"],"justify-self":["justify-self-auto","justify-self-start","justify-self-end","justify-self-center","justify-self-stretch"],"align-content":["content-center","content-start","content-end","content-between","content-around","content-evenly"],"align-items":["items-start","items-end","items-center","items-baseline","items-stretch"],"align-self":["self-auto","self-start","self-end","self-center","self-stretch"],"place-content":["place-content-center","place-content-start","place-content-end","place-content-between","place-content-around","place-content-evenly","place-content-stretch"],"place-items":["place-items-auto","place-items-start","place-items-end","place-items-center","place-items-stretch"],"place-self":["place-self-auto","place-self-start","place-self-end","place-self-center","place-self-stretch"]},transition:{property:["transition-none","transition-all","transition","transition-colors","transition-opacity","transition-shadow","transition-transform"],duration:["duration-[ 75|100|150|200|300|500|700|1000 ]"],"timing function":["ease-linear","ease-in","ease-out","ease-in-out"],delay:["delay-[ 75|100|150|200|300|500|700|1000 ]"],animation:["animate-none","animate-spin","animate-ping","animate-pulse","animate-bounce"]},transform:{tranform:["transform","transform-gpu","transform-none"],"transform-origin":["origin-[ top|right|bottom|left ]","origin-[ top|bottom ]-[ right|left ]","origin-center"],scale:["scale-[ 0|50|75|90|95|100|105|110|125|150 ]","scale-[ x|y ]-[ 0|50|75|90|95|100|105|110|125|150 ]"],rotate:["rotate-[ 0.1.2.3.6.12.45.90.180]","-rotate-[ 1.2.3.6.12.45.90.180]"],translate:["{-}translate-[ x|y ]-[ $spacing ]","{-}translate-[ x|y ]-1/2","{-}translate-[ x|y ]-[ 1|2 ]/3","{-}translate-[ x|y ]-[ 1|2|3 ]/4","{-}translate-[ x|y ]-[ full| ]"],skew:["{-}skew-[ x|y ]-[ 0.1.2.3.6.12]"]}},A={get cLayout(){var r=x.layout;i.exports.chunk(i.exports.keys(r),5);var t=i.exports.pick(r,["Container","Box-Sizing","Float","Clear","Visible","Positions"]),o=i.exports.pick(r,["Overflow","overscroll-behavior","Object-Fit","Object-Positions"]),a=i.exports.pick(r,["Display","Positions-TRBL","z-index"]);return[t,o,a]},get cTypography(){var r=x.typography,t=i.exports.chunk(i.exports.keys(r),5),o=i.exports.pick(r,t[0]),a=i.exports.pick(r,t[1]),c=i.exports.pick(r,t[2]),d=i.exports.pick(r,t[3]);return[o,a,c,d]},get cSizing(){var r=x.sizing,t=i.exports.chunk(i.exports.keys(r),3),o=i.exports.pick(r,t[0]),a=i.exports.pick(r,t[1]);return[o,a]},get cGrid(){var r=x.grid,t=i.exports.chunk(i.exports.keys(r),4),o=i.exports.pick(r,t[0]),a=i.exports.pick(r,t[1]);return[o,a]},get cBoxAlignment(){var r=x.boxAlignment,t=i.exports.chunk(i.exports.keys(r),5),o=i.exports.pick(r,t[0]),a=i.exports.pick(r,t[1]);return[o,a]},get cBorder(){var r=x.border,t=i.exports.chunk(i.exports.keys(r),5),o=i.exports.pick(r,t[0]),a=i.exports.pick(r,t[1]);return[o,a]},get cBackground(){var r=x.background,t=i.exports.chunk(i.exports.keys(r),5),o=i.exports.pick(r,t[0]),a=i.exports.pick(r,t[1]);return[o,a]}},j=` 2 | 3 | <div class="flex-1"> 4 | <svg 5 | width="8.57142857142857" 6 | height="24" 7 | viewBox="0 0 10 28" 8 | xmlns="http://www.w3.org/2000/svg" 9 | class="fill-current block mx-auto mb-1" 10 | > 11 | <path 12 | d="M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 8.5 28h-7A1.5 1.5 0 0 1 0 26.5v-13A1.5 1.5 0 0 1 1.5 12zM1 15v10h8V15H1zm4 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM4 13v1h2v-1H4z" 13 | fill-rule="evenodd" 14 | ></path> 15 | </svg> 16 | </div> 17 | <div class="flex-1"> 18 | <svg 19 | width="11.999999999999998" 20 | height="24" 21 | viewBox="0 0 14 28" 22 | xmlns="http://www.w3.org/2000/svg" 23 | class="fill-current block mx-auto mb-1" 24 | > 25 | <path 26 | d="M1.5 6h11A1.5 1.5 0 0 1 14 7.5v19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 26.5v-19A1.5 1.5 0 0 1 1.5 6zM1 9v16h12V9H1zm6 18.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM7 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" 27 | fill-rule="evenodd" 28 | ></path> 29 | </svg> 30 | </div> 31 | <div class="flex-1"> 32 | <svg 33 | width="22.28571428571428" 34 | height="24" 35 | viewBox="0 0 26 28" 36 | xmlns="http://www.w3.org/2000/svg" 37 | class="fill-current block mx-auto mb-1" 38 | > 39 | <path 40 | d="M26 26.5a1.5 1.5 0 0 1-1.5 1.5h-23A1.5 1.5 0 0 1 0 26.5v-14A1.5 1.5 0 0 1 1.5 11h23a1.5 1.5 0 0 1 1.5 1.5v14zm-3 .5V12H3v15h20zm1.5-6.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-23-.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" 41 | fill-rule="evenodd" 42 | ></path> 43 | </svg> 44 | </div> 45 | <div class="flex-1"> 46 | <svg 47 | width="32.57142857142856" 48 | height="24" 49 | viewBox="0 0 38 28" 50 | xmlns="http://www.w3.org/2000/svg" 51 | class="fill-current block mx-auto mb-1" 52 | > 53 | <path 54 | d="M34 26h4v1c-1.333.667-2.667 1-4 1H4c-1.333 0-2.667-.333-4-1v-1h4V7.5A1.5 1.5 0 0 1 5.5 6h27A1.5 1.5 0 0 1 34 7.5V26zM6 8v18h26V8H6z" 55 | fill-rule="evenodd" 56 | ></path> 57 | </svg> 58 | </div> 59 | <div class="flex-1"> 60 | <svg 61 | width="30.85714285714285" 62 | height="24" 63 | viewBox="0 0 36 28" 64 | xmlns="http://www.w3.org/2000/svg" 65 | class="fill-current block mx-auto mb-1" 66 | > 67 | <path 68 | d="M20.857 24l.857 3H24v1H12v-1h2.286l.857-3H1.5A1.5 1.5 0 0 1 0 22.5v-21A1.5 1.5 0 0 1 1.5 0h33A1.5 1.5 0 0 1 36 1.5v21a1.5 1.5 0 0 1-1.5 1.5H20.857zM2 2v18h32V2H2z" 69 | ></path> 70 | </svg> 71 | </div> 72 | <div class="flex-1"> 73 | <svg 74 | width="30.85714285714285" 75 | height="24" 76 | viewBox="0 0 36 28" 77 | xmlns="http://www.w3.org/2000/svg" 78 | class="fill-current block mx-auto mb-1" 79 | > 80 | <path 81 | d="M20.857 24l.857 3H24v1H12v-1h2.286l.857-3H1.5A1.5 1.5 0 0 1 0 22.5v-21A1.5 1.5 0 0 1 1.5 0h33A1.5 1.5 0 0 1 36 1.5v21a1.5 1.5 0 0 1-1.5 1.5H20.857zM2 2v18h32V2H2z" 82 | ></path> 83 | </svg> 84 | </div> 85 | `,H=` 86 | <svg class="h-10 w-auto hidden md:block" viewBox="0 0 273 64" fill="none" xmlns="http://www.w3.org/2000/svg"> 87 | <title>Tailwind CSS 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | `;const z={basic:N,responsive:k,cheatsheet:x,cheatsheetComputed:A,responsiveIcons:j,tailwindIcon:H},g=m.createContext(null);let S=r=>e("div",{className:"flex pb-8 md:pb-6 ",children:Object.values(r).map(t=>e("div",{className:"flex-1 bg-purple-100 uppercase md:p-3 ",children:t.map((o,a)=>e("div",{className:"p-2 tracking-wide lowercase",children:e("div",{className:a===0?"text-gray-700 italic border-b-2 border-purple-300 pb-2":"ffamily-b text-red-800 font-normal px-2",children:o})},a))},t))});function v({title:r}){const{responsive:t,responsiveIcons:o}=f.exports.useContext(g),a=m.createRef(null);return f.exports.useEffect(()=>{a.current.innerHTML=o},[]),l("div",{className:"",children:[e(n,{title:"Breakpoints"}),l("div",{className:"grid text-center overflow-x-scroll lg:overflow-hidden",children:[e("div",{className:"grid grid-cols-6 bg-purple-100 text-blue-500 py-6 ",ref:a}),S(t)]})]})}function M({title:r}){const{basic:t}=f.exports.useContext(g);return l("div",{className:"",children:[e(n,{title:"Spacing"}),e("div",{className:"flex flex-col items-start justify-center bg-purple-100 p-6 overflow-x-scroll lg:overflow-hidden",children:t.spacing.map(o=>l("div",{className:"flex flex-row items-center pt-1",children:[l("div",{className:"w-10 text-sm text-gray-800",children:[" ",o," "]}),e("div",{className:"bg-purple-300 h-2 w-"+o})]},o))})]})}function P({title:r}){const{basic:t}=f.exports.useContext(g),{colors:o,colorsNum:a}=t;let c=d=>l("div",{className:"grid grid-cols-1 gap-0 ",children:[e("div",{className:`text-center text-xs py-4 px-0 m-0 text-${d}-500 `,children:d}),a.map(p=>e("div",{className:" ",children:e("div",{className:"py-4 px-4 m-0 text-xs bg-"+d+"-"+p,children:e("div",{className:`text-${d}-${p===400?"6":"4"}00 `,children:p})})},p))]},d);return l("div",{className:"",children:[e(n,{title:"Colors"}),e("div",{className:"",children:e("div",{className:"grid grid-cols-4 gap-y-2 2xl:grid-cols-8 bg-purple-100 ",children:o.map(d=>c(d))})})]})}var h=r=>e("div",{className:"grid grid-cols-2 italic bg-purple-100 py-3 px-2 mb-6 tracking-wide",children:r.map(t=>e("div",{className:"",children:t},t))});function V(){const{basic:r}=f.exports.useContext(g),{pseudoClass:t,functions:o,opacity:a,colorsNum:c}=r;return l("div",{className:"lg:grid lg:grid-cols-2 lg:gap-2 2xl:grid-cols-4 2xl:gap-5",children:[l("div",{children:[e(n,{title:"Pseudo-Class"}),h(t)]}),l("div",{children:[e(n,{title:"Opacity"}),h(a)]}),l("div",{children:[e(n,{title:"Colors"}),h(c)]}),l("div",{children:[e(n,{title:"Functions"}),h(o)]})]})}function $({title:r}){return l("header",{className:"grid grid-cols-1 gap-5 bg-purple-200 p-5 lg:py-20",children:[l("div",{className:"grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-3 2xl:gap-10 ",children:[e(M,{}),l("div",{className:"2xl:grid 2xl:gap-10",children:[e(P,{}),e("div",{className:"hidden 2xl:block",children:e(v,{})})]})]}),e("div",{className:"lg:mx-auto 2xl:hidden",children:e(v,{})}),e(V,{})]})}const s=({data:r})=>e("div",{className:"flex flex-col flex-none bg-purple-100 py-6 px-1",children:Object.keys(r).map(t=>l("div",{className:"text-gray-600 text-sm uppercase font-semibold w-full p-2",children:[t,r[t].map((o,a)=>e("div",{className:"text-red-800 font-normal px-2 ",children:l("code",{className:"ffamily-b lowercase",children:[".",o]})},a))]},t))});function L(){const{cheatsheet:r,cheatsheetComputed:t}=f.exports.useContext(g);return l("div",{className:"grid grid-cols-1 lg:flex lg:flex-wrap lg:justify-around p-4 ",children:[l("div",{className:"my-4",children:[e(n,{title:"flexbox"}),e("div",{className:"flex flex-col",children:e(s,{data:r.flexbox})})]}),l("div",{className:"my-4",children:[e(n,{title:"Grid"}),l("div",{className:"flex flex-row overflow-x-scroll lg:overflow-hidden",children:[e(s,{data:t.cGrid[0]}),e(s,{data:t.cGrid[1]})]})]}),l("div",{className:"my-4",children:[e(n,{title:"Box-alignment"}),l("div",{className:"flex flex-row overflow-x-scroll lg:overflow-hidden",children:[e(s,{data:t.cBoxAlignment[0]}),e(s,{data:t.cBoxAlignment[1]})]})]}),l("div",{className:"my-4",children:[e(n,{title:"Sizing"}),l("div",{className:"flex flex-row overflow-x-scroll lg:overflow-hidden",children:[e(s,{data:t.cSizing[0]}),e(s,{data:t.cSizing[1]})]})]}),l("div",{className:"my-4",children:[e(n,{title:"spacing"}),e(s,{data:r.spacing})]}),l("div",{className:"my-4",children:[e(n,{title:"Layout"}),l("div",{className:"flex flex-row overflow-x-scroll lg:overflow-hidden",children:[e(s,{data:t.cLayout[0]}),e(s,{data:t.cLayout[1]}),e(s,{data:t.cLayout[2]})]})]}),l("div",{className:"my-4",children:[e(n,{title:"Typography"}),l("div",{className:"flex flex-row overflow-x-scroll lg:overflow-hidden",children:[e(s,{data:t.cTypography[0]}),e(s,{data:t.cTypography[1]}),e(s,{data:t.cTypography[2]}),e(s,{data:t.cTypography[3]})]})]}),l("div",{className:"my-4",children:[e(n,{title:"Background"}),l("div",{className:"flex flex-row overflow-x-scroll lg:overflow-hidden",children:[e(s,{data:t.cBackground[0]}),e(s,{data:t.cBackground[1]})]})]}),l("div",{className:"my-4",children:[e(n,{title:"Border"}),l("div",{className:"flex flex-row overflow-x-scroll lg:overflow-hidden",children:[e(s,{data:t.cBorder[0]}),e(s,{data:t.cBorder[1]})]})]}),l("div",{className:"my-4",children:[e(n,{title:"transition"}),e(s,{data:r.transition})]}),l("div",{className:"my-4",children:[e(n,{title:"transform"}),e(s,{data:r.transform})]}),l("div",{className:"my-4",children:[e(n,{title:"effect"}),e(s,{data:r.effect})]}),l("div",{className:"my-4",children:[e(n,{title:"table"}),e(s,{data:r.table})]}),l("div",{className:"my-4",children:[e(n,{title:"Interactivity"}),e(s,{data:r.interactivity})]}),l("div",{className:"my-4",children:[e(n,{title:"svg"}),e(s,{data:r.svg})]}),l("div",{className:"my-4",children:[e(n,{title:"accessibility"}),e(s,{data:r.accessibility})]})]})}function I(){return e("div",{className:"bg-white",children:l(g.Provider,{value:z,children:[e(y,{}),e($,{}),e(L,{}),e(C,{})]})})}b.render(e(m.StrictMode,{children:e(I,{})}),document.getElementById("root")); 100 | -------------------------------------------------------------------------------- /v2.1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tailwind CSS - Cheatsheet 8 | 9 | 13 | 14 | 15 | 19 | 28 | 29 | 30 | 31 | 32 | 33 |

34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | base: "/Tailwindcss-cheatsheet/", 8 | server: { 9 | host: "0.0.0.0", 10 | }, 11 | }); 12 | --------------------------------------------------------------------------------