TWCSS

21 |

22 | Fast, minimalist Tailwind-compatible CSS runtime. 23 |

24 |

25 |

26 |

27 | View on GitHub 28 | Documentation 29 |

30 |

31 |

32 |

Zero setup

33 |

It just works. Import in your project or add directly to the page.

34 |

35 |

36 |

Library agnostic

37 |

Works with vanilla JavaScript and any modern framework. Works with Shadow DOM too.

38 |

39 |

40 |

Lightweight and fast

41 |

Minified and gzipped, it's only ~12 kB.

42 |

43 |

44 |

22 | Shadow DOM: custom-element-1 23 |

28 | Shadow DOM: inner-element-2 29 |

34 |

Shadow DOM: outer-element

35 | 36 | 37 |

Shadow DOM: ${name}

Hello, world!

41 | {children} 42 |

-?)?', // Minus sign 12 | '((?[a-z0-9-@:]+):)?', 13 | '(?', 14 | // Values 15 | '((?[a-z-]+-)(', 16 | '(?[0-9.]+)|', 17 | '(?[0-9]+/[0-9]+)|', 18 | '(?[a-z]+)|', 19 | '(\\[(?[^\\[]+)\\])|', 20 | '(\$(?--[a-z-]+)\$)', 21 | ')$)|', 22 | // Default 23 | '(.+)', 24 | ')' 25 | ].join('')) 26 | 27 | // ----------------------------------------------------------------------------- 28 | // Public API 29 | // ----------------------------------------------------------------------------- 30 | 31 | // Global object. 32 | export const tw = { instances: new Map(), add, extend } 33 | 34 | export function init (root) { 35 | if (tw.instances.has(root)) { 36 | return 37 | } 38 | 39 | const timestamp = Date.now() 40 | const sheet = createSheet() 41 | const instance = { 42 | root, 43 | usedRules: new Set(), 44 | sheet, 45 | mqRulesStartIndex: sheet.cssRules.length, 46 | observer: new MutationObserver(mutations => mutationHandler(instance, mutations)) 47 | } 48 | 49 | // Add instance to the map. 50 | tw.instances.set(root, instance) 51 | 52 | // Inject style sheet to the root. 53 | root.adoptedStyleSheets = [instance.sheet] 54 | 55 | // Initialise instance. 56 | root.readyState === 'loading' 57 | ? root.addEventListener('DOMContentLoaded', () => initHandler(instance)) 58 | : initHandler(instance) 59 | 60 | // Performance metrics. 61 | instance.initTime = Date.now() - timestamp 62 | } 63 | 64 | export function add (className, root = document) { 65 | init(root) 66 | return addRules(tw.instances.get(root), className) 67 | } 68 | 69 | export function extend ({ classes = {}, colors = {}, keyframes = {}, queries = {} }) { 70 | // Add custom keyframes. 71 | Object.entries(keyframes).forEach(([name, keyframes]) => { 72 | tw.instances.values().forEach(instance => { 73 | instance.sheet.insertRule(`@keyframes ${name} { ${keyframes} }`, instance.sheet.cssRules.length) 74 | }) 75 | }) 76 | 77 | // Generate classes for custom colors. 78 | COLOR_PROPS.entries().forEach(([colorClass, colorProp]) => { 79 | Object.entries(colors).forEach(([colorSuffix, lch]) => { 80 | classes[`${colorClass}-${colorSuffix}`] = `{ ${colorProp}: oklch(${lch}) }` 81 | OPACITIES.forEach(opacity => { 82 | classes[`${colorClass}-${colorSuffix}/${opacity}`] = `{ ${colorProp}: oklch(${lch} / ${opacity / 100}) }` 83 | }) 84 | }) 85 | }) 86 | 87 | // Add custom queries. 88 | Object.entries(queries).forEach(([name, query]) => STATES.has(name) || PSEUDO.has(name) 89 | ? console.error(`[TWCSS] Name "${name}" is reserved and cannot be used for custom queries.`) 90 | : QUERIES.set(name, query)) 91 | 92 | // Add custom classes. 93 | Object.entries(classes).forEach(([name, css]) => UTILS.set(name, css)) 94 | } 95 | 96 | // ----------------------------------------------------------------------------- 97 | // Event handlers 98 | // ----------------------------------------------------------------------------- 99 | 100 | function initHandler (instance) { 101 | // Start detecting mutations. 102 | instance.observer.observe(instance.root, { 103 | attributes: true, 104 | childList: true, 105 | subtree: true, 106 | attributeFilter: ['tw'], 107 | }) 108 | 109 | // Update existing classes and initialise existing shadow roots. 110 | for (const el of instance.root.querySelectorAll('*')) { 111 | el.shadowRoot && init(el.shadowRoot) 112 | el.hasAttribute('tw') && updateClass(instance, el) 113 | } 114 | } 115 | 116 | async function mutationHandler (instance, mutations) { 117 | let clean = false 118 | for (const m of mutations) { 119 | // Attribute change. 120 | if (m.type === 'attributes' && m.attributeName === 'tw') { 121 | updateClass(instance, m.target) 122 | continue 123 | } 124 | 125 | // New node added. 126 | for (const node of m.addedNodes) { 127 | if (node.nodeType === 1) { 128 | // Process node. 129 | node.hasAttribute('tw') && updateClass(instance, node) 130 | 131 | // Process children. 132 | node.querySelectorAll('[tw]').forEach(el => updateClass(instance, el)) 133 | 134 | // Initialize new shadow root. 135 | node.shadowRoot && init(node.shadowRoot) 136 | } 137 | } 138 | 139 | clean ||= m.removedNodes.length 140 | } 141 | 142 | // If any nodes were removed, check if any shadow roots were disconnected. 143 | if (clean) { 144 | for (const inst of tw.instances.values()) { 145 | if (!inst.root.isConnected) { 146 | inst.observer.disconnect() 147 | tw.instances.delete(inst.root) 148 | } 149 | } 150 | } 151 | } 152 | 153 | // ----------------------------------------------------------------------------- 154 | // Class processing and style injection 155 | // ----------------------------------------------------------------------------- 156 | 157 | function createSheet () { 158 | const sheet = new CSSStyleSheet() 159 | 160 | for (const css of RESET) { 161 | sheet.insertRule(css, sheet.cssRules.length) 162 | } 163 | 164 | for (const [name, keyframes] of KEYFRAMES.entries()) { 165 | sheet.insertRule(`@keyframes ${name} { ${keyframes} }`, sheet.cssRules.length) 166 | } 167 | 168 | return sheet 169 | } 170 | 171 | function updateClass (instance, el) { 172 | el.className = addRules(instance, el.getAttribute('tw')) 173 | } 174 | 175 | function addRules (instance, className) { 176 | const timestamp = Date.now() 177 | const classes = (className || '').split(/[ ,]+/) 178 | const outClasses = new Set() 179 | 180 | for (const cls of classes) { 181 | // Ignore false conditional results. 182 | if (cls === 'false') { 183 | continue 184 | } 185 | 186 | try { 187 | addRule(instance, cls) 188 | // Add to output only if no errors. 189 | outClasses.add(cls) 190 | } catch (err) { 191 | console.error(`[TWCSS] Unable to process "${cls}". ${err.message}`) 192 | } 193 | } 194 | 195 | instance.lastGenerationTime = Date.now() - timestamp 196 | return Array.from(outClasses).join(' ') 197 | } 198 | 199 | function addRule (instance, cls) { 200 | // Skip if empty or already present. 201 | if (!cls || instance.usedRules.has(cls)) { 202 | return 203 | } 204 | 205 | const { rule, isHighPriority, hasQuery } = parse(cls) 206 | 207 | // Rules are added in the following order. 208 | // 1. Standard rules. 209 | // 2. High priority standard rules. 210 | // 3. Media query rules. 211 | // 4. High priority media query rules. 212 | let index 213 | let increaseMqRulesStartIndex = false 214 | if (hasQuery) { 215 | index = isHighPriority ? instance.sheet.cssRules.length : instance.mqRulesStartIndex 216 | } else { 217 | index = isHighPriority ? instance.mqRulesStartIndex : 0 218 | increaseMqRulesStartIndex = true 219 | } 220 | 221 | instance.sheet.insertRule(rule, index) 222 | instance.usedRules.add(cls) 223 | 224 | // Increase only when the above does not throw any errors. 225 | if (increaseMqRulesStartIndex) { 226 | instance.mqRulesStartIndex += 1 227 | } 228 | } 229 | 230 | function parse (cls) { 231 | const groups = cls.match(PARSER).groups 232 | const { negative, prefix, util, base, number, fraction, string, raw, custom } = groups 233 | const minus = negative ? '-' : '' 234 | 235 | let mq = '' 236 | let pseudo = '' 237 | let state = '' 238 | 239 | // Prefix processing. 240 | for (const chunk of (prefix ?? '').split(':')) { 241 | if (QUERIES.has(chunk)) { 242 | if (mq) throw new Error(`Query "${chunk}" is duplicated.`) 243 | mq = chunk 244 | } else if (PSEUDO.has(chunk)) { 245 | if (pseudo) throw new Error(`Pseudo element "${chunk}" is duplicated.`) 246 | pseudo = `::${chunk}` 247 | } else if (STATES.has(chunk)) { 248 | state += STATES.get(chunk) 249 | } else if (chunk) { 250 | throw new Error(`Prefix "${chunk}" is invalid.`) 251 | } 252 | } 253 | 254 | // Resolve actual CSS. 255 | let css = UTILS.get(`${minus}${util}`) // Basic class. 256 | if (!css) { 257 | css = UTILS.get(base) // Dynamic class. 258 | if (!css || !css.includes('$')) { 259 | throw new Error('Utility class does not exist.') 260 | } 261 | 262 | if (number) { 263 | css = css.replace('$', `calc(${minus}${number} * 4px)`) 264 | } else if (fraction) { 265 | css = css.replace('$', `calc(${minus}${fraction} * 100%)`) 266 | } else if (raw) { 267 | css = css.replace('$', raw.replace(/_/g, ' ')) 268 | } else if (custom) { 269 | css = css.replace('$', `var(${custom})`) 270 | } else if (string && STRING_SIZES[string]) { 271 | css = css.replace('$', STRING_SIZES[string]) 272 | } else { 273 | throw new Error('Utility class does not exist.') 274 | } 275 | } 276 | 277 | const baseRule = `.${CSS.escape(cls)}${pseudo}${state} ${css}` 278 | const rule = mq ? `${QUERIES.get(mq)} { ${baseRule} }` : baseRule 279 | const isHighPriority = Boolean(HIGH_PRIORITY_RULES.find(r => util.includes(r))) 280 | const hasQuery = Boolean(mq) 281 | 282 | return { rule, isHighPriority, hasQuery } 283 | } 284 | -------------------------------------------------------------------------------- /engine/colors.js: -------------------------------------------------------------------------------- 1 | export const COLOR_PROPS = new Map([ 2 | ['bg', 'background-color'], 3 | ['text', 'color'], 4 | ['decoration', 'text-decoration-color'], 5 | ['border', 'border-color'], 6 | ['outline', 'outline-color'], 7 | ['accent', 'accent-color'], 8 | ['caret', 'caret-color'], 9 | ['fill', 'fill'], 10 | ['stroke', 'stroke'], 11 | ]) 12 | 13 | export const COLORS = new Map([ 14 | ['red-50', '0.971 0.013 17.38'], 15 | ['red-100', '0.936 0.032 17.717'], 16 | ['red-200', '0.885 0.062 18.334'], 17 | ['red-300', '0.808 0.114 19.571'], 18 | ['red-400', '0.704 0.191 22.216'], 19 | ['red-500', '0.637 0.237 25.331'], 20 | ['red-600', '0.577 0.245 27.325'], 21 | ['red-700', '0.505 0.213 27.518'], 22 | ['red-800', '0.444 0.177 26.899'], 23 | ['red-900', '0.396 0.141 25.723'], 24 | ['red-950', '0.258 0.092 26.042'], 25 | ['orange-50', '0.98 0.016 73.684'], 26 | ['orange-100', '0.954 0.038 75.164'], 27 | ['orange-200', '0.901 0.076 70.697'], 28 | ['orange-300', '0.837 0.128 66.29'], 29 | ['orange-400', '0.75 0.183 55.934'], 30 | ['orange-500', '0.705 0.213 47.604'], 31 | ['orange-600', '0.646 0.222 41.116'], 32 | ['orange-700', '0.553 0.195 38.402'], 33 | ['orange-800', '0.47 0.157 37.304'], 34 | ['orange-900', '0.408 0.123 38.172'], 35 | ['orange-950', '0.266 0.079 36.259'], 36 | ['amber-50', '0.987 0.022 95.277'], 37 | ['amber-100', '0.962 0.059 95.617'], 38 | ['amber-200', '0.924 0.12 95.746'], 39 | ['amber-300', '0.879 0.169 91.605'], 40 | ['amber-400', '0.828 0.189 84.429'], 41 | ['amber-500', '0.769 0.188 70.08'], 42 | ['amber-600', '0.666 0.179 58.318'], 43 | ['amber-700', '0.555 0.163 48.998'], 44 | ['amber-800', '0.473 0.137 46.201'], 45 | ['amber-900', '0.414 0.112 45.904'], 46 | ['amber-950', '0.279 0.077 45.635'], 47 | ['yellow-50', '0.987 0.026 102.212'], 48 | ['yellow-100', '0.973 0.071 103.193'], 49 | ['yellow-200', '0.945 0.129 101.54'], 50 | ['yellow-300', '0.905 0.182 98.111'], 51 | ['yellow-400', '0.852 0.199 91.936'], 52 | ['yellow-500', '0.795 0.184 86.047'], 53 | ['yellow-600', '0.681 0.162 75.834'], 54 | ['yellow-700', '0.554 0.135 66.442'], 55 | ['yellow-800', '0.476 0.114 61.907'], 56 | ['yellow-900', '0.421 0.095 57.708'], 57 | ['yellow-950', '0.286 0.066 53.813'], 58 | ['lime-50', '0.986 0.031 120.757'], 59 | ['lime-100', '0.967 0.067 122.328'], 60 | ['lime-200', '0.938 0.127 124.321'], 61 | ['lime-300', '0.897 0.196 126.665'], 62 | ['lime-400', '0.841 0.238 128.85'], 63 | ['lime-500', '0.768 0.233 130.85'], 64 | ['lime-600', '0.648 0.2 131.684'], 65 | ['lime-700', '0.532 0.157 131.589'], 66 | ['lime-800', '0.453 0.124 130.933'], 67 | ['lime-900', '0.405 0.101 131.063'], 68 | ['lime-950', '0.274 0.072 132.109'], 69 | ['green-50', '0.982 0.018 155.826'], 70 | ['green-100', '0.962 0.044 156.743'], 71 | ['green-200', '0.925 0.084 155.995'], 72 | ['green-300', '0.871 0.15 154.449'], 73 | ['green-400', '0.792 0.209 151.711'], 74 | ['green-500', '0.723 0.219 149.579'], 75 | ['green-600', '0.627 0.194 149.214'], 76 | ['green-700', '0.527 0.154 150.069'], 77 | ['green-800', '0.448 0.119 151.328'], 78 | ['green-900', '0.393 0.095 152.535'], 79 | ['green-950', '0.266 0.065 152.934'], 80 | ['emerald-50', '0.979 0.021 166.113'], 81 | ['emerald-100', '0.95 0.052 163.051'], 82 | ['emerald-200', '0.905 0.093 164.15'], 83 | ['emerald-300', '0.845 0.143 164.978'], 84 | ['emerald-400', '0.765 0.177 163.223'], 85 | ['emerald-500', '0.696 0.17 162.48'], 86 | ['emerald-600', '0.596 0.145 163.225'], 87 | ['emerald-700', '0.508 0.118 165.612'], 88 | ['emerald-800', '0.432 0.095 166.913'], 89 | ['emerald-900', '0.378 0.077 168.94'], 90 | ['emerald-950', '0.262 0.051 172.552'], 91 | ['teal-50', '0.984 0.014 180.72'], 92 | ['teal-100', '0.953 0.051 180.801'], 93 | ['teal-200', '0.91 0.096 180.426'], 94 | ['teal-300', '0.855 0.138 181.071'], 95 | ['teal-400', '0.777 0.152 181.912'], 96 | ['teal-500', '0.704 0.14 182.503'], 97 | ['teal-600', '0.6 0.118 184.704'], 98 | ['teal-700', '0.511 0.096 186.391'], 99 | ['teal-800', '0.437 0.078 188.216'], 100 | ['teal-900', '0.386 0.063 188.416'], 101 | ['teal-950', '0.277 0.046 192.524'], 102 | ['cyan-50', '0.984 0.019 200.873'], 103 | ['cyan-100', '0.956 0.045 203.388'], 104 | ['cyan-200', '0.917 0.08 205.041'], 105 | ['cyan-300', '0.865 0.127 207.078'], 106 | ['cyan-400', '0.789 0.154 211.53'], 107 | ['cyan-500', '0.715 0.143 215.221'], 108 | ['cyan-600', '0.609 0.126 221.723'], 109 | ['cyan-700', '0.52 0.105 223.128'], 110 | ['cyan-800', '0.45 0.085 224.283'], 111 | ['cyan-900', '0.398 0.07 227.392'], 112 | ['cyan-950', '0.302 0.056 229.695'], 113 | ['sky-50', '0.977 0.013 236.62'], 114 | ['sky-100', '0.951 0.026 236.824'], 115 | ['sky-200', '0.901 0.058 230.902'], 116 | ['sky-300', '0.828 0.111 230.318'], 117 | ['sky-400', '0.746 0.16 232.661'], 118 | ['sky-500', '0.685 0.169 237.323'], 119 | ['sky-600', '0.588 0.158 241.966'], 120 | ['sky-700', '0.5 0.134 242.749'], 121 | ['sky-800', '0.443 0.11 240.79'], 122 | ['sky-900', '0.391 0.09 240.876'], 123 | ['sky-950', '0.293 0.066 243.157'], 124 | ['blue-50', '0.97 0.014 254.604'], 125 | ['blue-100', '0.932 0.032 255.585'], 126 | ['blue-200', '0.882 0.059 254.128'], 127 | ['blue-300', '0.809 0.105 251.813'], 128 | ['blue-400', '0.707 0.165 254.624'], 129 | ['blue-500', '0.623 0.214 259.815'], 130 | ['blue-600', '0.546 0.245 262.881'], 131 | ['blue-700', '0.488 0.243 264.376'], 132 | ['blue-800', '0.424 0.199 265.638'], 133 | ['blue-900', '0.379 0.146 265.522'], 134 | ['blue-950', '0.282 0.091 267.935'], 135 | ['indigo-50', '0.962 0.018 272.314'], 136 | ['indigo-100', '0.93 0.034 272.788'], 137 | ['indigo-200', '0.87 0.065 274.039'], 138 | ['indigo-300', '0.785 0.115 274.713'], 139 | ['indigo-400', '0.673 0.182 276.935'], 140 | ['indigo-500', '0.585 0.233 277.117'], 141 | ['indigo-600', '0.511 0.262 276.966'], 142 | ['indigo-700', '0.457 0.24 277.023'], 143 | ['indigo-800', '0.398 0.195 277.366'], 144 | ['indigo-900', '0.359 0.144 278.697'], 145 | ['indigo-950', '0.257 0.09 281.288'], 146 | ['violet-50', '0.969 0.016 293.756'], 147 | ['violet-100', '0.943 0.029 294.588'], 148 | ['violet-200', '0.894 0.057 293.283'], 149 | ['violet-300', '0.811 0.111 293.571'], 150 | ['violet-400', '0.702 0.183 293.541'], 151 | ['violet-500', '0.606 0.25 292.717'], 152 | ['violet-600', '0.541 0.281 293.009'], 153 | ['violet-700', '0.491 0.27 292.581'], 154 | ['violet-800', '0.432 0.232 292.759'], 155 | ['violet-900', '0.38 0.189 293.745'], 156 | ['violet-950', '0.283 0.141 291.089'], 157 | ['purple-50', '0.977 0.014 308.299'], 158 | ['purple-100', '0.946 0.033 307.174'], 159 | ['purple-200', '0.902 0.063 306.703'], 160 | ['purple-300', '0.827 0.119 306.383'], 161 | ['purple-400', '0.714 0.203 305.504'], 162 | ['purple-500', '0.627 0.265 303.9'], 163 | ['purple-600', '0.558 0.288 302.321'], 164 | ['purple-700', '0.496 0.265 301.924'], 165 | ['purple-800', '0.438 0.218 303.724'], 166 | ['purple-900', '0.381 0.176 304.987'], 167 | ['purple-950', '0.291 0.149 302.717'], 168 | ['fuchsia-50', '0.977 0.017 320.058'], 169 | ['fuchsia-100', '0.952 0.037 318.852'], 170 | ['fuchsia-200', '0.903 0.076 319.62'], 171 | ['fuchsia-300', '0.833 0.145 321.434'], 172 | ['fuchsia-400', '0.74 0.238 322.16'], 173 | ['fuchsia-500', '0.667 0.295 322.15'], 174 | ['fuchsia-600', '0.591 0.293 322.896'], 175 | ['fuchsia-700', '0.518 0.253 323.949'], 176 | ['fuchsia-800', '0.452 0.211 324.591'], 177 | ['fuchsia-900', '0.401 0.17 325.612'], 178 | ['fuchsia-950', '0.293 0.136 325.661'], 179 | ['pink-50', '0.971 0.014 343.198'], 180 | ['pink-100', '0.948 0.028 342.258'], 181 | ['pink-200', '0.899 0.061 343.231'], 182 | ['pink-300', '0.823 0.12 346.018'], 183 | ['pink-400', '0.718 0.202 349.761'], 184 | ['pink-500', '0.656 0.241 354.308'], 185 | ['pink-600', '0.592 0.249 0.584'], 186 | ['pink-700', '0.525 0.223 3.958'], 187 | ['pink-800', '0.459 0.187 3.815'], 188 | ['pink-900', '0.408 0.153 2.432'], 189 | ['pink-950', '0.284 0.109 3.907'], 190 | ['rose-50', '0.969 0.015 12.422'], 191 | ['rose-100', '0.941 0.03 12.58'], 192 | ['rose-200', '0.892 0.058 10.001'], 193 | ['rose-300', '0.81 0.117 11.638'], 194 | ['rose-400', '0.712 0.194 13.428'], 195 | ['rose-500', '0.645 0.246 16.439'], 196 | ['rose-600', '0.586 0.253 17.585'], 197 | ['rose-700', '0.514 0.222 16.935'], 198 | ['rose-800', '0.455 0.188 13.697'], 199 | ['rose-900', '0.41 0.159 10.272'], 200 | ['rose-950', '0.271 0.105 12.094'], 201 | ['slate-50', '0.984 0.003 247.858'], 202 | ['slate-100', '0.968 0.007 247.896'], 203 | ['slate-200', '0.929 0.013 255.508'], 204 | ['slate-300', '0.869 0.022 252.894'], 205 | ['slate-400', '0.704 0.04 256.788'], 206 | ['slate-500', '0.554 0.046 257.417'], 207 | ['slate-600', '0.446 0.043 257.281'], 208 | ['slate-700', '0.372 0.044 257.287'], 209 | ['slate-800', '0.279 0.041 260.031'], 210 | ['slate-900', '0.208 0.042 265.755'], 211 | ['slate-950', '0.129 0.042 264.695'], 212 | ['gray-50', '0.985 0.002 247.839'], 213 | ['gray-100', '0.967 0.003 264.542'], 214 | ['gray-200', '0.928 0.006 264.531'], 215 | ['gray-300', '0.872 0.01 258.338'], 216 | ['gray-400', '0.707 0.022 261.325'], 217 | ['gray-500', '0.551 0.027 264.364'], 218 | ['gray-600', '0.446 0.03 256.802'], 219 | ['gray-700', '0.373 0.034 259.733'], 220 | ['gray-800', '0.278 0.033 256.848'], 221 | ['gray-900', '0.21 0.034 264.665'], 222 | ['gray-950', '0.13 0.028 261.692'], 223 | ['zinc-50', '0.985 0 0'], 224 | ['zinc-100', '0.967 0.001 286.375'], 225 | ['zinc-200', '0.92 0.004 286.32'], 226 | ['zinc-300', '0.871 0.006 286.286'], 227 | ['zinc-400', '0.705 0.015 286.067'], 228 | ['zinc-500', '0.552 0.016 285.938'], 229 | ['zinc-600', '0.442 0.017 285.786'], 230 | ['zinc-700', '0.37 0.013 285.805'], 231 | ['zinc-800', '0.274 0.006 286.033'], 232 | ['zinc-900', '0.21 0.006 285.885'], 233 | ['zinc-950', '0.141 0.005 285.823'], 234 | ['neutral-50', '0.985 0 0'], 235 | ['neutral-100', '0.97 0 0'], 236 | ['neutral-200', '0.922 0 0'], 237 | ['neutral-300', '0.87 0 0'], 238 | ['neutral-400', '0.708 0 0'], 239 | ['neutral-500', '0.556 0 0'], 240 | ['neutral-600', '0.439 0 0'], 241 | ['neutral-700', '0.371 0 0'], 242 | ['neutral-800', '0.269 0 0'], 243 | ['neutral-900', '0.205 0 0'], 244 | ['neutral-950', '0.145 0 0'], 245 | ['stone-50', '0.985 0.001 106.423'], 246 | ['stone-100', '0.97 0.001 106.424'], 247 | ['stone-200', '0.923 0.003 48.717'], 248 | ['stone-300', '0.869 0.005 56.366'], 249 | ['stone-400', '0.709 0.01 56.259'], 250 | ['stone-500', '0.553 0.013 58.071'], 251 | ['stone-600', '0.444 0.011 73.639'], 252 | ['stone-700', '0.374 0.01 67.558'], 253 | ['stone-800', '0.268 0.007 34.298'], 254 | ['stone-900', '0.216 0.006 56.043'], 255 | ['stone-950', '0.147 0.004 49.25'], 256 | ['black', '0 0 0'], 257 | ['white', '1 0 0'], 258 | ]) 259 | -------------------------------------------------------------------------------- /tools/generate-reference.js: -------------------------------------------------------------------------------- 1 | /* global Iterator */ 2 | /** 3 | * @file Dirty reference generator. 4 | * @author Michal Kochel 5 | */ 6 | import chroma from 'chroma-js' 7 | import fs from 'node:fs' 8 | import { COLORS, COLOR_PROPS } from '#engine/colors.js' 9 | import { KEYFRAMES } from '#engine/keyframes.js' 10 | import { QUERIES } from '#engine/queries.js' 11 | import { RESET } from '#engine/reset.js' 12 | import { UTILS } from '#engine/utils.js' 13 | import { STRING_SIZES, STATES, PSEUDO } from '#engine/constants.js' 14 | 15 | const HIERARCHY = { 16 | 'Layout': { 17 | 'aspect-ratio': ['aspect-ratio'], 18 | 'columns': ['columns'], 19 | 'break-after': ['break-after'], 20 | 'break-before': ['break-after'], 21 | 'break-inside': ['break-after'], 22 | 'box-decoration-break': ['box-decoration-break'], 23 | 'box-sizing': ['box-sizing'], 24 | 'display': ['display', 'clip'], 25 | 'float': ['float'], 26 | 'clear': ['clear'], 27 | 'isolation': ['isolation'], 28 | 'object-fit': ['object-fit'], 29 | 'object-position': ['object-position'], 30 | 'overflow': ['overflow', 'overflow-x', 'overflow-y'], 31 | 'overscroll-behavior': ['overscroll-behavior', 'overscroll-behavior-x', 'overscroll-behavior-y'], 32 | 'scrollbar-gutter': ['scrollbar-gutter'], 33 | 'position': ['position'], 34 | 'top / right / bottom / left': [ 35 | 'inset', 36 | 'inset-inline', 37 | 'inset-block', 38 | 'inset-inline-start', 39 | 'inset-inline-end', 40 | 'top', 41 | 'right', 42 | 'bottom', 43 | 'left', 44 | ], 45 | 'visibility': ['visibility'], 46 | 'z-index': ['z-index'], 47 | }, 48 | 'Flexbox & Grid': { 49 | 'flex-basis': ['flex-basis'], 50 | 'flex-direction': ['flex-direction'], 51 | 'flex-wrap': ['flex-wrap'], 52 | 'flex': ['flex'], 53 | 'flex-grow': ['flex-grow'], 54 | 'flex-shrink': ['flex-shrink'], 55 | 'order': ['order'], 56 | 'grid-template-columns': ['grid-template-columns'], 57 | 'grid-column': ['grid-column', 'grid-column-start', 'grid-column-end'], 58 | 'grid-template-rows': ['grid-template-rows'], 59 | 'grid-row': ['grid-row', 'grid-row-start', 'grid-row-end'], 60 | 'grid-auto-flow': ['grid-auto-flow'], 61 | 'grid-auto-columns': ['grid-auto-columns'], 62 | 'grid-auto-rows': ['grid-auto-rows'], 63 | 'gap': ['gap', 'row-gap', 'column-gap'], 64 | 'justify-content': ['justify-content'], 65 | 'justify-items': ['justify-items'], 66 | 'justify-self': ['justify-self'], 67 | 'align-content': ['align-content'], 68 | 'align-items': ['align-items'], 69 | 'align-self': ['align-self'], 70 | 'place-content': ['place-content'], 71 | 'place-items': ['place-items'], 72 | 'place-self': ['place-self'], 73 | }, 74 | 'Spacing': { 75 | 'padding': [ 76 | 'padding', 77 | 'padding-inline', 78 | 'padding-block', 79 | 'padding-inline-start', 80 | 'padding-inline-end', 81 | 'padding-top', 82 | 'padding-right', 83 | 'padding-bottom', 84 | 'padding-left', 85 | ], 86 | 'margin': [ 87 | 'margin', 88 | 'margin-inline', 89 | 'margin-block', 90 | 'margin-inline-start', 91 | 'margin-inline-end', 92 | 'margin-top', 93 | 'margin-right', 94 | 'margin-bottom', 95 | 'margin-left', 96 | ], 97 | }, 98 | 'Sizing': { 99 | 'width': ['width'], 100 | 'min-width': ['min-width'], 101 | 'max-width': ['max-width'], 102 | 'height': ['height'], 103 | 'min-height': ['min-height'], 104 | 'max-height': ['max-height'], 105 | }, 106 | 'Typography': { 107 | 'font-family': ['font-family'], 108 | 'font-size': ['font-size'], 109 | 'font-smoothing': ['-webkit-font-smoothing'], 110 | 'font-style': ['font-style'], 111 | 'font-weight': ['font-weight'], 112 | 'font-stretch': ['font-stretch'], 113 | 'font-variant-numeric': ['font-variant-numeric'], 114 | 'letter-spacing': ['letter-spacing'], 115 | 'line-clamp': ['-webkit-line-clamp'], 116 | 'line-height': ['line-height'], 117 | 'list-style-image': ['list-style-image'], 118 | 'list-style-position': ['list-style-position'], 119 | 'list-style-type': ['list-style-type'], 120 | 'text-align': ['text-align'], 121 | 'color': ['color'], 122 | 'text-decoration-line': ['text-decoration-line'], 123 | 'text-decoration-color': ['text-decoration-color'], 124 | 'text-decoration-style': ['text-decoration-style'], 125 | 'text-decoration-thickness': ['text-decoration-thickness'], 126 | 'text-underline-offset': ['text-underline-offset'], 127 | 'text-transform': ['text-transform'], 128 | 'text-overflow': ['text-overflow'], 129 | 'text-wrap': ['text-wrap'], 130 | 'text-indent': ['text-indent'], 131 | 'vertical-align': ['vertical-align'], 132 | 'white-space': ['white-space'], 133 | 'word-break': ['word-break'], 134 | 'overflow-wrap': ['overflow-wrap'], 135 | 'hyphens': ['hyphens'], 136 | 'content': ['content'], 137 | }, 138 | 'Backgrounds': { 139 | 'background-attachment': ['background-attachment'], 140 | 'background-clip': ['background-clip'], 141 | 'background-color': ['background-color'], 142 | 'background-image': ['background-image'], 143 | 'background-origin': ['background-origin'], 144 | 'background-position': ['background-position'], 145 | 'background-repeat': ['background-repeat'], 146 | 'background-size': ['background-size'], 147 | }, 148 | 'Borders': { 149 | 'border-radius': [ 150 | 'border-radius', 151 | 'border-top-left-radius', 152 | 'border-top-right-radius', 153 | 'border-bottom-left-radius', 154 | 'border-bottom-right-radius', 155 | ], 156 | 'border-width': [ 157 | 'border-width', 158 | 'border-top-width', 159 | 'border-right-width', 160 | 'border-bottom-width', 161 | 'border-left-width', 162 | 'border-inline-start-width', 163 | 'border-inline-end-width', 164 | ], 165 | 'border-color': ['border-color'], 166 | 'border-style': ['border-style'], 167 | 'outline-width': ['outline-width'], 168 | 'outline-color': ['outline-color'], 169 | 'outline-style': ['outline-style'], 170 | 'outline-offset': ['outline-offset'], 171 | }, 172 | 'Effects': { 173 | 'box-shadow': ['box-shadow'], 174 | 'text-shadow': ['text-shadow'], 175 | 'opacity': ['opacity'], 176 | 'mix-blend-mode': ['mix-blend-mode'], 177 | 'background-blend-mode': ['background-blend-mode'], 178 | 'mask-clip': ['mask-clip'], 179 | 'mask-composite': ['mask-composite'], 180 | 'mask-image': ['mask-image'], 181 | 'mask-mode': ['mask-mode'], 182 | 'mask-origin': ['mask-origin'], 183 | 'mask-position': ['mask-position'], 184 | 'mask-repeat': ['mask-repeat'], 185 | 'mask-size': ['mask-size'], 186 | 'mask-type': ['mask-type'], 187 | }, 188 | 'Filters': { 189 | 'filter': ['filter'], 190 | 'backdrop-filter': ['backdrop-filter'], 191 | }, 192 | 'Tables': { 193 | 'border-collapse': ['border-collapse'], 194 | 'border-spacing': ['border-spacing'], 195 | 'table-layout': ['table-layout'], 196 | 'caption-side': ['caption-side'], 197 | }, 198 | 'Transitions & Animations': { 199 | 'transition-property': ['transition-property'], 200 | 'transition-behavior': ['transition-behavior'], 201 | 'transition-duration': ['transition-duration'], 202 | 'transition-timing-function': ['transition-timing-function'], 203 | 'animation': ['animation'], 204 | }, 205 | 'Transforms': { 206 | 'backface-visibility': ['backface-visibility'], 207 | 'perspective': ['perspective'], 208 | 'perspective-origin': ['perspective-origin'], 209 | 'rotate': ['rotate'], 210 | 'transform': ['transform'], 211 | 'transform-origin': ['transform-origin'], 212 | 'transform-style': ['transform-style'], 213 | }, 214 | 'Interactivity': { 215 | 'accent-color': ['accent-color'], 216 | 'appearance': ['appearance'], 217 | 'caret-color': ['caret-color'], 218 | 'color-scheme': ['color-scheme'], 219 | 'cursor': ['cursor'], 220 | 'field-sizing': ['field-sizing'], 221 | 'pointer-events': ['pointer-events'], 222 | 'resize': ['resize'], 223 | 'scroll-behavior': ['scroll-behavior'], 224 | 'scroll-margin': ['scroll-margin'], 225 | 'scroll-padding': ['scroll-padding'], 226 | 'scroll-snap-align': ['scroll-snap-align'], 227 | 'scroll-snap-stop': ['scroll-snap-stop'], 228 | 'scroll-snap-type': ['scroll-snap-type'], 229 | 'touch-action': ['touch-action'], 230 | 'user-select': ['user-select'], 231 | 'will-change': ['will-change'], 232 | }, 233 | 'SVG': { 234 | 'fill': ['fill'], 235 | 'stroke': ['stroke'], 236 | 'stroke-width': ['stroke-width'], 237 | }, 238 | 'Accessibility': { 239 | 'forced-color-adjust': ['forced-color-adjust'], 240 | }, 241 | } 242 | 243 | function getRules (props) { 244 | const rules = new Map() 245 | 246 | for (const [cls, css] of UTILS.entries().filter(([_cls, css]) => props.some(p => css.includes(`{ ${p}:`)))) { 247 | // Split composite rules into multiple lines. 248 | const isComposite = css.split(/ {/).pop().match(/:/g).length > 1 249 | if (isComposite) { 250 | rules.set(cls, css.replace(/{ /, '{\n ').replace(/; */g, ';\n ').replace(/}/, '\n}')) 251 | continue 252 | } 253 | 254 | // Detect dynamic properties. 255 | if (css.includes('$')) { 256 | rules.set(`${cls}SUFFIX`, css.replace('$', '...')) 257 | continue 258 | } 259 | 260 | // Detect colors. 261 | if (COLOR_PROPS.values().some(p => css.includes(`${p}:`))) { 262 | if (cls.endsWith('-black')) { 263 | rules.set(cls.replace('-black', '-COLOR'), css.replace('oklch(0 0 0)', 'oklch(...)')) 264 | } 265 | 266 | continue 267 | } 268 | 269 | rules.set(cls, css) 270 | } 271 | 272 | return rules 273 | } 274 | 275 | function generateReference () { 276 | const mdContents = [] 277 | mdContents.push('# Reference', '') 278 | mdContents.push('## Defaults', '') 279 | 280 | // 281 | // CSS reset. 282 | // 283 | 284 | mdContents.push('### CSS reset', '') 285 | mdContents.push(`\`\`\`css\n${RESET.join('\n')}\n\`\`\``, '') 286 | 287 | // 288 | // Media queries. 289 | // 290 | 291 | mdContents.push('### Media and container queries', '') 292 | mdContents.push('All container queries are relative to the ancestor with `@container` class.', '') 293 | for (const [prefix, query] of QUERIES) { 294 | mdContents.push(`\`\`\`css\n/* ${prefix} */\n${query}\n\`\`\``, '') 295 | } 296 | 297 | // 298 | // State prefixes. 299 | // 300 | 301 | mdContents.push('### Prefixes', '') 302 | 303 | mdContents.push('Classes can be prefixed. The order is always `query:state:pseudo:class`. Multiple states are supported.', '') 304 | mdContents.push('States:', '') 305 | mdContents.push('- Multiple states can be combined, e.g., `hover:focus:bg-blue-500`.') 306 | mdContents.push('- Each state also supports negation with `not-` prefix, e.g., `not-hover:bg-blue-500`.') 307 | const states = Iterator.from(STATES.keys()).filter(s => !s.startsWith('not-') && !s.startsWith('has-')).map(s => `\`${s}\``).toArray().join(', ') 308 | mdContents.push(`- Supported states: ${states}.`) 309 | mdContents.push('') 310 | 311 | mdContents.push('Pseudo elements:', '') 312 | const pseudo = Iterator.from(PSEUDO).map(s => `\`${s}\``).toArray().join(', ') 313 | mdContents.push(`- Supported pseudo elements: ${pseudo}.`) 314 | mdContents.push('') 315 | 316 | // 317 | // Keyframes. 318 | // 319 | 320 | mdContents.push('### Keyframes', '') 321 | for (const [name, keyframes] of KEYFRAMES) { 322 | mdContents.push(`\`\`\`css\n@keyframes ${name} {\n ${keyframes}\n}\n\`\`\``, '') 323 | } 324 | 325 | // 326 | // Color table. 327 | // 328 | 329 | mdContents.push('### Colors', '') 330 | mdContents.push( 331 | 'In addition to the colors below, `black`, `white`, `transparent`, `current` and `inherit` are also supported.', 332 | '' 333 | ) 334 | mdContents.push('| | 50|100|200|300|400|500|600|700|800|900|950|') 335 | mdContents.push('|---|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|') 336 | 337 | const colorRow = new Set() 338 | for (const [cls, color] of COLORS) { 339 | if (cls.endsWith('-50')) { 340 | colorRow.clear() 341 | colorRow.add(`**${cls.replace('-50', '')}**`) 342 | } 343 | 344 | const [l, c, h] = color.split(' ').map(Number) 345 | const hex = chroma.oklch(l, c, h).hex() 346 | colorRow.add(`$\\color{${hex}}{\\Huge\\textsf{█}}$`) 347 | 348 | if (cls.endsWith('-950')) { 349 | mdContents.push([...colorRow].join('|')) 350 | } 351 | } 352 | 353 | mdContents.push('') 354 | 355 | // 356 | // Size table. 357 | // 358 | 359 | mdContents.push('### Dynamic properties', '') 360 | mdContents.push( 361 | 'Dynamic properties can be set by adding a suffix according to the table below. With a few exceptions, this mainly applies to sizing. Note that for simplicity the engine treats all of them equally, which means not all combinations will result in a valid CSS. A good example is background image: `bg-[url(...)]` makes sense, whereas `bg-1/3` does not.', 362 | '' 363 | ) 364 | 365 | mdContents.push('|Value |Output |Example (width) |') 366 | mdContents.push('|---------------------------|------------------------------------|-----------------------|') 367 | mdContents.push('|`class-` |`property: calc( * 4px)` |`w-4` |') 368 | mdContents.push('|`-class-` |`property: calc(- * 4px)` |`-w-4` |') 369 | mdContents.push('|`class-` |`property: calc( * 100%)` |`w-1/4` |') 370 | mdContents.push('|`-class-` |`property: calc(- * 100%)`|`-w-1/4` |') 371 | mdContents.push('|`class-[]` |`property: ` |`w-[calc(50%_-_10px)]` |') 372 | mdContents.push('|`class-(--custom-property)`|`property: var(--custom-property)` |`w-(--button-height)` |') 373 | 374 | for (const [name, value] of Object.entries(STRING_SIZES)) { 375 | mdContents.push(`|\`class-${name}\`|\`property: ${value}\`|\`w-${name}\`|`) 376 | } 377 | 378 | mdContents.push('') 379 | 380 | // 381 | // All static utility classes by hierarchy. 382 | // 383 | 384 | for (const [category, subcategories] of Object.entries(HIERARCHY)) { 385 | mdContents.push(`## ${category}`, '') 386 | 387 | for (const [subcategory, props] of Object.entries(subcategories)) { 388 | mdContents.push(`### ${subcategory}`, '') 389 | 390 | const rules = getRules(props) 391 | 392 | if (rules.size === 0) { 393 | mdContents.push('Currently unsupported.', '') 394 | continue 395 | } 396 | 397 | for (const [cls, css] of rules) { 398 | mdContents.push(`\`\`\`css\n.${cls} ${css}\n\`\`\``, '') 399 | } 400 | } 401 | } 402 | 403 | fs.writeFileSync('REFERENCE.md', mdContents.join('\n')) 404 | } 405 | 406 | generateReference() 407 | -------------------------------------------------------------------------------- /engine/utils.js: -------------------------------------------------------------------------------- 1 | import { 2 | ANIM_TIME, 3 | BLEND_MODES, 4 | BRIGHTNESS_LEVELS, 5 | COLUMNS, 6 | CONTRAST_LEVELS, 7 | DURATIONS, 8 | HUE_ROTATE_DEGREES, 9 | LINE_CLAMPS, 10 | OPACITIES, 11 | ORIGINS, 12 | RADII, 13 | ROTATE_DEGREES, 14 | SATURATE_LEVELS, 15 | SCALES, 16 | SKEWS, 17 | STROKE_WIDTHS, 18 | WIDTHS, 19 | Z_INDEXES, 20 | } from './constants.js' 21 | import { backdrop, gen, genc } from './generators.js' 22 | 23 | // Tries to follow Tailwind's order. 24 | export const UTILS = new Map([ 25 | // --------------------------------------------------------------------------- 26 | ['@container', '{ container-type: inline-size }'], 27 | // Layout - aspect-ratio 28 | ['aspect-auto', '{ aspect-ratio: auto }'], 29 | ['aspect-square', '{ aspect-ratio: 1 / 1 }'], 30 | ['aspect-video', '{ aspect-ratio: 16 / 9 }'], 31 | ['aspect-', '{ aspect-ratio: $ }'], 32 | // Layout - columns 33 | ...gen(ii => [`columns-${ii}`, `columns: ${ii}`], [...COLUMNS, 'auto']), 34 | // Layout - break-after 35 | ...gen( 36 | ii => [`break-after-${ii}`, `break-after: ${ii}`], 37 | ['auto', 'avoid', 'avoid-page', 'page', 'left', 'right', 'column'] 38 | ), 39 | // Layout - break-before 40 | ...gen( 41 | ii => [`break-before-${ii}`, `break-after: ${ii}`], 42 | ['auto', 'avoid', 'avoid-page', 'page', 'left', 'right', 'column'] 43 | ), 44 | // Layout - break-inside 45 | ...gen(ii => [`break-inside-${ii}`, `break-inside: ${ii}`], ['auto', 'avoid', 'avoid-page', 'avoid-column']), 46 | // Layout - box-decoration-break 47 | ...gen(ii => [`box-decoration-${ii}`, `box-decoration-break: ${ii}`], ['clone', 'slice']), 48 | // Layout - box-sizing 49 | ...gen(ii => [`box-${ii}`, `box-sizing: ${ii}-box`], ['border', 'content']), 50 | // Layout - display 51 | ...gen( 52 | ii => [`${ii}`, `display: ${ii}`], 53 | [ 54 | 'inline', 55 | 'block', 56 | 'inline-block', 57 | 'flow-root', 58 | 'flex', 59 | 'inline-flex', 60 | 'grid', 61 | 'inline-grid', 62 | 'contents', 63 | 'table', 64 | 'inline-table', 65 | 'list-item', 66 | ] 67 | ), 68 | ['hidden', '{ display: none }'], 69 | [ 70 | 'sr-only', 71 | '{ clip: rect(0, 0, 0, 0); position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; border-width: 0 }', 72 | ], 73 | [ 74 | 'not-sr-only', 75 | '{ clip: auto; position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; white-space: normal }', 76 | ], 77 | // Layout - float 78 | ...gen(ii => [`float-${ii}`, `float: inline-${ii}`], ['start', 'end']), 79 | ...gen(ii => [`float-${ii}`, `float: ${ii}`], ['left', 'right', 'none']), 80 | // Layout - clear 81 | ...gen(ii => [`clear-${ii}`, `clear: inline-${ii}`], ['start', 'end']), 82 | ...gen(ii => [`clear-${ii}`, `clear: ${ii}`], ['left', 'right', 'both', 'none']), 83 | // Layout - isolation 84 | ['isolate', '{ isolation: isolate }'], 85 | ['isolation-auto', '{ isolation: auto }'], 86 | // Layout - object-fit 87 | ...gen(ii => [`object-${ii}`, `object-fit: ${ii}`], ['contain', 'cover', 'fill', 'none', 'scale-down']), 88 | // Layout - object-position 89 | ...gen( 90 | ii => [`object-${ii.replace(/ /g, '-')}`, `object-position: ${ii}`], 91 | ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top'] 92 | ), 93 | // Layout - overflow 94 | ...gen(ii => [`overflow-${ii}`, `overflow: ${ii}`], ['auto', 'hidden', 'clip', 'visible', 'scroll', 'visible']), 95 | ...gen(ii => [`overflow-x-${ii}`, `overflow-x: ${ii}`], ['auto', 'hidden', 'clip', 'visible', 'scroll', 'visible']), 96 | ...gen(ii => [`overflow-y-${ii}`, `overflow-y: ${ii}`], ['auto', 'hidden', 'clip', 'visible', 'scroll', 'visible']), 97 | // Layout - overscroll-behavior 98 | ...gen(ii => [`overscroll-${ii}`, `overscroll-behavior: ${ii}`], ['auto', 'contain', 'none']), 99 | ...gen(ii => [`overscroll-x-${ii}`, `overscroll-behavior-x: ${ii}`], ['auto', 'contain', 'none']), 100 | ...gen(ii => [`overscroll-y-${ii}`, `overscroll-behavior-y: ${ii}`], ['auto', 'contain', 'none']), 101 | // Layout - scrollbar-gutter 102 | ['scrollbar-auto', '{ scrollbar-gutter: auto }'], 103 | ['scrollbar-stable', '{ scrollbar-gutter: stable }'], 104 | ['scrollbar-both', '{ scrollbar-gutter: stable both-edges }'], 105 | // Layout - position 106 | ...gen(ii => [`${ii}`, `position: ${ii}`], ['static', 'fixed', 'absolute', 'relative', 'sticky']), 107 | // Layout - top / right / bottom / left 108 | ['inset-', '{ inset: $ }'], 109 | ['inset-x-', '{ inset-inline: $ }'], 110 | ['inset-y-', '{ inset-block: $ }'], 111 | ['start-', '{ inset-inline-start: $ }'], 112 | ['end-', '{ inset-inline-end: $ }'], 113 | ['top-', '{ top: $ }'], 114 | ['right-', '{ right: $ }'], 115 | ['bottom-', '{ bottom: $ }'], 116 | ['left-', '{ left: $ }'], 117 | // Layout - visibility 118 | ['visible', '{ visibility: visible }'], 119 | ['invisible', '{ visibility: hidden }'], 120 | ['collapse', '{ visibility: collapse }'], 121 | // Layout - z-index 122 | ...gen(ii => [`z-${ii}`, `z-index: ${ii}`], Z_INDEXES), 123 | // --------------------------------------------------------------------------- 124 | // Flexbox & Grid - flex-basis 125 | ['basis-', '{ flex-basis: $ }'], 126 | // Flexbox & Grid - flex-direction 127 | ['flex-row', '{ flex-direction: row }'], 128 | ['flex-row-reverse', '{ flex-direction: row-reverse }'], 129 | ['flex-col', '{ flex-direction: column }'], 130 | ['flex-col-reverse', '{ flex-direction: column-reverse }'], 131 | // Flexbox & Grid - flex-wrap 132 | ...gen(ii => [`flex-${ii}`, `flex-wrap: ${ii}`], ['nowrap', 'wrap', 'wrap-reverse']), 133 | // Flexbox & Grid - flex 134 | ['flex-', '{ flex: $ }'], 135 | ['flex-auto', '{ flex: 1 1 auto }'], 136 | ['flex-initial', '{ flex: 0 1 auto }'], 137 | ['flex-none', '{ flex: none }'], 138 | // Flexbox & Grid - flex-grow 139 | ['grow', '{ flex-grow: 1 }'], 140 | ['grow-0', '{ flex-grow: 0 }'], 141 | // Flexbox & Grid - flex-shrink 142 | ['shrink', '{ flex-shrink: 1 }'], 143 | ['shrink-0', '{ flex-shrink: 0 }'], 144 | // Flexbox & Grid - order 145 | ...gen(ii => [`order-${ii}`, `columns: ${ii}`], COLUMNS), 146 | ['order-first', '{ order: -9999 }'], 147 | ['order-last', '{ order: 9999 }'], 148 | ['order-none', '{ order: 0 }'], 149 | // Flexbox & Grid - grid-template-columns 150 | ...gen(ii => [`grid-cols-${ii}`, `grid-template-columns: repeat(${ii}, minmax(0, 1fr))`], COLUMNS), 151 | ['grid-cols-none', '{ grid-template-columns: none }'], 152 | ['grid-cols-subgrid', '{ grid-template-columns: subgrid }'], 153 | // Flexbox & Grid - grid-column 154 | ['col-auto', '{ grid-column: auto }'], 155 | ...gen(ii => [`col-span-${ii}`, `grid-column: span ${ii} / span ${ii}`], COLUMNS), 156 | ['col-span-full', '{ grid-column: 1 / -1 }'], 157 | ...gen(ii => [`col-start-${ii}`, `grid-column-start: ${ii}`], [...COLUMNS, 13, 'auto']), 158 | // Flexbox & Grid - grid-template-rows 159 | ...gen(ii => [`grid-rows-${ii}`, `grid-template-rows: repeat(${ii}, auto)`], COLUMNS), 160 | ['grid-rows-none', '{ grid-template-rows: none }'], 161 | ['grid-rows-subgrid', '{ grid-template-rows: subgrid }'], 162 | // Flexbox & Grid - grid-row 163 | ['row-auto', '{ grid-row: auto }'], 164 | ...gen(ii => [`row-span-${ii}`, `grid-row: span ${ii} / span ${ii}`], COLUMNS), 165 | ['row-span-full', '{ grid-row: 1 / -1 }'], 166 | ...gen(ii => [`row-start-${ii}`, `grid-row-start: ${ii}`], [...COLUMNS, 13, 'auto']), 167 | // Flexbox & Grid - grid-auto-flow 168 | ['grid-flow-row', '{ grid-auto-flow: row }'], 169 | ['grid-flow-col', '{ grid-auto-flow: column }'], 170 | ['grid-flow-dense', '{ grid-auto-flow: dense }'], 171 | ['grid-flow-row-dense', '{ grid-auto-flow: row dense }'], 172 | ['grid-flow-col-dense', '{ grid-auto-flow: column dense }'], 173 | // Flexbox & Grid - grid-auto-columns 174 | ['auto-cols-auto', '{ grid-auto-columns: auto }'], 175 | ['auto-cols-min', '{ grid-auto-columns: min-content }'], 176 | ['auto-cols-max', '{ grid-auto-columns: max-content }'], 177 | ['auto-cols-fr', '{ grid-auto-columns: minmax(0, 1fr) }'], 178 | // Flexbox & Grid - grid-auto-rows 179 | ['auto-rows-auto', '{ grid-auto-rows: auto }'], 180 | ['auto-rows-min', '{ grid-auto-rows: min-content }'], 181 | ['auto-rows-max', '{ grid-auto-rows: max-content }'], 182 | ['auto-rows-fr', '{ grid-auto-rows: minmax(0, 1fr) }'], 183 | // Flexbox & Grid - gap 184 | ['gap-', '{ gap: $ }'], 185 | ['gap-x-', '{ column-gap: $ }'], 186 | ['gap-y-', '{ row-gap: $ }'], 187 | // Flexbox & Grid - justify-content 188 | ['justify-start', '{ justify-content: flex-start }'], 189 | ['justify-end', '{ justify-content: flex-end }'], 190 | ['justify-center', '{ justify-content: center }'], 191 | ['justify-between', '{ justify-content: space-between }'], 192 | ['justify-around', '{ justify-content: space-around }'], 193 | ['justify-evenly', '{ justify-content: space-evenly }'], 194 | ['justify-stretch', '{ justify-content: stretch }'], 195 | ['justify-normal', '{ justify-content: normal }'], 196 | // Flexbox & Grid - justify-items 197 | ...gen(ii => [`justify-items-${ii}`, `justify-items: ${ii}`], ['start', 'end', 'center', 'stretch', 'normal']), 198 | // Flexbox & Grid - justify-self 199 | ...gen(ii => [`justify-self-${ii}`, `justify-self: ${ii}`], ['auto', 'start', 'end', 'center', 'stretch']), 200 | // Flexbox & Grid - align-content 201 | ['content-normal', '{ align-content: normal }'], 202 | ['content-center', '{ align-content: center }'], 203 | ['content-start', '{ align-content: flex-start }'], 204 | ['content-end', '{ align-content: flex-end }'], 205 | ['content-between', '{ align-content: space-between }'], 206 | ['content-around', '{ align-content: space-around }'], 207 | ['content-evenly', '{ align-content: space-evenly }'], 208 | ['content-baseline', '{ align-content: baseline }'], 209 | ['content-stretch', '{ align-content: stretch }'], 210 | // Flexbox & Grid - align-items 211 | ['items-start', '{ align-items: flex-start }'], 212 | ['items-end', '{ align-items: flex-end }'], 213 | ['items-end-safe', '{ align-items: safe flex-end }'], 214 | ['items-center', '{ align-items: center }'], 215 | ['items-center-safe', '{ align-items: safe center }'], 216 | ['items-baseline', '{ align-items: baseline }'], 217 | ['items-baseline-last', '{ align-items: last baseline }'], 218 | ['items-stretch', '{ align-items: stretch }'], 219 | // Flexbox & Grid - align-self 220 | ['self-auto', '{ align-self: auto }'], 221 | ['self-start', '{ align-self: flex-start }'], 222 | ['self-end', '{ align-self: flex-end }'], 223 | ['self-center', '{ align-self: center }'], 224 | ['self-stretch', '{ align-self: stretch }'], 225 | ['self-baseline', '{ align-self: baseline }'], 226 | // Flexbox & Grid - place-content 227 | ['place-content-center', '{ place-content: center }'], 228 | ['place-content-start', '{ place-content: flex-start }'], 229 | ['place-content-end', '{ place-content: flex-end }'], 230 | ['place-content-between', '{ place-content: space-between }'], 231 | ['place-content-around', '{ place-content: space-around }'], 232 | ['place-content-evenly', '{ place-content: space-evenly }'], 233 | ['place-content-baseline', '{ place-content: baseline }'], 234 | ['place-content-stretch', '{ place-content: stretch }'], 235 | // Flexbox & Grid - place-items 236 | ...gen(ii => [`place-items-${ii}`, `place-items: ${ii}`], ['start', 'end', 'center', 'baseline', 'stretch']), 237 | // Flexbox & Grid - place-self 238 | ...gen(ii => [`place-self-${ii}`, `place-self: ${ii}`], ['auto', 'start', 'end', 'center', 'stretch']), 239 | // --------------------------------------------------------------------------- 240 | // Spacing - padding 241 | ['p-', '{ padding: $ }'], 242 | ['px-', '{ padding-inline: $ }'], 243 | ['py-', '{ padding-block: $ }'], 244 | ['pt-', '{ padding-top: $ }'], 245 | ['pr-', '{ padding-right: $ }'], 246 | ['pb-', '{ padding-bottom: $ }'], 247 | ['pl-', '{ padding-left: $ }'], 248 | ['ps-', '{ padding-inline-start: $ }'], 249 | ['pe-', '{ padding-inline-end: $ }'], 250 | // Spacing - margin 251 | ['m-', '{ margin: $ }'], 252 | ['mx-', '{ margin-inline: $ }'], 253 | ['my-', '{ margin-block: $ }'], 254 | ['mt-', '{ margin-top: $ }'], 255 | ['mr-', '{ margin-right: $ }'], 256 | ['mb-', '{ margin-bottom: $ }'], 257 | ['ml-', '{ margin-left: $ }'], 258 | ['ms-', '{ margin-inline-start: $ }'], 259 | ['me-', '{ margin-inline-end: $ }'], 260 | ['space-x-', ' > :not(:last-child) { margin-inline-end: $ }'], 261 | ['space-y-', ' > :not(:last-child) { margin-bottom: $ }'], 262 | // Sizing - width 263 | ['w-', '{ width: $ }'], 264 | // Sizing - min-width 265 | ['min-w-', '{ min-width: $ }'], 266 | // Sizing - max-width 267 | ['max-w-', '{ max-width: $ }'], 268 | // Sizing - height 269 | ['h-', '{ height: $ }'], 270 | // Sizing - min-height 271 | ['min-h-', '{ min-height: $ }'], 272 | // Sizing - max-height 273 | ['max-h-', '{ max-height: $ }'], 274 | // --------------------------------------------------------------------------- 275 | // Typography - font-family 276 | [ 277 | 'font-sans', 278 | '{ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" }', 279 | ], 280 | ['font-serif', '{ font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif }'], 281 | [ 282 | 'font-mono', 283 | '{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace }', 284 | ], 285 | ['font-', '{ font-family: $ }'], 286 | // Typography - font-size 287 | ['text-xs', '{ font-size: 12px; line-height: 1.333 }'], 288 | ['text-sm', '{ font-size: 14px; line-height: 1.429 }'], 289 | ['text-base', '{ font-size: 16px; line-height: 1.5 }'], 290 | ['text-lg', '{ font-size: 18px; line-height: 1.555 }'], 291 | ['text-xl', '{ font-size: 20px; line-height: 1.4 }'], 292 | ['text-2xl', '{ font-size: 24px; line-height: 1.333 }'], 293 | ['text-3xl', '{ font-size: 30px; line-height: 1.2 }'], 294 | ['text-4xl', '{ font-size: 36px; line-height: 1.111 }'], 295 | ['text-5xl', '{ font-size: 48px; line-height: 1 }'], 296 | ['text-6xl', '{ font-size: 60px; line-height: 1 }'], 297 | ['text-7xl', '{ font-size: 72px; line-height: 1 }'], 298 | ['text-8xl', '{ font-size: 96px; line-height: 1 }'], 299 | ['text-9xl', '{ font-size: 128px; line-height: 1 }'], 300 | // Typography - font-smoothing 301 | ['antialiased', '{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }'], 302 | ['subpixel-antialiased', '{ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto }'], 303 | // Typography - font-style 304 | ['italic', '{ font-style: italic }'], 305 | ['not-italic', '{ font-style: normal }'], 306 | // Typography - font-weight 307 | ['font-thin', '{ font-weight: 100 }'], 308 | ['font-extralight', '{ font-weight: 200 }'], 309 | ['font-light', '{ font-weight: 300 }'], 310 | ['font-normal', '{ font-weight: 400 }'], 311 | ['font-medium', '{ font-weight: 500 }'], 312 | ['font-semibold', '{ font-weight: 600 }'], 313 | ['font-bold', '{ font-weight: 700 }'], 314 | ['font-extrabold', '{ font-weight: 800 }'], 315 | ['font-black', '{ font-weight: 900 }'], 316 | // Tpyography - font-stretch 317 | ...gen( 318 | ii => [`font-stretch-${ii}`, `font-stretch: ${ii}`], 319 | [ 320 | 'ultra-condensed', 321 | 'extra-condensed', 322 | 'condensed', 323 | 'semi-condensed', 324 | 'normal', 325 | 'semi-expanded', 326 | 'expanded', 327 | 'extra-expanded', 328 | 'ultra-expanded', 329 | ] 330 | ), 331 | // Typography - font-variant-numeric 332 | ['normal-nums', '{ font-variant-numeric: normal }'], 333 | ...gen( 334 | ii => [ii, `font-variant-numeric: ${ii}`], 335 | [ 336 | 'ordinal', 337 | 'slashed-zero', 338 | 'lining-nums', 339 | 'oldstyle-nums', 340 | 'proportional-nums', 341 | 'tabular-nums', 342 | 'diagonal-fractions', 343 | 'stacked-fractions', 344 | ] 345 | ), 346 | // Typography - letter-spacing 347 | ['tracking-tighter', '{ letter-spacing: -0.05em }'], 348 | ['tracking-tight', '{ letter-spacing: -0.025em }'], 349 | ['tracking-normal', '{ letter-spacing: 0 }'], 350 | ['tracking-wide', '{ letter-spacing: 0.025em }'], 351 | ['tracking-wider', '{ letter-spacing: 0.05em }'], 352 | ['tracking-widest', '{ letter-spacing: 0.1em }'], 353 | // Typography - line-clamp 354 | ...gen( 355 | ii => [ 356 | `line-clamp-${ii}`, 357 | `-webkit-line-clamp: ${ii}; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical`, 358 | ], 359 | LINE_CLAMPS 360 | ), 361 | // Typography - line-height 362 | ['leading-none', '{ line-height: 1 }'], 363 | ['leading-tight', '{ line-height: 1.25 }'], 364 | ['leading-snug', '{ line-height: 1.375 }'], 365 | ['leading-normal', '{ line-height: 1.5 }'], 366 | ['leading-relaxed', '{ line-height: 1.625 }'], 367 | ['leading-loose', '{ line-height: 2 }'], 368 | // Typography - list-style 369 | ['list-image-none', '{ list-style-image: none }'], 370 | ['list-inside', '{ list-style-position: inside }'], 371 | ['list-outside', '{ list-style-position: outside }'], 372 | ['list-disc', '{ list-style-type: disc }'], 373 | ['list-decimal', '{ list-style-type: decimal }'], 374 | ['list-none', '{ list-style-type: none }'], 375 | // Typography - text-align 376 | ...gen(ii => [`text-${ii}`, `text-align: ${ii}`], ['left', 'center', 'right', 'justify', 'start', 'end']), 377 | // Typography - text-color 378 | ...genc('text', 'color'), 379 | // Typography - text-decoration-line 380 | ...gen(ii => [ii, `text-decoration-line: ${ii}`], ['underline', 'overline', 'line-through']), 381 | ['no-underline', '{ text-decoration-line: none }'], 382 | // Typography - text-decoration-color 383 | ...genc('decoration', 'text-decoration-color'), 384 | // Typography = text-decoration-style 385 | ...gen(ii => [`decoration-${ii}`, `text-decoration-style: ${ii}`], ['solid', 'double', 'dotted', 'dashed', 'wavy']), 386 | // Typography - text-decoration-thickness 387 | ['decoration-auto', '{ text-decoration-thickness: auto }'], 388 | ['decoration-from-font', '{ text-decoration-thickness: from-font }'], 389 | ...gen(ii => [`decoration-${ii}`, `text-decoration-thickness: ${ii}px`], WIDTHS), 390 | // Typography - text-underline-offset 391 | ['underline-offset-auto', '{ text-underline-offset: auto }'], 392 | ...gen(ii => [`underline-offset-${ii}`, `text-underline-offset: ${ii}px`], WIDTHS), 393 | // Typography - text-transform 394 | ...gen(ii => [`${ii}`, `text-transform: ${ii}`], ['uppercase', 'lowercase', 'capitalize']), 395 | ['normal-case', '{ text-transform: none }'], 396 | // Typography - text-overflow 397 | ['overflow-ellipsis', '{ text-overflow: ellipsis }'], 398 | ['overflow-clip', '{ text-overflow: clip }'], 399 | ['truncate', '{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap }'], 400 | // Typography - text-wrap 401 | ...gen(ii => [`text-${ii}`, `text-wrap: ${ii}`], ['wrap', 'nowrap', 'balance', 'pretty']), 402 | // Typography - text-indent 403 | ['indent', '{ text-indent: $ }'], 404 | // Typography - vertical-align 405 | ...gen( 406 | ii => [`align-${ii}`, `vertical-align: ${ii}`], 407 | ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super'] 408 | ), 409 | // Typography - white-space 410 | ...gen( 411 | ii => [`whitespace-${ii}`, `white-space: ${ii}`], 412 | ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] 413 | ), 414 | // Typography - word-break 415 | ['break-normal', '{ word-break: normal }'], 416 | ['break-all', '{ word-break: break-all }'], 417 | ['break-keep', '{ word-break: keep-all }'], 418 | // Typography - overflow-wrap 419 | ...gen(ii => [`wrap-${ii}`, `overflow-wrap: ${ii}`], ['break-word', 'anywhere', 'normal']), 420 | // Typography - hyphens 421 | ...gen(ii => [`hyphens-${ii}`, `hyphens: ${ii}`], ['none', 'manual', 'auto']), 422 | // Typography - content 423 | ['content-', '{ content: $ }'], 424 | // --------------------------------------------------------------------------- 425 | // Backgrounds - background-attachment 426 | ...gen(ii => [`bg-${ii}`, `background-attachment: ${ii}`], ['fixed', 'local', 'scroll']), 427 | // Backgrounds - background-clip 428 | ...gen(ii => [`bg-clip-${ii}`, `background-clip: ${ii}-box`], ['border', 'padding', 'content']), 429 | ['bg-clip-text', '{ background-clip: text }'], 430 | // Backgrounds - background-color' 431 | ...genc('bg', 'background-color'), 432 | // Backgrounds - background-image 433 | ['bg-', '{ background-image: $ }'], 434 | ['bg-none', '{ background-image: none }'], 435 | // Backgrounds - background-origin 436 | ...gen(ii => [`bg-${ii}`, `background-origin: ${ii}`], ['border-box', 'padding-box', 'content-box']), 437 | // Backgrounds - background-position 438 | ...gen( 439 | ii => [`bg-${ii.replace(' ', '-')}`, `background-position: ${ii}`], 440 | ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top'] 441 | ), 442 | // Backgrounds - background-repeat 443 | ...gen( 444 | ii => [`bg-${ii}`, `background-repeat: ${ii}`], 445 | ['repeat', 'repeat-x', 'repeat-y', 'space', 'round', 'no-repeat'] 446 | ), 447 | // Backgrounds - background-size 448 | ...gen(ii => [`bg-${ii}`, `background-size: ${ii}`], ['auto', 'cover', 'contain']), 449 | // // --------------------------------------------------------------------------- 450 | // Borders - border-radius 451 | ...gen(([name, value]) => [`rounded${name}`, `border-radius: ${value}`], RADII), 452 | ...gen(([name, value]) => [`rounded-tl${name}`, `border-top-left-radius: ${value}`], RADII), 453 | ...gen(([name, value]) => [`rounded-tr${name}`, `border-top-right-radius: ${value}`], RADII), 454 | ...gen(([name, value]) => [`rounded-bl${name}`, `border-bottom-left-radius: ${value}`], RADII), 455 | ...gen(([name, value]) => [`rounded-br${name}`, `border-bottom-right-radius: ${value}`], RADII), 456 | // Borders - border-width 457 | ...gen(ii => [`border-${ii}`, `border-width: ${ii}px`], WIDTHS), 458 | ...gen(ii => [`border-t-${ii}`, `border-top-width: ${ii}px`], WIDTHS), 459 | ...gen(ii => [`border-b-${ii}`, `border-bottom-width: ${ii}px`], WIDTHS), 460 | ...gen(ii => [`border-l-${ii}`, `border-left-width: ${ii}px`], WIDTHS), 461 | ...gen(ii => [`border-r-${ii}`, `border-right-width: ${ii}px`], WIDTHS), 462 | ...gen(ii => [`border-s-${ii}`, `border-inline-start-width: ${ii}px`], WIDTHS), 463 | ...gen(ii => [`border-e-${ii}`, `border-inline-end-width: ${ii}px`], WIDTHS), 464 | ['border', '{ border-width: 1px }'], 465 | ['border-t', '{ border-top-width: 1px }'], 466 | ['border-b', '{ border-bottom-width: 1px }'], 467 | ['border-l', '{ border-left-width: 1px }'], 468 | ['border-r', '{ border-right-width: 1px }'], 469 | ['border-s', '{ border-inline-start-width: 1px }'], 470 | ['border-e', '{ border-inline-end-width: 1px }'], 471 | // Borders - border-color 472 | ...genc('border', 'border-color'), 473 | // Borders - Border-style 474 | ...gen(ii => [`border-${ii}`, `border-style: ${ii}`], ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none']), 475 | // Borders - outline-width 476 | ...gen(ii => [`outline-${ii}`, `outline-width: ${ii}px`], WIDTHS), 477 | // Borders - outline-color 478 | ...genc('outline', 'outline-color'), 479 | // Borders - outline-style 480 | ['outline', '{ outline-style: solid }'], 481 | ...gen(ii => [`outline-${ii}`, `outline-style: ${ii}`], ['none', 'dashed', 'dotted', 'double']), 482 | // Borders - outline-offset 483 | ...gen(ii => [`outline-offset-${ii}`, `outline-offset: ${ii}px`], WIDTHS), 484 | // --------------------------------------------------------------------------- 485 | // Effects - box-shadow 486 | ['shadow', '{ box-shadow: 0 1px rgb(0 0 0 / 0.05) }'], // Customised. 487 | ['shadow-2xs', '{ box-shadow: 0 1px rgb(0 0 0 / 0.05) }'], 488 | ['shadow-xs', '{ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) }'], 489 | ['shadow-sm', '{ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) }'], 490 | ['shadow-md', '{ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) }'], 491 | ['shadow-lg', '{ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) }'], 492 | ['shadow-xl', '{ box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) }'], 493 | ['shadow-2xl', '{ box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) }'], 494 | ['shadow-none', '{ box-shadow: 0 0 rgb(0 0 0 / 0) }'], 495 | // Effects - text-shadow 496 | ['text-shadow-2xs', '{ text-shadow: 0px 1px 0px rgb(0 0 0 / 0.15) }'], 497 | ['text-shadow-xs', '{ text-shadow: 0px 1px 1px rgb(0 0 0 / 0.2) }'], 498 | [ 499 | 'text-shadow-sm', 500 | '{ text-shadow: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) }', 501 | ], 502 | [ 503 | 'text-shadow-md', 504 | '{ text-shadow: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) }', 505 | ], 506 | [ 507 | 'text-shadow-lg', 508 | '{ text-shadow: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) }', 509 | ], 510 | ['text-shadow-none', '{ text-shadow: none }'], 511 | // Effects - opacity 512 | ...gen(ii => [`opacity-${ii}`, `opacity: ${ii / 100}`], OPACITIES), 513 | // Effects - mix-blend-mode 514 | ...gen(ii => [`mix-blend-${ii}`, `mix-blend-mode: ${ii}`], BLEND_MODES), 515 | // Effects - background-blend-mode 516 | ...gen(ii => [`bg-blend-${ii}`, `background-blend-mode: ${ii}`], BLEND_MODES), 517 | // Effects - mask-clip 518 | ...gen(ii => [`mask-clip-${ii}`, `mask-clip: ${ii}-box`], ['border', 'padding', 'content', 'fill', 'stroke', 'view']), 519 | ['mask-no-clip', '{ mask-clip: no-clip }'], 520 | // Effects - mask-composite 521 | ...gen(ii => [`mask-${ii}`, `mask-composite: ${ii}`], ['add', 'subtract', 'intersect', 'exclude']), 522 | // Effects - mask-image 523 | ['mask-image-', '{ mask-image: $ }'], 524 | ['mask-none', '{ mask-image: none }'], 525 | // Effects - mask-mode 526 | ...gen(ii => [`mask-${ii}`, `mask-mode: ${ii}`], ['alpha', 'luminance']), 527 | ['mask-match', '{ mask-mode: match-source }'], 528 | // Effects - mask-origin 529 | ...gen(ii => [`mask-origin-${ii}`, `mask-origin: ${ii}-box`], ['border', 'padding', 'content', 'fill', 'stroke', 'view']), 530 | // Effects - mask-position 531 | ...gen(ii => [`mask-${ii.replace(' ', '-')}`, `mask-position: ${ii}`], ['top left', 'top', 'top right', 'left', 'center', 'right', 'bottom left', 'bottom', 'bottom right']), 532 | ['mask-position-', '{ mask-position: $ }'], 533 | // Effects - mask-repeat 534 | ...gen(ii => [`mask-${ii}`, `mask-repeat: ${ii}`], ['repeat', 'no-repeat', 'repeat-x', 'repeat-y']), 535 | ['mask-repeat-space', '{ mask-repeat: space }'], 536 | ['mask-repeat-round', '{ mask-repeat: round }'], 537 | // Effects - mask-size 538 | ...gen(ii => [`mask-${ii}`, `mask-size: ${ii}`], ['auto', 'cover', 'contain']), 539 | ['mask-size-', '{ mask-size: $ }'], 540 | // Effects - mask-type 541 | ['mask-type-alpha', '{ mask-type: alpha }'], 542 | ['mask-type-luminance', '{ mask-type: luminance }'], 543 | // --------------------------------------------------------------------------- 544 | // Filters - blur 545 | ...backdrop(['blur-xs', '{ filter: blur(4px) }']), 546 | ...backdrop(['blur-sm', '{ filter: blur(8px) }']), 547 | ...backdrop(['blur-md', '{ filter: blur(12px) }']), 548 | ...backdrop(['blur-lg', '{ filter: blur(16px) }']), 549 | ...backdrop(['blur-xl', '{ filter: blur(24px) }']), 550 | ...backdrop(['blur-2xl', '{ filter: blur(40px) }']), 551 | ...backdrop(['blur-3xl', '{ filter: blur(64px) }']), 552 | ...backdrop(['blur-none', '{ filter: none }']), 553 | // Filters - brightness 554 | ...backdrop(gen(ii => [`brightness-${ii}`, `filter: brightness(${ii}%)`], BRIGHTNESS_LEVELS)), 555 | // Filters - contrast 556 | ...backdrop(gen(ii => [`contrast-${ii}`, `filter: contrast(${ii}%)`], CONTRAST_LEVELS)), 557 | // Filters - drop-shadow 558 | ['drop-shadow-xs', '{ filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) }'], 559 | ['drop-shadow-sm', '{ filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.15)) }'], 560 | ['drop-shadow-md', '{ filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.12)) }'], 561 | ['drop-shadow-lg', '{ filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.15)) }'], 562 | ['drop-shadow-xl', '{ filter: drop-shadow(0 9px 7px rgb(0 0 0 / 0.1)) }'], 563 | ['drop-shadow-2xl', '{ filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)) }'], 564 | ['drop-shadow-none', '{ filter: drop-shadow(0 0 rgba(0, 0, 0, 0)) }'], 565 | // Filters - grayscale 566 | ...backdrop(['grayscale', '{ filter: grayscale(100%) }']), 567 | ...backdrop(['grayscale-0', '{ filter: grayscale(0) }']), 568 | // Filters - hue-rotate 569 | ...backdrop(gen(ii => [`hue-rotate-${ii}`, `filter: hue-rotate(${ii}deg)`], HUE_ROTATE_DEGREES)), 570 | ...backdrop(gen(ii => [`-hue-rotate-${ii}`, `filter: hue-rotate(-${ii}deg)`], HUE_ROTATE_DEGREES)), 571 | // Filters - invert 572 | ...backdrop(['invert', '{ filter: invert(100%) }']), 573 | ...backdrop(['invert-0', '{ filter: invert(0) }']), 574 | // Filters - opacity 575 | ...gen(ii => [`backdrop-opacity-${ii}`, `backdrop-filter: opacity(${ii / 100})`], OPACITIES), 576 | // Filters - saturate 577 | ...gen(ii => [`saturate-${ii}`, `filter: saturate(${ii}%)`], SATURATE_LEVELS), 578 | // Filters - sepia 579 | ...backdrop(['invert', '{ filter: sepia(100%) }']), 580 | ...backdrop(['invert-0', '{ filter: sepia(0) }']), 581 | // Filters 582 | ...backdrop(['filter-none', '{ filter: none }']), 583 | // --------------------------------------------------------------------------- 584 | // Tables - border-collapse 585 | ['border-collapse', '{ border-collapse: collapse }'], 586 | ['border-separate', '{ border-collapse: separate }'], 587 | // Tables - border-spacing 588 | ['border-spacing-', '{ border-spacing: $ }'], 589 | // Tables - table-layout 590 | ['table-auto', '{ table-layout: auto }'], 591 | ['table-fixed', '{ table-layout: fixed }'], 592 | // Tables - caption-side 593 | ['caption-top', '{ caption-side: top }'], 594 | ['caption-bottom', '{ caption-side: bottom }'], 595 | // --------------------------------------------------------------------------- 596 | // Transitions & Animations - transition-property 597 | [ 598 | 'transition', 599 | `{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: ${ANIM_TIME} }`, 600 | ], 601 | ['transition-all', `{ transition-property: all; transition-duration: ${ANIM_TIME} }`], 602 | [ 603 | 'transition-colors', 604 | `{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: ${ANIM_TIME} }`, 605 | ], 606 | ['transition-opacity', `{ transition-property: opacity; transition-duration: ${ANIM_TIME} }`], 607 | ['transition-shadow', `{ transition-property: box-shadow; transition-duration: ${ANIM_TIME} }`], 608 | ['transition-transform', `{ transition-property: transform; transition-duration: ${ANIM_TIME} }`], 609 | ['transition-none', '{ transition-property: none }'], 610 | // Transitions & Animations - transition-behavior 611 | ['transition-normal', '{ transition-behavior: normal }'], 612 | ['transition-discrete', '{ transition-behavior: allow-discrete }'], 613 | // Transitions & Animations - transition-duration 614 | ['duration-initial', '{ transition-duration: initial }'], 615 | ...gen(ii => [`duration-${ii}`, `transition-duration: ${ii}ms`], DURATIONS), 616 | // Transitions & Animations - transition-timing-function 617 | ['ease-linear', '{ transition-timing-function: linear }'], 618 | ['ease-in', '{ transition-timing-function: ease-in }'], 619 | ['ease-out', '{ transition-timing-function: ease-out }'], 620 | ['ease-in-out', '{ transition-timing-function: ease-in-out }'], 621 | ['ease-initial', '{ transition-timing-function: initial }'], 622 | // Transitions & Animations - transition-delay 623 | ...gen(ii => [`delay-${ii}`, `transition-delay: ${ii}ms`], DURATIONS), 624 | // Transitions & Animations - animation 625 | ['animate-expand', `{ animation: expand ${ANIM_TIME} ease-in-out }`], 626 | ['animate-toast', `{ animation: toast ${ANIM_TIME} ease-in-out }`], 627 | ['animate-fade', `{ animation: fade ${ANIM_TIME} ease-in-out }`], 628 | ['animate-none', '{ animation: none }'], 629 | // --------------------------------------------------------------------------- 630 | // Transforms - blackface-visibility 631 | ['blackface-visible', '{ backface-visibility: visible }'], 632 | ['blackface-hidden', '{ backface-visibility: hidden }'], 633 | // Transforms - perspective 634 | ['perspective-dramatic', '{ perspective: 100px }'], 635 | ['perspective-near', '{ perspective: 300px }'], 636 | ['perspective-normal', '{ perspective: 500px }'], 637 | ['perspective-midrange', '{ perspective: 800px }'], 638 | ['perspective-distant', '{ perspective: 1200px }'], 639 | ['perspective-none', '{ perspective: none }'], 640 | // Transforms - perspective-origin 641 | ...gen(ii => [`perspective-origin-${ii}`, `perspective-origin: ${ii.replace('-', ' ')}`], ORIGINS), 642 | ['perspective-origin-', '{ perspective-origin: $ }'], 643 | // Transforms - rotate 644 | ...gen(ii => [`rotate-${ii}`, `rotate: ${ii}deg`], ROTATE_DEGREES), 645 | ...gen(ii => [`-rotate-${ii}`, `rotate: -${ii}deg`], ROTATE_DEGREES), 646 | // Transforms - scale 647 | ...gen(ii => [`scale-${ii}`, `transform: scale(${ii / 100})`], SCALES), 648 | ...gen(ii => [`-scale-${ii}`, `transform: scale(-${ii / 100})`], SCALES), 649 | ...gen(ii => [`scale-x-${ii}`, `transform: scaleX(${ii / 100})`], SCALES), 650 | ...gen(ii => [`-scale-x-${ii}`, `transform: scaleX(-${ii / 100})`], SCALES), 651 | ...gen(ii => [`scale-y-${ii}`, `transform: scaleY(${ii / 100})`], SCALES), 652 | ...gen(ii => [`-scale-y-${ii}`, `transform: scaleY(-${ii / 100})`], SCALES), 653 | // Transforms - skew 654 | ...gen(ii => [`skew-${ii}`, `transform: skewX(${ii}deg) skewY(${ii}deg)`], SKEWS), 655 | ...gen(ii => [`-skew-${ii}`, `transform: skewX(-${ii}deg) skewY(-${ii}deg)`], SKEWS), 656 | ...gen(ii => [`skew-x-${ii}`, `transform: skewX(${ii}deg)`], SKEWS), 657 | ...gen(ii => [`-skew-x-${ii}`, `transform: skewX(-${ii}deg)`], SKEWS), 658 | ...gen(ii => [`skew-y-${ii}`, `transform: skewY(${ii}deg)`], SKEWS), 659 | ...gen(ii => [`-skew-y-${ii}`, `transform: skewY(-${ii}deg)`], SKEWS), 660 | // Transforms - transform-origin 661 | ...gen(ii => [`origin-${ii}`, `transform-origin: ${ii.replace('-', ' ')}`], ORIGINS), 662 | // Transforms - transform-style 663 | ['transform-3d', '{ transform-style: preserve-3d }'], 664 | ['transform-flat', '{ transform-style: flat }'], 665 | // Transforms - translate 666 | ['translate-x-', '{ transform: translateX($) }'], 667 | ['translate-y-', '{ transform: translateY($) }'], 668 | // --------------------------------------------------------------------------- 669 | // Interactivity - accent-color 670 | ...genc('accent', 'accent-color'), 671 | // Interactivity - appearance 672 | ['appearance-none', '{ appearance: none }'], 673 | ['appearance-auto', '{ appearance: auto }'], 674 | // Interactivity - caret-color 675 | ...genc('caret', 'caret-color'), 676 | // Interactivity - color-scheme 677 | ...gen( 678 | ii => [`scheme-${ii.replace(' ', '-')}`, `color-scheme: ${ii}`], 679 | ['normal', 'dark', 'light', 'light dark', 'only dark', 'only light'] 680 | ), 681 | // Interactivity - cursor 682 | ...gen( 683 | ii => [`cursor-${ii}`, `cursor: ${ii}`], 684 | ['auto', 'default', 'pointer', 'wait', 'text', 'move', 'not-allowed'] 685 | ), 686 | // Interactivity - field-sizing 687 | ['field-sizing-fixed', '{ field-sizing: fixed }'], 688 | ['field-sizing-content', '{ field-sizing: content }'], 689 | // Interactivity - pointer-events 690 | ['pointer-events-none', '{ pointer-events: none }'], 691 | ['pointer-events-auto', '{ pointer-events: auto }'], 692 | // Interactivity - resize 693 | ['resize-none', '{ resize: none }'], 694 | ['resize-x', '{ resize: horizontal }'], 695 | ['resize-y', '{ resize: vertical }'], 696 | ['resize-both', '{ resize: both }'], 697 | // Interactivity - scroll-behavior 698 | ['scroll-auto', '{ scroll-behavior: auto }'], 699 | ['scroll-smooth', '{ scroll-behavior: smooth }'], 700 | // Interactivity - scroll-margin 701 | ['scroll-m-', '{ scroll-margin: $ }'], 702 | ['scroll-mx-', '{ scroll-margin-inline: $ }'], 703 | ['scroll-my-', '{ scroll-margin-block: $ }'], 704 | ['scroll-ms-', '{ scroll-margin-inline-start: $ }'], 705 | ['scroll-me-', '{ scroll-margin-inline-end: $ }'], 706 | ['scroll-mt-', '{ scroll-margin-top: $ }'], 707 | ['scroll-mr-', '{ scroll-margin-right: $ }'], 708 | ['scroll-mb-', '{ scroll-margin-bottom: $ }'], 709 | ['scroll-ml-', '{ scroll-margin-left: $ }'], 710 | // Interactivity - scroll-padding 711 | ['scroll-p-', '{ scroll-padding: $ }'], 712 | ['scroll-px-', '{ scroll-padding-inline: $ }'], 713 | ['scroll-py-', '{ scroll-padding-block: $ }'], 714 | ['scroll-ps-', '{ scroll-padding-inline-start: $ }'], 715 | ['scroll-pe-', '{ scroll-padding-inline-end: $ }'], 716 | ['scroll-pt-', '{ scroll-padding-top: $ }'], 717 | ['scroll-pr-', '{ scroll-padding-right: $ }'], 718 | ['scroll-pb-', '{ scroll-padding-bottom: $ }'], 719 | ['scroll-pl-', '{ scroll-padding-left: $ }'], 720 | // Interactivity - scroll-snap-align 721 | ...gen(ii => [`snap-${ii}`, `scroll-snap-align: ${ii}`], ['start', 'end', 'center']), 722 | ['snap-align-none', '{ scroll-snap-align: none }'], 723 | // Interactivity - scroll-snap-stop 724 | ['snap-stop-normal', '{ scroll-snap-stop: normal }'], 725 | ['snap-stop-always', '{ scroll-snap-stop: always }'], 726 | // Interactivity - scroll-snap-type 727 | ['snap-none', '{ scroll-snap-type: none }'], 728 | ['snap-x', '{ scroll-snap-type: x mandatory }'], 729 | ['snap-y', '{ scroll-snap-type: y proximity }'], 730 | ['snap-both', '{ scroll-snap-type: both proximity }'], 731 | // Interactivity - touch-action 732 | ...gen( 733 | ii => [`touch-${ii}`, `touch-action: ${ii}`], 734 | ['auto', 'none', 'pan-x', 'pan-left', 'pan-right', 'pan-y', 'pan-up', 'pan-down', 'pinch-zoom', 'manipulation'] 735 | ), 736 | // Interactivity - user-select 737 | ['select-none', '{ user-select: none }'], 738 | ['select-text', '{ user-select: text }'], 739 | ['select-all', '{ user-select: all }'], 740 | ['select-auto', '{ user-select: auto }'], 741 | // Interactivity - will-change 742 | ['will-change-auto', '{ will-change: auto }'], 743 | ['will-change-scroll', '{ will-change: scroll-position }'], 744 | ['will-change-contents', '{ will-change: contents }'], 745 | ['will-change-transform', '{ will-change: transform }'], 746 | // --------------------------------------------------------------------------- 747 | // SVG - fill 748 | ...genc('fill', 'fill'), 749 | // SVG - stroke 750 | ...genc('stroke', 'stroke'), 751 | // SVG - stroke-width 752 | ...gen(ii => [`stroke-${ii}`, `stroke-width: ${ii}`], STROKE_WIDTHS), 753 | // --------------------------------------------------------------------------- 754 | // Accessibility - forced-color-adjust 755 | ['forced-color-adjust-auto', '{ forced-color-adjust: auto }'], 756 | ['forced-color-adjust-none', '{ forced-color-adjust: none }'], 757 | ]) 758 | -------------------------------------------------------------------------------- /REFERENCE.md: -------------------------------------------------------------------------------- 1 | # Reference 2 | 3 | ## Defaults 4 | 5 | ### CSS reset 6 | 7 | ```css 8 | *,*::before,*::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; margin: 0; padding: 0 } 9 | ul,ol { list-style: none } 10 | h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit } 11 | input,button,textarea,select { font: inherit } 12 | body,html { height: 100% } 13 | img,video { max-width: 100%; height: auto } 14 | cite { font-style: normal } 15 | a { text-decoration: none; color: inherit } 16 | button { text-align: unset; background: transparent; color: inherit } 17 | svg { display: block } 18 | ::placeholder { color: currentColor; opacity: 0.8 } 19 | [tw]:not([class]) { display: none } 20 | ``` 21 | 22 | ### Media and container queries 23 | 24 | All container queries are relative to the ancestor with `@container` class. 25 | 26 | ```css 27 | /* sm */ 28 | @media screen and (max-width: 599px) 29 | ``` 30 | 31 | ```css 32 | /* md */ 33 | @media screen and (min-width: 600px) and (max-width: 959px) 34 | ``` 35 | 36 | ```css 37 | /* lg */ 38 | @media screen and (min-width: 960px) 39 | ``` 40 | 41 | ```css 42 | /* landscape */ 43 | @media (orientation: landscape) 44 | ``` 45 | 46 | ```css 47 | /* portrait */ 48 | @media (orientation: portrait) 49 | ``` 50 | 51 | ```css 52 | /* light */ 53 | @media (prefers-color-scheme: light) 54 | ``` 55 | 56 | ```css 57 | /* dark */ 58 | @media (prefers-color-scheme: dark) 59 | ``` 60 | 61 | ```css 62 | /* inverted-colors */ 63 | @media (inverted-colors: inverted) 64 | ``` 65 | 66 | ```css 67 | /* pointer-coarse */ 68 | @media (pointer: coarse) 69 | ``` 70 | 71 | ```css 72 | /* pointer-fine */ 73 | @media (pointer: fine) 74 | ``` 75 | 76 | ```css 77 | /* pointer-none */ 78 | @media (pointer: none) 79 | ``` 80 | 81 | ```css 82 | /* print */ 83 | @media print 84 | ``` 85 | 86 | ```css 87 | /* @3xs */ 88 | @container (width >= 256px) 89 | ``` 90 | 91 | ```css 92 | /* @2xs */ 93 | @container (width >= 288px) 94 | ``` 95 | 96 | ```css 97 | /* @xs */ 98 | @container (width >= 320px) 99 | ``` 100 | 101 | ```css 102 | /* @sm */ 103 | @container (width >= 384px) 104 | ``` 105 | 106 | ```css 107 | /* @md */ 108 | @container (width >= 448px) 109 | ``` 110 | 111 | ```css 112 | /* @lg */ 113 | @container (width >= 512px) 114 | ``` 115 | 116 | ```css 117 | /* @xl */ 118 | @container (width >= 576px) 119 | ``` 120 | 121 | ```css 122 | /* @2xl */ 123 | @container (width >= 672px) 124 | ``` 125 | 126 | ```css 127 | /* @3xl */ 128 | @container (width >= 768px) 129 | ``` 130 | 131 | ```css 132 | /* @4xl */ 133 | @container (width >= 896px) 134 | ``` 135 | 136 | ```css 137 | /* @5xl */ 138 | @container (width >= 1024px) 139 | ``` 140 | 141 | ```css 142 | /* @6xl */ 143 | @container (width >= 1152px) 144 | ``` 145 | 146 | ```css 147 | /* @7xl */ 148 | @container (width >= 1280px) 149 | ``` 150 | 151 | ### Prefixes 152 | 153 | Classes can be prefixed. The order is always `query:state:pseudo:class`. Multiple states are supported. 154 | 155 | States: 156 | 157 | - Multiple states can be combined, e.g., `hover:focus:bg-blue-500`. 158 | - Each state also supports negation with `not-` prefix, e.g., `not-hover:bg-blue-500`. 159 | - Supported states: `active`, `any-link`, `checked`, `default`, `defined`, `disabled`, `empty`, `enabled`, `first-child`, `first-of-type`, `focus`, `focus-visible`, `focus-within`, `fullscreen`, `future`, `host`, `hover`, `in-range`, `indeterminate`, `invalid`, `last-child`, `last-of-type`, `link`, `modal`, `only-child`, `only-of-type`, `open`, `optional`, `out-of-range`, `past`, `picture-in-picture`, `placeholder-shown`, `popover-open`, `read-only`, `read-write`, `required`, `root`, `scope`, `target`, `user-invalid`, `user-valid`, `valid`, `visited`. 160 | 161 | Pseudo elements: 162 | 163 | - Supported pseudo elements: `after`, `backdrop`, `before`, `cue`, `details-content`, `file-selector-button`, `first-letter`, `first-line`, `grammar-error`, `marker`, `placeholder`, `selection`, `spelling-error`, `target-text`. 164 | 165 | ### Keyframes 166 | 167 | ```css 168 | @keyframes expand { 169 | from { opacity: 0; transform: translateY(-8px) } to { opacity: 1 } 170 | } 171 | ``` 172 | 173 | ```css 174 | @keyframes toast { 175 | from { opacity: 0; transform: translateY(48px) } to { opacity: 1 } 176 | } 177 | ``` 178 | 179 | ```css 180 | @keyframes fade { 181 | 0% { opacity: 0 } 100% { opacity: 1 } 182 | } 183 | ``` 184 | 185 | ### Colors 186 | 187 | In addition to the colors below, `black`, `white`, `transparent`, `current` and `inherit` are also supported. 188 | 189 | | | 50|100|200|300|400|500|600|700|800|900|950| 190 | |---|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| 191 | **red**|$\color{#fef2f2}{\Huge\textsf{█}}$|$\color{#ffe2e2}{\Huge\textsf{█}}$|$\color{#ffc9c9}{\Huge\textsf{█}}$|$\color{#ffa2a2}{\Huge\textsf{█}}$|$\color{#ff6467}{\Huge\textsf{█}}$|$\color{#fb2c36}{\Huge\textsf{█}}$|$\color{#e7000b}{\Huge\textsf{█}}$|$\color{#c10007}{\Huge\textsf{█}}$|$\color{#9f0712}{\Huge\textsf{█}}$|$\color{#82181a}{\Huge\textsf{█}}$|$\color{#460809}{\Huge\textsf{█}}$ 192 | **orange**|$\color{#fff7ed}{\Huge\textsf{█}}$|$\color{#ffedd4}{\Huge\textsf{█}}$|$\color{#ffd6a8}{\Huge\textsf{█}}$|$\color{#ffb86a}{\Huge\textsf{█}}$|$\color{#ff8904}{\Huge\textsf{█}}$|$\color{#ff6900}{\Huge\textsf{█}}$|$\color{#f54900}{\Huge\textsf{█}}$|$\color{#ca3500}{\Huge\textsf{█}}$|$\color{#9f2d00}{\Huge\textsf{█}}$|$\color{#7e2a0c}{\Huge\textsf{█}}$|$\color{#441306}{\Huge\textsf{█}}$ 193 | **amber**|$\color{#fffbeb}{\Huge\textsf{█}}$|$\color{#fef3c6}{\Huge\textsf{█}}$|$\color{#fee685}{\Huge\textsf{█}}$|$\color{#ffd230}{\Huge\textsf{█}}$|$\color{#ffb900}{\Huge\textsf{█}}$|$\color{#fe9a00}{\Huge\textsf{█}}$|$\color{#e17100}{\Huge\textsf{█}}$|$\color{#bb4d00}{\Huge\textsf{█}}$|$\color{#973c00}{\Huge\textsf{█}}$|$\color{#7b3306}{\Huge\textsf{█}}$|$\color{#461901}{\Huge\textsf{█}}$ 194 | **yellow**|$\color{#fefce8}{\Huge\textsf{█}}$|$\color{#fef9c2}{\Huge\textsf{█}}$|$\color{#fff085}{\Huge\textsf{█}}$|$\color{#ffdf20}{\Huge\textsf{█}}$|$\color{#fdc700}{\Huge\textsf{█}}$|$\color{#f0b100}{\Huge\textsf{█}}$|$\color{#d08700}{\Huge\textsf{█}}$|$\color{#a65f00}{\Huge\textsf{█}}$|$\color{#894b00}{\Huge\textsf{█}}$|$\color{#733e0a}{\Huge\textsf{█}}$|$\color{#432004}{\Huge\textsf{█}}$ 195 | **lime**|$\color{#f7fee7}{\Huge\textsf{█}}$|$\color{#ecfcca}{\Huge\textsf{█}}$|$\color{#d8f999}{\Huge\textsf{█}}$|$\color{#bbf451}{\Huge\textsf{█}}$|$\color{#9ae600}{\Huge\textsf{█}}$|$\color{#7ccf00}{\Huge\textsf{█}}$|$\color{#5ea500}{\Huge\textsf{█}}$|$\color{#497d00}{\Huge\textsf{█}}$|$\color{#3c6300}{\Huge\textsf{█}}$|$\color{#35530e}{\Huge\textsf{█}}$|$\color{#192e03}{\Huge\textsf{█}}$ 196 | **green**|$\color{#f0fdf4}{\Huge\textsf{█}}$|$\color{#dcfce7}{\Huge\textsf{█}}$|$\color{#b9f8cf}{\Huge\textsf{█}}$|$\color{#7bf1a8}{\Huge\textsf{█}}$|$\color{#05df72}{\Huge\textsf{█}}$|$\color{#00c950}{\Huge\textsf{█}}$|$\color{#00a63e}{\Huge\textsf{█}}$|$\color{#008236}{\Huge\textsf{█}}$|$\color{#016630}{\Huge\textsf{█}}$|$\color{#0d542b}{\Huge\textsf{█}}$|$\color{#032e15}{\Huge\textsf{█}}$ 197 | **emerald**|$\color{#ecfdf5}{\Huge\textsf{█}}$|$\color{#d0fae5}{\Huge\textsf{█}}$|$\color{#a4f4cf}{\Huge\textsf{█}}$|$\color{#5ee9b5}{\Huge\textsf{█}}$|$\color{#00d492}{\Huge\textsf{█}}$|$\color{#00bc7d}{\Huge\textsf{█}}$|$\color{#009966}{\Huge\textsf{█}}$|$\color{#007a55}{\Huge\textsf{█}}$|$\color{#006045}{\Huge\textsf{█}}$|$\color{#004f3b}{\Huge\textsf{█}}$|$\color{#002c22}{\Huge\textsf{█}}$ 198 | **teal**|$\color{#f0fdfa}{\Huge\textsf{█}}$|$\color{#cbfbf1}{\Huge\textsf{█}}$|$\color{#96f7e4}{\Huge\textsf{█}}$|$\color{#46ecd5}{\Huge\textsf{█}}$|$\color{#00d5be}{\Huge\textsf{█}}$|$\color{#00bba7}{\Huge\textsf{█}}$|$\color{#009689}{\Huge\textsf{█}}$|$\color{#00786f}{\Huge\textsf{█}}$|$\color{#005f5a}{\Huge\textsf{█}}$|$\color{#0b4f4a}{\Huge\textsf{█}}$|$\color{#022f2e}{\Huge\textsf{█}}$ 199 | **cyan**|$\color{#ecfeff}{\Huge\textsf{█}}$|$\color{#cefafe}{\Huge\textsf{█}}$|$\color{#a2f4fd}{\Huge\textsf{█}}$|$\color{#53eafd}{\Huge\textsf{█}}$|$\color{#00d3f3}{\Huge\textsf{█}}$|$\color{#00b8db}{\Huge\textsf{█}}$|$\color{#0092b8}{\Huge\textsf{█}}$|$\color{#007595}{\Huge\textsf{█}}$|$\color{#005f78}{\Huge\textsf{█}}$|$\color{#104e64}{\Huge\textsf{█}}$|$\color{#053345}{\Huge\textsf{█}}$ 200 | **sky**|$\color{#f0f9ff}{\Huge\textsf{█}}$|$\color{#dff2fe}{\Huge\textsf{█}}$|$\color{#b8e6fe}{\Huge\textsf{█}}$|$\color{#74d4ff}{\Huge\textsf{█}}$|$\color{#00bcff}{\Huge\textsf{█}}$|$\color{#00a6f4}{\Huge\textsf{█}}$|$\color{#0084d1}{\Huge\textsf{█}}$|$\color{#0069a8}{\Huge\textsf{█}}$|$\color{#00598a}{\Huge\textsf{█}}$|$\color{#024a70}{\Huge\textsf{█}}$|$\color{#052f4a}{\Huge\textsf{█}}$ 201 | **blue**|$\color{#eff6ff}{\Huge\textsf{█}}$|$\color{#dbeafe}{\Huge\textsf{█}}$|$\color{#bedbff}{\Huge\textsf{█}}$|$\color{#8ec5ff}{\Huge\textsf{█}}$|$\color{#51a2ff}{\Huge\textsf{█}}$|$\color{#2b7fff}{\Huge\textsf{█}}$|$\color{#155dfc}{\Huge\textsf{█}}$|$\color{#1447e6}{\Huge\textsf{█}}$|$\color{#193cb8}{\Huge\textsf{█}}$|$\color{#1c398e}{\Huge\textsf{█}}$|$\color{#162456}{\Huge\textsf{█}}$ 202 | **indigo**|$\color{#eef2ff}{\Huge\textsf{█}}$|$\color{#e0e7ff}{\Huge\textsf{█}}$|$\color{#c6d2ff}{\Huge\textsf{█}}$|$\color{#a3b3ff}{\Huge\textsf{█}}$|$\color{#7c86ff}{\Huge\textsf{█}}$|$\color{#615fff}{\Huge\textsf{█}}$|$\color{#4f39f6}{\Huge\textsf{█}}$|$\color{#432dd7}{\Huge\textsf{█}}$|$\color{#372aac}{\Huge\textsf{█}}$|$\color{#312c85}{\Huge\textsf{█}}$|$\color{#1e1a4d}{\Huge\textsf{█}}$ 203 | **violet**|$\color{#f5f3ff}{\Huge\textsf{█}}$|$\color{#ede9fe}{\Huge\textsf{█}}$|$\color{#ddd6ff}{\Huge\textsf{█}}$|$\color{#c4b4ff}{\Huge\textsf{█}}$|$\color{#a684ff}{\Huge\textsf{█}}$|$\color{#8e51ff}{\Huge\textsf{█}}$|$\color{#7f22fe}{\Huge\textsf{█}}$|$\color{#7008e7}{\Huge\textsf{█}}$|$\color{#5d0ec0}{\Huge\textsf{█}}$|$\color{#4d179a}{\Huge\textsf{█}}$|$\color{#2f0d68}{\Huge\textsf{█}}$ 204 | **purple**|$\color{#faf5ff}{\Huge\textsf{█}}$|$\color{#f3e8ff}{\Huge\textsf{█}}$|$\color{#e9d4ff}{\Huge\textsf{█}}$|$\color{#dab2ff}{\Huge\textsf{█}}$|$\color{#c27aff}{\Huge\textsf{█}}$|$\color{#ad46ff}{\Huge\textsf{█}}$|$\color{#9810fa}{\Huge\textsf{█}}$|$\color{#8200db}{\Huge\textsf{█}}$|$\color{#6e11b0}{\Huge\textsf{█}}$|$\color{#59168b}{\Huge\textsf{█}}$|$\color{#3c0366}{\Huge\textsf{█}}$ 205 | **fuchsia**|$\color{#fdf4ff}{\Huge\textsf{█}}$|$\color{#fae8ff}{\Huge\textsf{█}}$|$\color{#f6cfff}{\Huge\textsf{█}}$|$\color{#f4a8ff}{\Huge\textsf{█}}$|$\color{#ed6aff}{\Huge\textsf{█}}$|$\color{#e12afb}{\Huge\textsf{█}}$|$\color{#c800de}{\Huge\textsf{█}}$|$\color{#a800b7}{\Huge\textsf{█}}$|$\color{#8a0194}{\Huge\textsf{█}}$|$\color{#721378}{\Huge\textsf{█}}$|$\color{#4b004f}{\Huge\textsf{█}}$ 206 | **pink**|$\color{#fdf2f8}{\Huge\textsf{█}}$|$\color{#fce7f3}{\Huge\textsf{█}}$|$\color{#fccee8}{\Huge\textsf{█}}$|$\color{#fda5d5}{\Huge\textsf{█}}$|$\color{#fb64b6}{\Huge\textsf{█}}$|$\color{#f6339a}{\Huge\textsf{█}}$|$\color{#e60076}{\Huge\textsf{█}}$|$\color{#c6005c}{\Huge\textsf{█}}$|$\color{#a3004c}{\Huge\textsf{█}}$|$\color{#861043}{\Huge\textsf{█}}$|$\color{#510424}{\Huge\textsf{█}}$ 207 | **rose**|$\color{#fff1f2}{\Huge\textsf{█}}$|$\color{#ffe4e6}{\Huge\textsf{█}}$|$\color{#ffccd3}{\Huge\textsf{█}}$|$\color{#ffa1ad}{\Huge\textsf{█}}$|$\color{#ff637e}{\Huge\textsf{█}}$|$\color{#ff2056}{\Huge\textsf{█}}$|$\color{#ec003f}{\Huge\textsf{█}}$|$\color{#c70036}{\Huge\textsf{█}}$|$\color{#a50036}{\Huge\textsf{█}}$|$\color{#8b0836}{\Huge\textsf{█}}$|$\color{#4d0218}{\Huge\textsf{█}}$ 208 | **slate**|$\color{#f8fafc}{\Huge\textsf{█}}$|$\color{#f1f5f9}{\Huge\textsf{█}}$|$\color{#e2e8f0}{\Huge\textsf{█}}$|$\color{#cad5e2}{\Huge\textsf{█}}$|$\color{#90a1b9}{\Huge\textsf{█}}$|$\color{#62748e}{\Huge\textsf{█}}$|$\color{#45556c}{\Huge\textsf{█}}$|$\color{#314158}{\Huge\textsf{█}}$|$\color{#1d293d}{\Huge\textsf{█}}$|$\color{#0f172b}{\Huge\textsf{█}}$|$\color{#020618}{\Huge\textsf{█}}$ 209 | **gray**|$\color{#f9fafb}{\Huge\textsf{█}}$|$\color{#f3f4f6}{\Huge\textsf{█}}$|$\color{#e5e7eb}{\Huge\textsf{█}}$|$\color{#d1d5dc}{\Huge\textsf{█}}$|$\color{#99a1af}{\Huge\textsf{█}}$|$\color{#6a7282}{\Huge\textsf{█}}$|$\color{#4a5565}{\Huge\textsf{█}}$|$\color{#364153}{\Huge\textsf{█}}$|$\color{#1e2939}{\Huge\textsf{█}}$|$\color{#101828}{\Huge\textsf{█}}$|$\color{#030712}{\Huge\textsf{█}}$ 210 | **zinc**|$\color{#fafafa}{\Huge\textsf{█}}$|$\color{#f4f4f5}{\Huge\textsf{█}}$|$\color{#e4e4e7}{\Huge\textsf{█}}$|$\color{#d4d4d8}{\Huge\textsf{█}}$|$\color{#9f9fa9}{\Huge\textsf{█}}$|$\color{#71717b}{\Huge\textsf{█}}$|$\color{#52525c}{\Huge\textsf{█}}$|$\color{#3f3f47}{\Huge\textsf{█}}$|$\color{#27272a}{\Huge\textsf{█}}$|$\color{#18181b}{\Huge\textsf{█}}$|$\color{#09090b}{\Huge\textsf{█}}$ 211 | **neutral**|$\color{#fafafa}{\Huge\textsf{█}}$|$\color{#f5f5f5}{\Huge\textsf{█}}$|$\color{#e5e5e5}{\Huge\textsf{█}}$|$\color{#d4d4d4}{\Huge\textsf{█}}$|$\color{#a1a1a1}{\Huge\textsf{█}}$|$\color{#737373}{\Huge\textsf{█}}$|$\color{#525252}{\Huge\textsf{█}}$|$\color{#404040}{\Huge\textsf{█}}$|$\color{#262626}{\Huge\textsf{█}}$|$\color{#171717}{\Huge\textsf{█}}$|$\color{#0a0a0a}{\Huge\textsf{█}}$ 212 | **stone**|$\color{#fafaf9}{\Huge\textsf{█}}$|$\color{#f5f5f4}{\Huge\textsf{█}}$|$\color{#e7e5e4}{\Huge\textsf{█}}$|$\color{#d6d3d1}{\Huge\textsf{█}}$|$\color{#a6a09b}{\Huge\textsf{█}}$|$\color{#79716b}{\Huge\textsf{█}}$|$\color{#57534d}{\Huge\textsf{█}}$|$\color{#44403b}{\Huge\textsf{█}}$|$\color{#292524}{\Huge\textsf{█}}$|$\color{#1c1917}{\Huge\textsf{█}}$|$\color{#0c0a09}{\Huge\textsf{█}}$ 213 | 214 | ### Dynamic properties 215 | 216 | Dynamic properties can be set by adding a suffix according to the table below. With a few exceptions, this mainly applies to sizing. Note that for simplicity the engine treats all of them equally, which means not all combinations will result in a valid CSS. A good example is background image: `bg-[url(...)]` makes sense, whereas `bg-1/3` does not. 217 | 218 | |Value |Output |Example (width) | 219 | |---------------------------|------------------------------------|-----------------------| 220 | |`class-` |`property: calc( * 4px)` |`w-4` | 221 | |`-class-` |`property: calc(- * 4px)` |`-w-4` | 222 | |`class-` |`property: calc( * 100%)` |`w-1/4` | 223 | |`-class-` |`property: calc(- * 100%)`|`-w-1/4` | 224 | |`class-[]` |`property: ` |`w-[calc(50%_-_10px)]` | 225 | |`class-(--custom-property)`|`property: var(--custom-property)` |`w-(--button-height)` | 226 | |`class-auto`|`property: auto`|`w-auto`| 227 | |`class-px`|`property: 1px`|`w-px`| 228 | |`class-full`|`property: 100%`|`w-full`| 229 | |`class-screen`|`property: 100vw`|`w-screen`| 230 | |`class-dvw`|`property: 100vw`|`w-dvw`| 231 | |`class-dvh`|`property: 100vh`|`w-dvh`| 232 | |`class-lvw`|`property: 100lvw`|`w-lvw`| 233 | |`class-lvh`|`property: 100lvh`|`w-lvh`| 234 | |`class-svw`|`property: 100svw`|`w-svw`| 235 | |`class-svh`|`property: 100svh`|`w-svh`| 236 | |`class-min`|`property: min-content`|`w-min`| 237 | |`class-max`|`property: max-content`|`w-max`| 238 | |`class-fit`|`property: fit-content`|`w-fit`| 239 | 240 | ## Layout 241 | 242 | ### aspect-ratio 243 | 244 | ```css 245 | .aspect-auto { aspect-ratio: auto } 246 | ``` 247 | 248 | ```css 249 | .aspect-square { aspect-ratio: 1 / 1 } 250 | ``` 251 | 252 | ```css 253 | .aspect-video { aspect-ratio: 16 / 9 } 254 | ``` 255 | 256 | ```css 257 | .aspect-SUFFIX { aspect-ratio: ... } 258 | ``` 259 | 260 | ### columns 261 | 262 | ```css 263 | .columns-1 { columns: 1 } 264 | ``` 265 | 266 | ```css 267 | .columns-2 { columns: 2 } 268 | ``` 269 | 270 | ```css 271 | .columns-3 { columns: 3 } 272 | ``` 273 | 274 | ```css 275 | .columns-4 { columns: 4 } 276 | ``` 277 | 278 | ```css 279 | .columns-5 { columns: 5 } 280 | ``` 281 | 282 | ```css 283 | .columns-6 { columns: 6 } 284 | ``` 285 | 286 | ```css 287 | .columns-7 { columns: 7 } 288 | ``` 289 | 290 | ```css 291 | .columns-8 { columns: 8 } 292 | ``` 293 | 294 | ```css 295 | .columns-9 { columns: 9 } 296 | ``` 297 | 298 | ```css 299 | .columns-10 { columns: 10 } 300 | ``` 301 | 302 | ```css 303 | .columns-11 { columns: 11 } 304 | ``` 305 | 306 | ```css 307 | .columns-12 { columns: 12 } 308 | ``` 309 | 310 | ```css 311 | .columns-auto { columns: auto } 312 | ``` 313 | 314 | ```css 315 | .order-1 { columns: 1 } 316 | ``` 317 | 318 | ```css 319 | .order-2 { columns: 2 } 320 | ``` 321 | 322 | ```css 323 | .order-3 { columns: 3 } 324 | ``` 325 | 326 | ```css 327 | .order-4 { columns: 4 } 328 | ``` 329 | 330 | ```css 331 | .order-5 { columns: 5 } 332 | ``` 333 | 334 | ```css 335 | .order-6 { columns: 6 } 336 | ``` 337 | 338 | ```css 339 | .order-7 { columns: 7 } 340 | ``` 341 | 342 | ```css 343 | .order-8 { columns: 8 } 344 | ``` 345 | 346 | ```css 347 | .order-9 { columns: 9 } 348 | ``` 349 | 350 | ```css 351 | .order-10 { columns: 10 } 352 | ``` 353 | 354 | ```css 355 | .order-11 { columns: 11 } 356 | ``` 357 | 358 | ```css 359 | .order-12 { columns: 12 } 360 | ``` 361 | 362 | ### break-after 363 | 364 | ```css 365 | .break-after-auto { break-after: auto } 366 | ``` 367 | 368 | ```css 369 | .break-after-avoid { break-after: avoid } 370 | ``` 371 | 372 | ```css 373 | .break-after-avoid-page { break-after: avoid-page } 374 | ``` 375 | 376 | ```css 377 | .break-after-page { break-after: page } 378 | ``` 379 | 380 | ```css 381 | .break-after-left { break-after: left } 382 | ``` 383 | 384 | ```css 385 | .break-after-right { break-after: right } 386 | ``` 387 | 388 | ```css 389 | .break-after-column { break-after: column } 390 | ``` 391 | 392 | ```css 393 | .break-before-auto { break-after: auto } 394 | ``` 395 | 396 | ```css 397 | .break-before-avoid { break-after: avoid } 398 | ``` 399 | 400 | ```css 401 | .break-before-avoid-page { break-after: avoid-page } 402 | ``` 403 | 404 | ```css 405 | .break-before-page { break-after: page } 406 | ``` 407 | 408 | ```css 409 | .break-before-left { break-after: left } 410 | ``` 411 | 412 | ```css 413 | .break-before-right { break-after: right } 414 | ``` 415 | 416 | ```css 417 | .break-before-column { break-after: column } 418 | ``` 419 | 420 | ### break-before 421 | 422 | ```css 423 | .break-after-auto { break-after: auto } 424 | ``` 425 | 426 | ```css 427 | .break-after-avoid { break-after: avoid } 428 | ``` 429 | 430 | ```css 431 | .break-after-avoid-page { break-after: avoid-page } 432 | ``` 433 | 434 | ```css 435 | .break-after-page { break-after: page } 436 | ``` 437 | 438 | ```css 439 | .break-after-left { break-after: left } 440 | ``` 441 | 442 | ```css 443 | .break-after-right { break-after: right } 444 | ``` 445 | 446 | ```css 447 | .break-after-column { break-after: column } 448 | ``` 449 | 450 | ```css 451 | .break-before-auto { break-after: auto } 452 | ``` 453 | 454 | ```css 455 | .break-before-avoid { break-after: avoid } 456 | ``` 457 | 458 | ```css 459 | .break-before-avoid-page { break-after: avoid-page } 460 | ``` 461 | 462 | ```css 463 | .break-before-page { break-after: page } 464 | ``` 465 | 466 | ```css 467 | .break-before-left { break-after: left } 468 | ``` 469 | 470 | ```css 471 | .break-before-right { break-after: right } 472 | ``` 473 | 474 | ```css 475 | .break-before-column { break-after: column } 476 | ``` 477 | 478 | ### break-inside 479 | 480 | ```css 481 | .break-after-auto { break-after: auto } 482 | ``` 483 | 484 | ```css 485 | .break-after-avoid { break-after: avoid } 486 | ``` 487 | 488 | ```css 489 | .break-after-avoid-page { break-after: avoid-page } 490 | ``` 491 | 492 | ```css 493 | .break-after-page { break-after: page } 494 | ``` 495 | 496 | ```css 497 | .break-after-left { break-after: left } 498 | ``` 499 | 500 | ```css 501 | .break-after-right { break-after: right } 502 | ``` 503 | 504 | ```css 505 | .break-after-column { break-after: column } 506 | ``` 507 | 508 | ```css 509 | .break-before-auto { break-after: auto } 510 | ``` 511 | 512 | ```css 513 | .break-before-avoid { break-after: avoid } 514 | ``` 515 | 516 | ```css 517 | .break-before-avoid-page { break-after: avoid-page } 518 | ``` 519 | 520 | ```css 521 | .break-before-page { break-after: page } 522 | ``` 523 | 524 | ```css 525 | .break-before-left { break-after: left } 526 | ``` 527 | 528 | ```css 529 | .break-before-right { break-after: right } 530 | ``` 531 | 532 | ```css 533 | .break-before-column { break-after: column } 534 | ``` 535 | 536 | ### box-decoration-break 537 | 538 | ```css 539 | .box-decoration-clone { box-decoration-break: clone } 540 | ``` 541 | 542 | ```css 543 | .box-decoration-slice { box-decoration-break: slice } 544 | ``` 545 | 546 | ### box-sizing 547 | 548 | ```css 549 | .box-border { box-sizing: border-box } 550 | ``` 551 | 552 | ```css 553 | .box-content { box-sizing: content-box } 554 | ``` 555 | 556 | ### display 557 | 558 | ```css 559 | .inline { display: inline } 560 | ``` 561 | 562 | ```css 563 | .block { display: block } 564 | ``` 565 | 566 | ```css 567 | .inline-block { display: inline-block } 568 | ``` 569 | 570 | ```css 571 | .flow-root { display: flow-root } 572 | ``` 573 | 574 | ```css 575 | .flex { display: flex } 576 | ``` 577 | 578 | ```css 579 | .inline-flex { display: inline-flex } 580 | ``` 581 | 582 | ```css 583 | .grid { display: grid } 584 | ``` 585 | 586 | ```css 587 | .inline-grid { display: inline-grid } 588 | ``` 589 | 590 | ```css 591 | .contents { display: contents } 592 | ``` 593 | 594 | ```css 595 | .table { display: table } 596 | ``` 597 | 598 | ```css 599 | .inline-table { display: inline-table } 600 | ``` 601 | 602 | ```css 603 | .list-item { display: list-item } 604 | ``` 605 | 606 | ```css 607 | .hidden { display: none } 608 | ``` 609 | 610 | ```css 611 | .sr-only { 612 | clip: rect(0, 0, 0, 0); 613 | position: absolute; 614 | width: 1px; 615 | height: 1px; 616 | padding: 0; 617 | margin: -1px; 618 | overflow: hidden; 619 | white-space: nowrap; 620 | border-width: 0 621 | } 622 | ``` 623 | 624 | ```css 625 | .not-sr-only { 626 | clip: auto; 627 | position: static; 628 | width: auto; 629 | height: auto; 630 | padding: 0; 631 | margin: 0; 632 | overflow: visible; 633 | white-space: normal 634 | } 635 | ``` 636 | 637 | ### float 638 | 639 | ```css 640 | .float-start { float: inline-start } 641 | ``` 642 | 643 | ```css 644 | .float-end { float: inline-end } 645 | ``` 646 | 647 | ```css 648 | .float-left { float: left } 649 | ``` 650 | 651 | ```css 652 | .float-right { float: right } 653 | ``` 654 | 655 | ```css 656 | .float-none { float: none } 657 | ``` 658 | 659 | ### clear 660 | 661 | ```css 662 | .clear-start { clear: inline-start } 663 | ``` 664 | 665 | ```css 666 | .clear-end { clear: inline-end } 667 | ``` 668 | 669 | ```css 670 | .clear-left { clear: left } 671 | ``` 672 | 673 | ```css 674 | .clear-right { clear: right } 675 | ``` 676 | 677 | ```css 678 | .clear-both { clear: both } 679 | ``` 680 | 681 | ```css 682 | .clear-none { clear: none } 683 | ``` 684 | 685 | ### isolation 686 | 687 | ```css 688 | .isolate { isolation: isolate } 689 | ``` 690 | 691 | ```css 692 | .isolation-auto { isolation: auto } 693 | ``` 694 | 695 | ### object-fit 696 | 697 | ```css 698 | .object-contain { object-fit: contain } 699 | ``` 700 | 701 | ```css 702 | .object-cover { object-fit: cover } 703 | ``` 704 | 705 | ```css 706 | .object-fill { object-fit: fill } 707 | ``` 708 | 709 | ```css 710 | .object-none { object-fit: none } 711 | ``` 712 | 713 | ```css 714 | .object-scale-down { object-fit: scale-down } 715 | ``` 716 | 717 | ### object-position 718 | 719 | ```css 720 | .object-bottom { object-position: bottom } 721 | ``` 722 | 723 | ```css 724 | .object-center { object-position: center } 725 | ``` 726 | 727 | ```css 728 | .object-left { object-position: left } 729 | ``` 730 | 731 | ```css 732 | .object-left-bottom { object-position: left bottom } 733 | ``` 734 | 735 | ```css 736 | .object-left-top { object-position: left top } 737 | ``` 738 | 739 | ```css 740 | .object-right { object-position: right } 741 | ``` 742 | 743 | ```css 744 | .object-right-bottom { object-position: right bottom } 745 | ``` 746 | 747 | ```css 748 | .object-right-top { object-position: right top } 749 | ``` 750 | 751 | ```css 752 | .object-top { object-position: top } 753 | ``` 754 | 755 | ### overflow 756 | 757 | ```css 758 | .overflow-auto { overflow: auto } 759 | ``` 760 | 761 | ```css 762 | .overflow-hidden { overflow: hidden } 763 | ``` 764 | 765 | ```css 766 | .overflow-visible { overflow: visible } 767 | ``` 768 | 769 | ```css 770 | .overflow-scroll { overflow: scroll } 771 | ``` 772 | 773 | ```css 774 | .overflow-x-auto { overflow-x: auto } 775 | ``` 776 | 777 | ```css 778 | .overflow-x-hidden { overflow-x: hidden } 779 | ``` 780 | 781 | ```css 782 | .overflow-x-clip { overflow-x: clip } 783 | ``` 784 | 785 | ```css 786 | .overflow-x-visible { overflow-x: visible } 787 | ``` 788 | 789 | ```css 790 | .overflow-x-scroll { overflow-x: scroll } 791 | ``` 792 | 793 | ```css 794 | .overflow-y-auto { overflow-y: auto } 795 | ``` 796 | 797 | ```css 798 | .overflow-y-hidden { overflow-y: hidden } 799 | ``` 800 | 801 | ```css 802 | .overflow-y-clip { overflow-y: clip } 803 | ``` 804 | 805 | ```css 806 | .overflow-y-visible { overflow-y: visible } 807 | ``` 808 | 809 | ```css 810 | .overflow-y-scroll { overflow-y: scroll } 811 | ``` 812 | 813 | ### overscroll-behavior 814 | 815 | ```css 816 | .overscroll-auto { overscroll-behavior: auto } 817 | ``` 818 | 819 | ```css 820 | .overscroll-contain { overscroll-behavior: contain } 821 | ``` 822 | 823 | ```css 824 | .overscroll-none { overscroll-behavior: none } 825 | ``` 826 | 827 | ```css 828 | .overscroll-x-auto { overscroll-behavior-x: auto } 829 | ``` 830 | 831 | ```css 832 | .overscroll-x-contain { overscroll-behavior-x: contain } 833 | ``` 834 | 835 | ```css 836 | .overscroll-x-none { overscroll-behavior-x: none } 837 | ``` 838 | 839 | ```css 840 | .overscroll-y-auto { overscroll-behavior-y: auto } 841 | ``` 842 | 843 | ```css 844 | .overscroll-y-contain { overscroll-behavior-y: contain } 845 | ``` 846 | 847 | ```css 848 | .overscroll-y-none { overscroll-behavior-y: none } 849 | ``` 850 | 851 | ### scrollbar-gutter 852 | 853 | ```css 854 | .scrollbar-auto { scrollbar-gutter: auto } 855 | ``` 856 | 857 | ```css 858 | .scrollbar-stable { scrollbar-gutter: stable } 859 | ``` 860 | 861 | ```css 862 | .scrollbar-both { scrollbar-gutter: stable both-edges } 863 | ``` 864 | 865 | ### position 866 | 867 | ```css 868 | .static { position: static } 869 | ``` 870 | 871 | ```css 872 | .fixed { position: fixed } 873 | ``` 874 | 875 | ```css 876 | .absolute { position: absolute } 877 | ``` 878 | 879 | ```css 880 | .relative { position: relative } 881 | ``` 882 | 883 | ```css 884 | .sticky { position: sticky } 885 | ``` 886 | 887 | ### top / right / bottom / left 888 | 889 | ```css 890 | .inset-SUFFIX { inset: ... } 891 | ``` 892 | 893 | ```css 894 | .inset-x-SUFFIX { inset-inline: ... } 895 | ``` 896 | 897 | ```css 898 | .inset-y-SUFFIX { inset-block: ... } 899 | ``` 900 | 901 | ```css 902 | .start-SUFFIX { inset-inline-start: ... } 903 | ``` 904 | 905 | ```css 906 | .end-SUFFIX { inset-inline-end: ... } 907 | ``` 908 | 909 | ```css 910 | .top-SUFFIX { top: ... } 911 | ``` 912 | 913 | ```css 914 | .right-SUFFIX { right: ... } 915 | ``` 916 | 917 | ```css 918 | .bottom-SUFFIX { bottom: ... } 919 | ``` 920 | 921 | ```css 922 | .left-SUFFIX { left: ... } 923 | ``` 924 | 925 | ### visibility 926 | 927 | ```css 928 | .visible { visibility: visible } 929 | ``` 930 | 931 | ```css 932 | .invisible { visibility: hidden } 933 | ``` 934 | 935 | ```css 936 | .collapse { visibility: collapse } 937 | ``` 938 | 939 | ### z-index 940 | 941 | ```css 942 | .z-0 { z-index: 0 } 943 | ``` 944 | 945 | ```css 946 | .z-10 { z-index: 10 } 947 | ``` 948 | 949 | ```css 950 | .z-20 { z-index: 20 } 951 | ``` 952 | 953 | ```css 954 | .z-30 { z-index: 30 } 955 | ``` 956 | 957 | ```css 958 | .z-40 { z-index: 40 } 959 | ``` 960 | 961 | ```css 962 | .z-50 { z-index: 50 } 963 | ``` 964 | 965 | ```css 966 | .z-auto { z-index: auto } 967 | ``` 968 | 969 | ## Flexbox & Grid 970 | 971 | ### flex-basis 972 | 973 | ```css 974 | .basis-SUFFIX { flex-basis: ... } 975 | ``` 976 | 977 | ### flex-direction 978 | 979 | ```css 980 | .flex-row { flex-direction: row } 981 | ``` 982 | 983 | ```css 984 | .flex-row-reverse { flex-direction: row-reverse } 985 | ``` 986 | 987 | ```css 988 | .flex-col { flex-direction: column } 989 | ``` 990 | 991 | ```css 992 | .flex-col-reverse { flex-direction: column-reverse } 993 | ``` 994 | 995 | ### flex-wrap 996 | 997 | ```css 998 | .flex-nowrap { flex-wrap: nowrap } 999 | ``` 1000 | 1001 | ```css 1002 | .flex-wrap { flex-wrap: wrap } 1003 | ``` 1004 | 1005 | ```css 1006 | .flex-wrap-reverse { flex-wrap: wrap-reverse } 1007 | ``` 1008 | 1009 | ### flex 1010 | 1011 | ```css 1012 | .flex-SUFFIX { flex: ... } 1013 | ``` 1014 | 1015 | ```css 1016 | .flex-auto { flex: 1 1 auto } 1017 | ``` 1018 | 1019 | ```css 1020 | .flex-initial { flex: 0 1 auto } 1021 | ``` 1022 | 1023 | ```css 1024 | .flex-none { flex: none } 1025 | ``` 1026 | 1027 | ### flex-grow 1028 | 1029 | ```css 1030 | .grow { flex-grow: 1 } 1031 | ``` 1032 | 1033 | ```css 1034 | .grow-0 { flex-grow: 0 } 1035 | ``` 1036 | 1037 | ### flex-shrink 1038 | 1039 | ```css 1040 | .shrink { flex-shrink: 1 } 1041 | ``` 1042 | 1043 | ```css 1044 | .shrink-0 { flex-shrink: 0 } 1045 | ``` 1046 | 1047 | ### order 1048 | 1049 | ```css 1050 | .order-first { order: -9999 } 1051 | ``` 1052 | 1053 | ```css 1054 | .order-last { order: 9999 } 1055 | ``` 1056 | 1057 | ```css 1058 | .order-none { order: 0 } 1059 | ``` 1060 | 1061 | ### grid-template-columns 1062 | 1063 | ```css 1064 | .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) } 1065 | ``` 1066 | 1067 | ```css 1068 | .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } 1069 | ``` 1070 | 1071 | ```css 1072 | .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } 1073 | ``` 1074 | 1075 | ```css 1076 | .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } 1077 | ``` 1078 | 1079 | ```css 1080 | .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) } 1081 | ``` 1082 | 1083 | ```css 1084 | .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) } 1085 | ``` 1086 | 1087 | ```css 1088 | .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) } 1089 | ``` 1090 | 1091 | ```css 1092 | .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) } 1093 | ``` 1094 | 1095 | ```css 1096 | .grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) } 1097 | ``` 1098 | 1099 | ```css 1100 | .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) } 1101 | ``` 1102 | 1103 | ```css 1104 | .grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) } 1105 | ``` 1106 | 1107 | ```css 1108 | .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) } 1109 | ``` 1110 | 1111 | ```css 1112 | .grid-cols-none { grid-template-columns: none } 1113 | ``` 1114 | 1115 | ```css 1116 | .grid-cols-subgrid { grid-template-columns: subgrid } 1117 | ``` 1118 | 1119 | ### grid-column 1120 | 1121 | ```css 1122 | .col-auto { grid-column: auto } 1123 | ``` 1124 | 1125 | ```css 1126 | .col-span-1 { grid-column: span 1 / span 1 } 1127 | ``` 1128 | 1129 | ```css 1130 | .col-span-2 { grid-column: span 2 / span 2 } 1131 | ``` 1132 | 1133 | ```css 1134 | .col-span-3 { grid-column: span 3 / span 3 } 1135 | ``` 1136 | 1137 | ```css 1138 | .col-span-4 { grid-column: span 4 / span 4 } 1139 | ``` 1140 | 1141 | ```css 1142 | .col-span-5 { grid-column: span 5 / span 5 } 1143 | ``` 1144 | 1145 | ```css 1146 | .col-span-6 { grid-column: span 6 / span 6 } 1147 | ``` 1148 | 1149 | ```css 1150 | .col-span-7 { grid-column: span 7 / span 7 } 1151 | ``` 1152 | 1153 | ```css 1154 | .col-span-8 { grid-column: span 8 / span 8 } 1155 | ``` 1156 | 1157 | ```css 1158 | .col-span-9 { grid-column: span 9 / span 9 } 1159 | ``` 1160 | 1161 | ```css 1162 | .col-span-10 { grid-column: span 10 / span 10 } 1163 | ``` 1164 | 1165 | ```css 1166 | .col-span-11 { grid-column: span 11 / span 11 } 1167 | ``` 1168 | 1169 | ```css 1170 | .col-span-12 { grid-column: span 12 / span 12 } 1171 | ``` 1172 | 1173 | ```css 1174 | .col-span-full { grid-column: 1 / -1 } 1175 | ``` 1176 | 1177 | ```css 1178 | .col-start-1 { grid-column-start: 1 } 1179 | ``` 1180 | 1181 | ```css 1182 | .col-start-2 { grid-column-start: 2 } 1183 | ``` 1184 | 1185 | ```css 1186 | .col-start-3 { grid-column-start: 3 } 1187 | ``` 1188 | 1189 | ```css 1190 | .col-start-4 { grid-column-start: 4 } 1191 | ``` 1192 | 1193 | ```css 1194 | .col-start-5 { grid-column-start: 5 } 1195 | ``` 1196 | 1197 | ```css 1198 | .col-start-6 { grid-column-start: 6 } 1199 | ``` 1200 | 1201 | ```css 1202 | .col-start-7 { grid-column-start: 7 } 1203 | ``` 1204 | 1205 | ```css 1206 | .col-start-8 { grid-column-start: 8 } 1207 | ``` 1208 | 1209 | ```css 1210 | .col-start-9 { grid-column-start: 9 } 1211 | ``` 1212 | 1213 | ```css 1214 | .col-start-10 { grid-column-start: 10 } 1215 | ``` 1216 | 1217 | ```css 1218 | .col-start-11 { grid-column-start: 11 } 1219 | ``` 1220 | 1221 | ```css 1222 | .col-start-12 { grid-column-start: 12 } 1223 | ``` 1224 | 1225 | ```css 1226 | .col-start-13 { grid-column-start: 13 } 1227 | ``` 1228 | 1229 | ```css 1230 | .col-start-auto { grid-column-start: auto } 1231 | ``` 1232 | 1233 | ### grid-template-rows 1234 | 1235 | ```css 1236 | .grid-rows-1 { grid-template-rows: repeat(1, auto) } 1237 | ``` 1238 | 1239 | ```css 1240 | .grid-rows-2 { grid-template-rows: repeat(2, auto) } 1241 | ``` 1242 | 1243 | ```css 1244 | .grid-rows-3 { grid-template-rows: repeat(3, auto) } 1245 | ``` 1246 | 1247 | ```css 1248 | .grid-rows-4 { grid-template-rows: repeat(4, auto) } 1249 | ``` 1250 | 1251 | ```css 1252 | .grid-rows-5 { grid-template-rows: repeat(5, auto) } 1253 | ``` 1254 | 1255 | ```css 1256 | .grid-rows-6 { grid-template-rows: repeat(6, auto) } 1257 | ``` 1258 | 1259 | ```css 1260 | .grid-rows-7 { grid-template-rows: repeat(7, auto) } 1261 | ``` 1262 | 1263 | ```css 1264 | .grid-rows-8 { grid-template-rows: repeat(8, auto) } 1265 | ``` 1266 | 1267 | ```css 1268 | .grid-rows-9 { grid-template-rows: repeat(9, auto) } 1269 | ``` 1270 | 1271 | ```css 1272 | .grid-rows-10 { grid-template-rows: repeat(10, auto) } 1273 | ``` 1274 | 1275 | ```css 1276 | .grid-rows-11 { grid-template-rows: repeat(11, auto) } 1277 | ``` 1278 | 1279 | ```css 1280 | .grid-rows-12 { grid-template-rows: repeat(12, auto) } 1281 | ``` 1282 | 1283 | ```css 1284 | .grid-rows-none { grid-template-rows: none } 1285 | ``` 1286 | 1287 | ```css 1288 | .grid-rows-subgrid { grid-template-rows: subgrid } 1289 | ``` 1290 | 1291 | ### grid-row 1292 | 1293 | ```css 1294 | .row-auto { grid-row: auto } 1295 | ``` 1296 | 1297 | ```css 1298 | .row-span-1 { grid-row: span 1 / span 1 } 1299 | ``` 1300 | 1301 | ```css 1302 | .row-span-2 { grid-row: span 2 / span 2 } 1303 | ``` 1304 | 1305 | ```css 1306 | .row-span-3 { grid-row: span 3 / span 3 } 1307 | ``` 1308 | 1309 | ```css 1310 | .row-span-4 { grid-row: span 4 / span 4 } 1311 | ``` 1312 | 1313 | ```css 1314 | .row-span-5 { grid-row: span 5 / span 5 } 1315 | ``` 1316 | 1317 | ```css 1318 | .row-span-6 { grid-row: span 6 / span 6 } 1319 | ``` 1320 | 1321 | ```css 1322 | .row-span-7 { grid-row: span 7 / span 7 } 1323 | ``` 1324 | 1325 | ```css 1326 | .row-span-8 { grid-row: span 8 / span 8 } 1327 | ``` 1328 | 1329 | ```css 1330 | .row-span-9 { grid-row: span 9 / span 9 } 1331 | ``` 1332 | 1333 | ```css 1334 | .row-span-10 { grid-row: span 10 / span 10 } 1335 | ``` 1336 | 1337 | ```css 1338 | .row-span-11 { grid-row: span 11 / span 11 } 1339 | ``` 1340 | 1341 | ```css 1342 | .row-span-12 { grid-row: span 12 / span 12 } 1343 | ``` 1344 | 1345 | ```css 1346 | .row-span-full { grid-row: 1 / -1 } 1347 | ``` 1348 | 1349 | ```css 1350 | .row-start-1 { grid-row-start: 1 } 1351 | ``` 1352 | 1353 | ```css 1354 | .row-start-2 { grid-row-start: 2 } 1355 | ``` 1356 | 1357 | ```css 1358 | .row-start-3 { grid-row-start: 3 } 1359 | ``` 1360 | 1361 | ```css 1362 | .row-start-4 { grid-row-start: 4 } 1363 | ``` 1364 | 1365 | ```css 1366 | .row-start-5 { grid-row-start: 5 } 1367 | ``` 1368 | 1369 | ```css 1370 | .row-start-6 { grid-row-start: 6 } 1371 | ``` 1372 | 1373 | ```css 1374 | .row-start-7 { grid-row-start: 7 } 1375 | ``` 1376 | 1377 | ```css 1378 | .row-start-8 { grid-row-start: 8 } 1379 | ``` 1380 | 1381 | ```css 1382 | .row-start-9 { grid-row-start: 9 } 1383 | ``` 1384 | 1385 | ```css 1386 | .row-start-10 { grid-row-start: 10 } 1387 | ``` 1388 | 1389 | ```css 1390 | .row-start-11 { grid-row-start: 11 } 1391 | ``` 1392 | 1393 | ```css 1394 | .row-start-12 { grid-row-start: 12 } 1395 | ``` 1396 | 1397 | ```css 1398 | .row-start-13 { grid-row-start: 13 } 1399 | ``` 1400 | 1401 | ```css 1402 | .row-start-auto { grid-row-start: auto } 1403 | ``` 1404 | 1405 | ### grid-auto-flow 1406 | 1407 | ```css 1408 | .grid-flow-row { grid-auto-flow: row } 1409 | ``` 1410 | 1411 | ```css 1412 | .grid-flow-col { grid-auto-flow: column } 1413 | ``` 1414 | 1415 | ```css 1416 | .grid-flow-dense { grid-auto-flow: dense } 1417 | ``` 1418 | 1419 | ```css 1420 | .grid-flow-row-dense { grid-auto-flow: row dense } 1421 | ``` 1422 | 1423 | ```css 1424 | .grid-flow-col-dense { grid-auto-flow: column dense } 1425 | ``` 1426 | 1427 | ### grid-auto-columns 1428 | 1429 | ```css 1430 | .auto-cols-auto { grid-auto-columns: auto } 1431 | ``` 1432 | 1433 | ```css 1434 | .auto-cols-min { grid-auto-columns: min-content } 1435 | ``` 1436 | 1437 | ```css 1438 | .auto-cols-max { grid-auto-columns: max-content } 1439 | ``` 1440 | 1441 | ```css 1442 | .auto-cols-fr { grid-auto-columns: minmax(0, 1fr) } 1443 | ``` 1444 | 1445 | ### grid-auto-rows 1446 | 1447 | ```css 1448 | .auto-rows-auto { grid-auto-rows: auto } 1449 | ``` 1450 | 1451 | ```css 1452 | .auto-rows-min { grid-auto-rows: min-content } 1453 | ``` 1454 | 1455 | ```css 1456 | .auto-rows-max { grid-auto-rows: max-content } 1457 | ``` 1458 | 1459 | ```css 1460 | .auto-rows-fr { grid-auto-rows: minmax(0, 1fr) } 1461 | ``` 1462 | 1463 | ### gap 1464 | 1465 | ```css 1466 | .gap-SUFFIX { gap: ... } 1467 | ``` 1468 | 1469 | ```css 1470 | .gap-x-SUFFIX { column-gap: ... } 1471 | ``` 1472 | 1473 | ```css 1474 | .gap-y-SUFFIX { row-gap: ... } 1475 | ``` 1476 | 1477 | ### justify-content 1478 | 1479 | ```css 1480 | .justify-start { justify-content: flex-start } 1481 | ``` 1482 | 1483 | ```css 1484 | .justify-end { justify-content: flex-end } 1485 | ``` 1486 | 1487 | ```css 1488 | .justify-center { justify-content: center } 1489 | ``` 1490 | 1491 | ```css 1492 | .justify-between { justify-content: space-between } 1493 | ``` 1494 | 1495 | ```css 1496 | .justify-around { justify-content: space-around } 1497 | ``` 1498 | 1499 | ```css 1500 | .justify-evenly { justify-content: space-evenly } 1501 | ``` 1502 | 1503 | ```css 1504 | .justify-stretch { justify-content: stretch } 1505 | ``` 1506 | 1507 | ```css 1508 | .justify-normal { justify-content: normal } 1509 | ``` 1510 | 1511 | ### justify-items 1512 | 1513 | ```css 1514 | .justify-items-start { justify-items: start } 1515 | ``` 1516 | 1517 | ```css 1518 | .justify-items-end { justify-items: end } 1519 | ``` 1520 | 1521 | ```css 1522 | .justify-items-center { justify-items: center } 1523 | ``` 1524 | 1525 | ```css 1526 | .justify-items-stretch { justify-items: stretch } 1527 | ``` 1528 | 1529 | ```css 1530 | .justify-items-normal { justify-items: normal } 1531 | ``` 1532 | 1533 | ### justify-self 1534 | 1535 | ```css 1536 | .justify-self-auto { justify-self: auto } 1537 | ``` 1538 | 1539 | ```css 1540 | .justify-self-start { justify-self: start } 1541 | ``` 1542 | 1543 | ```css 1544 | .justify-self-end { justify-self: end } 1545 | ``` 1546 | 1547 | ```css 1548 | .justify-self-center { justify-self: center } 1549 | ``` 1550 | 1551 | ```css 1552 | .justify-self-stretch { justify-self: stretch } 1553 | ``` 1554 | 1555 | ### align-content 1556 | 1557 | ```css 1558 | .content-normal { align-content: normal } 1559 | ``` 1560 | 1561 | ```css 1562 | .content-center { align-content: center } 1563 | ``` 1564 | 1565 | ```css 1566 | .content-start { align-content: flex-start } 1567 | ``` 1568 | 1569 | ```css 1570 | .content-end { align-content: flex-end } 1571 | ``` 1572 | 1573 | ```css 1574 | .content-between { align-content: space-between } 1575 | ``` 1576 | 1577 | ```css 1578 | .content-around { align-content: space-around } 1579 | ``` 1580 | 1581 | ```css 1582 | .content-evenly { align-content: space-evenly } 1583 | ``` 1584 | 1585 | ```css 1586 | .content-baseline { align-content: baseline } 1587 | ``` 1588 | 1589 | ```css 1590 | .content-stretch { align-content: stretch } 1591 | ``` 1592 | 1593 | ### align-items 1594 | 1595 | ```css 1596 | .items-start { align-items: flex-start } 1597 | ``` 1598 | 1599 | ```css 1600 | .items-end { align-items: flex-end } 1601 | ``` 1602 | 1603 | ```css 1604 | .items-end-safe { align-items: safe flex-end } 1605 | ``` 1606 | 1607 | ```css 1608 | .items-center { align-items: center } 1609 | ``` 1610 | 1611 | ```css 1612 | .items-center-safe { align-items: safe center } 1613 | ``` 1614 | 1615 | ```css 1616 | .items-baseline { align-items: baseline } 1617 | ``` 1618 | 1619 | ```css 1620 | .items-baseline-last { align-items: last baseline } 1621 | ``` 1622 | 1623 | ```css 1624 | .items-stretch { align-items: stretch } 1625 | ``` 1626 | 1627 | ### align-self 1628 | 1629 | ```css 1630 | .self-auto { align-self: auto } 1631 | ``` 1632 | 1633 | ```css 1634 | .self-start { align-self: flex-start } 1635 | ``` 1636 | 1637 | ```css 1638 | .self-end { align-self: flex-end } 1639 | ``` 1640 | 1641 | ```css 1642 | .self-center { align-self: center } 1643 | ``` 1644 | 1645 | ```css 1646 | .self-stretch { align-self: stretch } 1647 | ``` 1648 | 1649 | ```css 1650 | .self-baseline { align-self: baseline } 1651 | ``` 1652 | 1653 | ### place-content 1654 | 1655 | ```css 1656 | .place-content-center { place-content: center } 1657 | ``` 1658 | 1659 | ```css 1660 | .place-content-start { place-content: flex-start } 1661 | ``` 1662 | 1663 | ```css 1664 | .place-content-end { place-content: flex-end } 1665 | ``` 1666 | 1667 | ```css 1668 | .place-content-between { place-content: space-between } 1669 | ``` 1670 | 1671 | ```css 1672 | .place-content-around { place-content: space-around } 1673 | ``` 1674 | 1675 | ```css 1676 | .place-content-evenly { place-content: space-evenly } 1677 | ``` 1678 | 1679 | ```css 1680 | .place-content-baseline { place-content: baseline } 1681 | ``` 1682 | 1683 | ```css 1684 | .place-content-stretch { place-content: stretch } 1685 | ``` 1686 | 1687 | ### place-items 1688 | 1689 | ```css 1690 | .place-items-start { place-items: start } 1691 | ``` 1692 | 1693 | ```css 1694 | .place-items-end { place-items: end } 1695 | ``` 1696 | 1697 | ```css 1698 | .place-items-center { place-items: center } 1699 | ``` 1700 | 1701 | ```css 1702 | .place-items-baseline { place-items: baseline } 1703 | ``` 1704 | 1705 | ```css 1706 | .place-items-stretch { place-items: stretch } 1707 | ``` 1708 | 1709 | ### place-self 1710 | 1711 | ```css 1712 | .place-self-auto { place-self: auto } 1713 | ``` 1714 | 1715 | ```css 1716 | .place-self-start { place-self: start } 1717 | ``` 1718 | 1719 | ```css 1720 | .place-self-end { place-self: end } 1721 | ``` 1722 | 1723 | ```css 1724 | .place-self-center { place-self: center } 1725 | ``` 1726 | 1727 | ```css 1728 | .place-self-stretch { place-self: stretch } 1729 | ``` 1730 | 1731 | ## Spacing 1732 | 1733 | ### padding 1734 | 1735 | ```css 1736 | .p-SUFFIX { padding: ... } 1737 | ``` 1738 | 1739 | ```css 1740 | .px-SUFFIX { padding-inline: ... } 1741 | ``` 1742 | 1743 | ```css 1744 | .py-SUFFIX { padding-block: ... } 1745 | ``` 1746 | 1747 | ```css 1748 | .pt-SUFFIX { padding-top: ... } 1749 | ``` 1750 | 1751 | ```css 1752 | .pr-SUFFIX { padding-right: ... } 1753 | ``` 1754 | 1755 | ```css 1756 | .pb-SUFFIX { padding-bottom: ... } 1757 | ``` 1758 | 1759 | ```css 1760 | .pl-SUFFIX { padding-left: ... } 1761 | ``` 1762 | 1763 | ```css 1764 | .ps-SUFFIX { padding-inline-start: ... } 1765 | ``` 1766 | 1767 | ```css 1768 | .pe-SUFFIX { padding-inline-end: ... } 1769 | ``` 1770 | 1771 | ### margin 1772 | 1773 | ```css 1774 | .m-SUFFIX { margin: ... } 1775 | ``` 1776 | 1777 | ```css 1778 | .mx-SUFFIX { margin-inline: ... } 1779 | ``` 1780 | 1781 | ```css 1782 | .my-SUFFIX { margin-block: ... } 1783 | ``` 1784 | 1785 | ```css 1786 | .mt-SUFFIX { margin-top: ... } 1787 | ``` 1788 | 1789 | ```css 1790 | .mr-SUFFIX { margin-right: ... } 1791 | ``` 1792 | 1793 | ```css 1794 | .mb-SUFFIX { margin-bottom: ... } 1795 | ``` 1796 | 1797 | ```css 1798 | .ml-SUFFIX { margin-left: ... } 1799 | ``` 1800 | 1801 | ```css 1802 | .ms-SUFFIX { margin-inline-start: ... } 1803 | ``` 1804 | 1805 | ```css 1806 | .me-SUFFIX { margin-inline-end: ... } 1807 | ``` 1808 | 1809 | ```css 1810 | .space-x-SUFFIX > :not(:last-child) { margin-inline-end: ... } 1811 | ``` 1812 | 1813 | ```css 1814 | .space-y-SUFFIX > :not(:last-child) { margin-bottom: ... } 1815 | ``` 1816 | 1817 | ## Sizing 1818 | 1819 | ### width 1820 | 1821 | ```css 1822 | .w-SUFFIX { width: ... } 1823 | ``` 1824 | 1825 | ### min-width 1826 | 1827 | ```css 1828 | .min-w-SUFFIX { min-width: ... } 1829 | ``` 1830 | 1831 | ### max-width 1832 | 1833 | ```css 1834 | .max-w-SUFFIX { max-width: ... } 1835 | ``` 1836 | 1837 | ### height 1838 | 1839 | ```css 1840 | .h-SUFFIX { height: ... } 1841 | ``` 1842 | 1843 | ### min-height 1844 | 1845 | ```css 1846 | .min-h-SUFFIX { min-height: ... } 1847 | ``` 1848 | 1849 | ### max-height 1850 | 1851 | ```css 1852 | .max-h-SUFFIX { max-height: ... } 1853 | ``` 1854 | 1855 | ## Typography 1856 | 1857 | ### font-family 1858 | 1859 | ```css 1860 | .font-sans { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" } 1861 | ``` 1862 | 1863 | ```css 1864 | .font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif } 1865 | ``` 1866 | 1867 | ```css 1868 | .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace } 1869 | ``` 1870 | 1871 | ```css 1872 | .font-SUFFIX { font-family: ... } 1873 | ``` 1874 | 1875 | ### font-size 1876 | 1877 | ```css 1878 | .text-xs { 1879 | font-size: 12px; 1880 | line-height: 1.333 1881 | } 1882 | ``` 1883 | 1884 | ```css 1885 | .text-sm { 1886 | font-size: 14px; 1887 | line-height: 1.429 1888 | } 1889 | ``` 1890 | 1891 | ```css 1892 | .text-base { 1893 | font-size: 16px; 1894 | line-height: 1.5 1895 | } 1896 | ``` 1897 | 1898 | ```css 1899 | .text-lg { 1900 | font-size: 18px; 1901 | line-height: 1.555 1902 | } 1903 | ``` 1904 | 1905 | ```css 1906 | .text-xl { 1907 | font-size: 20px; 1908 | line-height: 1.4 1909 | } 1910 | ``` 1911 | 1912 | ```css 1913 | .text-2xl { 1914 | font-size: 24px; 1915 | line-height: 1.333 1916 | } 1917 | ``` 1918 | 1919 | ```css 1920 | .text-3xl { 1921 | font-size: 30px; 1922 | line-height: 1.2 1923 | } 1924 | ``` 1925 | 1926 | ```css 1927 | .text-4xl { 1928 | font-size: 36px; 1929 | line-height: 1.111 1930 | } 1931 | ``` 1932 | 1933 | ```css 1934 | .text-5xl { 1935 | font-size: 48px; 1936 | line-height: 1 1937 | } 1938 | ``` 1939 | 1940 | ```css 1941 | .text-6xl { 1942 | font-size: 60px; 1943 | line-height: 1 1944 | } 1945 | ``` 1946 | 1947 | ```css 1948 | .text-7xl { 1949 | font-size: 72px; 1950 | line-height: 1 1951 | } 1952 | ``` 1953 | 1954 | ```css 1955 | .text-8xl { 1956 | font-size: 96px; 1957 | line-height: 1 1958 | } 1959 | ``` 1960 | 1961 | ```css 1962 | .text-9xl { 1963 | font-size: 128px; 1964 | line-height: 1 1965 | } 1966 | ``` 1967 | 1968 | ### font-smoothing 1969 | 1970 | ```css 1971 | .antialiased { 1972 | -webkit-font-smoothing: antialiased; 1973 | -moz-osx-font-smoothing: grayscale 1974 | } 1975 | ``` 1976 | 1977 | ```css 1978 | .subpixel-antialiased { 1979 | -webkit-font-smoothing: auto; 1980 | -moz-osx-font-smoothing: auto 1981 | } 1982 | ``` 1983 | 1984 | ### font-style 1985 | 1986 | ```css 1987 | .italic { font-style: italic } 1988 | ``` 1989 | 1990 | ```css 1991 | .not-italic { font-style: normal } 1992 | ``` 1993 | 1994 | ### font-weight 1995 | 1996 | ```css 1997 | .font-thin { font-weight: 100 } 1998 | ``` 1999 | 2000 | ```css 2001 | .font-extralight { font-weight: 200 } 2002 | ``` 2003 | 2004 | ```css 2005 | .font-light { font-weight: 300 } 2006 | ``` 2007 | 2008 | ```css 2009 | .font-normal { font-weight: 400 } 2010 | ``` 2011 | 2012 | ```css 2013 | .font-medium { font-weight: 500 } 2014 | ``` 2015 | 2016 | ```css 2017 | .font-semibold { font-weight: 600 } 2018 | ``` 2019 | 2020 | ```css 2021 | .font-bold { font-weight: 700 } 2022 | ``` 2023 | 2024 | ```css 2025 | .font-extrabold { font-weight: 800 } 2026 | ``` 2027 | 2028 | ```css 2029 | .font-black { font-weight: 900 } 2030 | ``` 2031 | 2032 | ### font-stretch 2033 | 2034 | ```css 2035 | .font-stretch-ultra-condensed { font-stretch: ultra-condensed } 2036 | ``` 2037 | 2038 | ```css 2039 | .font-stretch-extra-condensed { font-stretch: extra-condensed } 2040 | ``` 2041 | 2042 | ```css 2043 | .font-stretch-condensed { font-stretch: condensed } 2044 | ``` 2045 | 2046 | ```css 2047 | .font-stretch-semi-condensed { font-stretch: semi-condensed } 2048 | ``` 2049 | 2050 | ```css 2051 | .font-stretch-normal { font-stretch: normal } 2052 | ``` 2053 | 2054 | ```css 2055 | .font-stretch-semi-expanded { font-stretch: semi-expanded } 2056 | ``` 2057 | 2058 | ```css 2059 | .font-stretch-expanded { font-stretch: expanded } 2060 | ``` 2061 | 2062 | ```css 2063 | .font-stretch-extra-expanded { font-stretch: extra-expanded } 2064 | ``` 2065 | 2066 | ```css 2067 | .font-stretch-ultra-expanded { font-stretch: ultra-expanded } 2068 | ``` 2069 | 2070 | ### font-variant-numeric 2071 | 2072 | ```css 2073 | .normal-nums { font-variant-numeric: normal } 2074 | ``` 2075 | 2076 | ```css 2077 | .ordinal { font-variant-numeric: ordinal } 2078 | ``` 2079 | 2080 | ```css 2081 | .slashed-zero { font-variant-numeric: slashed-zero } 2082 | ``` 2083 | 2084 | ```css 2085 | .lining-nums { font-variant-numeric: lining-nums } 2086 | ``` 2087 | 2088 | ```css 2089 | .oldstyle-nums { font-variant-numeric: oldstyle-nums } 2090 | ``` 2091 | 2092 | ```css 2093 | .proportional-nums { font-variant-numeric: proportional-nums } 2094 | ``` 2095 | 2096 | ```css 2097 | .tabular-nums { font-variant-numeric: tabular-nums } 2098 | ``` 2099 | 2100 | ```css 2101 | .diagonal-fractions { font-variant-numeric: diagonal-fractions } 2102 | ``` 2103 | 2104 | ```css 2105 | .stacked-fractions { font-variant-numeric: stacked-fractions } 2106 | ``` 2107 | 2108 | ### letter-spacing 2109 | 2110 | ```css 2111 | .tracking-tighter { letter-spacing: -0.05em } 2112 | ``` 2113 | 2114 | ```css 2115 | .tracking-tight { letter-spacing: -0.025em } 2116 | ``` 2117 | 2118 | ```css 2119 | .tracking-normal { letter-spacing: 0 } 2120 | ``` 2121 | 2122 | ```css 2123 | .tracking-wide { letter-spacing: 0.025em } 2124 | ``` 2125 | 2126 | ```css 2127 | .tracking-wider { letter-spacing: 0.05em } 2128 | ``` 2129 | 2130 | ```css 2131 | .tracking-widest { letter-spacing: 0.1em } 2132 | ``` 2133 | 2134 | ### line-clamp 2135 | 2136 | ```css 2137 | .line-clamp-1 { 2138 | -webkit-line-clamp: 1; 2139 | overflow: hidden; 2140 | display: -webkit-box; 2141 | -webkit-box-orient: vertical 2142 | } 2143 | ``` 2144 | 2145 | ```css 2146 | .line-clamp-2 { 2147 | -webkit-line-clamp: 2; 2148 | overflow: hidden; 2149 | display: -webkit-box; 2150 | -webkit-box-orient: vertical 2151 | } 2152 | ``` 2153 | 2154 | ```css 2155 | .line-clamp-3 { 2156 | -webkit-line-clamp: 3; 2157 | overflow: hidden; 2158 | display: -webkit-box; 2159 | -webkit-box-orient: vertical 2160 | } 2161 | ``` 2162 | 2163 | ```css 2164 | .line-clamp-4 { 2165 | -webkit-line-clamp: 4; 2166 | overflow: hidden; 2167 | display: -webkit-box; 2168 | -webkit-box-orient: vertical 2169 | } 2170 | ``` 2171 | 2172 | ```css 2173 | .line-clamp-5 { 2174 | -webkit-line-clamp: 5; 2175 | overflow: hidden; 2176 | display: -webkit-box; 2177 | -webkit-box-orient: vertical 2178 | } 2179 | ``` 2180 | 2181 | ```css 2182 | .line-clamp-6 { 2183 | -webkit-line-clamp: 6; 2184 | overflow: hidden; 2185 | display: -webkit-box; 2186 | -webkit-box-orient: vertical 2187 | } 2188 | ``` 2189 | 2190 | ```css 2191 | .line-clamp-none { 2192 | -webkit-line-clamp: none; 2193 | overflow: hidden; 2194 | display: -webkit-box; 2195 | -webkit-box-orient: vertical 2196 | } 2197 | ``` 2198 | 2199 | ### line-height 2200 | 2201 | ```css 2202 | .leading-none { line-height: 1 } 2203 | ``` 2204 | 2205 | ```css 2206 | .leading-tight { line-height: 1.25 } 2207 | ``` 2208 | 2209 | ```css 2210 | .leading-snug { line-height: 1.375 } 2211 | ``` 2212 | 2213 | ```css 2214 | .leading-normal { line-height: 1.5 } 2215 | ``` 2216 | 2217 | ```css 2218 | .leading-relaxed { line-height: 1.625 } 2219 | ``` 2220 | 2221 | ```css 2222 | .leading-loose { line-height: 2 } 2223 | ``` 2224 | 2225 | ### list-style-image 2226 | 2227 | ```css 2228 | .list-image-none { list-style-image: none } 2229 | ``` 2230 | 2231 | ### list-style-position 2232 | 2233 | ```css 2234 | .list-inside { list-style-position: inside } 2235 | ``` 2236 | 2237 | ```css 2238 | .list-outside { list-style-position: outside } 2239 | ``` 2240 | 2241 | ### list-style-type 2242 | 2243 | ```css 2244 | .list-disc { list-style-type: disc } 2245 | ``` 2246 | 2247 | ```css 2248 | .list-decimal { list-style-type: decimal } 2249 | ``` 2250 | 2251 | ```css 2252 | .list-none { list-style-type: none } 2253 | ``` 2254 | 2255 | ### text-align 2256 | 2257 | ```css 2258 | .text-left { text-align: left } 2259 | ``` 2260 | 2261 | ```css 2262 | .text-center { text-align: center } 2263 | ``` 2264 | 2265 | ```css 2266 | .text-right { text-align: right } 2267 | ``` 2268 | 2269 | ```css 2270 | .text-justify { text-align: justify } 2271 | ``` 2272 | 2273 | ```css 2274 | .text-start { text-align: start } 2275 | ``` 2276 | 2277 | ```css 2278 | .text-end { text-align: end } 2279 | ``` 2280 | 2281 | ### color 2282 | 2283 | ```css 2284 | .text-COLOR { color: oklch(...) } 2285 | ``` 2286 | 2287 | ### text-decoration-line 2288 | 2289 | ```css 2290 | .underline { text-decoration-line: underline } 2291 | ``` 2292 | 2293 | ```css 2294 | .overline { text-decoration-line: overline } 2295 | ``` 2296 | 2297 | ```css 2298 | .line-through { text-decoration-line: line-through } 2299 | ``` 2300 | 2301 | ```css 2302 | .no-underline { text-decoration-line: none } 2303 | ``` 2304 | 2305 | ### text-decoration-color 2306 | 2307 | ```css 2308 | .decoration-COLOR { text-decoration-color: oklch(...) } 2309 | ``` 2310 | 2311 | ### text-decoration-style 2312 | 2313 | ```css 2314 | .decoration-solid { text-decoration-style: solid } 2315 | ``` 2316 | 2317 | ```css 2318 | .decoration-double { text-decoration-style: double } 2319 | ``` 2320 | 2321 | ```css 2322 | .decoration-dotted { text-decoration-style: dotted } 2323 | ``` 2324 | 2325 | ```css 2326 | .decoration-dashed { text-decoration-style: dashed } 2327 | ``` 2328 | 2329 | ```css 2330 | .decoration-wavy { text-decoration-style: wavy } 2331 | ``` 2332 | 2333 | ### text-decoration-thickness 2334 | 2335 | ```css 2336 | .decoration-auto { text-decoration-thickness: auto } 2337 | ``` 2338 | 2339 | ```css 2340 | .decoration-from-font { text-decoration-thickness: from-font } 2341 | ``` 2342 | 2343 | ```css 2344 | .decoration-0 { text-decoration-thickness: 0px } 2345 | ``` 2346 | 2347 | ```css 2348 | .decoration-1 { text-decoration-thickness: 1px } 2349 | ``` 2350 | 2351 | ```css 2352 | .decoration-2 { text-decoration-thickness: 2px } 2353 | ``` 2354 | 2355 | ```css 2356 | .decoration-4 { text-decoration-thickness: 4px } 2357 | ``` 2358 | 2359 | ```css 2360 | .decoration-8 { text-decoration-thickness: 8px } 2361 | ``` 2362 | 2363 | ### text-underline-offset 2364 | 2365 | ```css 2366 | .underline-offset-auto { text-underline-offset: auto } 2367 | ``` 2368 | 2369 | ```css 2370 | .underline-offset-0 { text-underline-offset: 0px } 2371 | ``` 2372 | 2373 | ```css 2374 | .underline-offset-1 { text-underline-offset: 1px } 2375 | ``` 2376 | 2377 | ```css 2378 | .underline-offset-2 { text-underline-offset: 2px } 2379 | ``` 2380 | 2381 | ```css 2382 | .underline-offset-4 { text-underline-offset: 4px } 2383 | ``` 2384 | 2385 | ```css 2386 | .underline-offset-8 { text-underline-offset: 8px } 2387 | ``` 2388 | 2389 | ### text-transform 2390 | 2391 | ```css 2392 | .uppercase { text-transform: uppercase } 2393 | ``` 2394 | 2395 | ```css 2396 | .lowercase { text-transform: lowercase } 2397 | ``` 2398 | 2399 | ```css 2400 | .capitalize { text-transform: capitalize } 2401 | ``` 2402 | 2403 | ```css 2404 | .normal-case { text-transform: none } 2405 | ``` 2406 | 2407 | ### text-overflow 2408 | 2409 | ```css 2410 | .overflow-clip { text-overflow: clip } 2411 | ``` 2412 | 2413 | ```css 2414 | .overflow-ellipsis { text-overflow: ellipsis } 2415 | ``` 2416 | 2417 | ```css 2418 | .truncate { 2419 | text-overflow: ellipsis; 2420 | overflow: hidden; 2421 | white-space: nowrap 2422 | } 2423 | ``` 2424 | 2425 | ### text-wrap 2426 | 2427 | ```css 2428 | .text-wrap { text-wrap: wrap } 2429 | ``` 2430 | 2431 | ```css 2432 | .text-nowrap { text-wrap: nowrap } 2433 | ``` 2434 | 2435 | ```css 2436 | .text-balance { text-wrap: balance } 2437 | ``` 2438 | 2439 | ```css 2440 | .text-pretty { text-wrap: pretty } 2441 | ``` 2442 | 2443 | ### text-indent 2444 | 2445 | ```css 2446 | .indentSUFFIX { text-indent: ... } 2447 | ``` 2448 | 2449 | ### vertical-align 2450 | 2451 | ```css 2452 | .align-baseline { vertical-align: baseline } 2453 | ``` 2454 | 2455 | ```css 2456 | .align-top { vertical-align: top } 2457 | ``` 2458 | 2459 | ```css 2460 | .align-middle { vertical-align: middle } 2461 | ``` 2462 | 2463 | ```css 2464 | .align-bottom { vertical-align: bottom } 2465 | ``` 2466 | 2467 | ```css 2468 | .align-text-top { vertical-align: text-top } 2469 | ``` 2470 | 2471 | ```css 2472 | .align-text-bottom { vertical-align: text-bottom } 2473 | ``` 2474 | 2475 | ```css 2476 | .align-sub { vertical-align: sub } 2477 | ``` 2478 | 2479 | ```css 2480 | .align-super { vertical-align: super } 2481 | ``` 2482 | 2483 | ### white-space 2484 | 2485 | ```css 2486 | .whitespace-normal { white-space: normal } 2487 | ``` 2488 | 2489 | ```css 2490 | .whitespace-nowrap { white-space: nowrap } 2491 | ``` 2492 | 2493 | ```css 2494 | .whitespace-pre { white-space: pre } 2495 | ``` 2496 | 2497 | ```css 2498 | .whitespace-pre-line { white-space: pre-line } 2499 | ``` 2500 | 2501 | ```css 2502 | .whitespace-pre-wrap { white-space: pre-wrap } 2503 | ``` 2504 | 2505 | ```css 2506 | .whitespace-break-spaces { white-space: break-spaces } 2507 | ``` 2508 | 2509 | ### word-break 2510 | 2511 | ```css 2512 | .break-normal { word-break: normal } 2513 | ``` 2514 | 2515 | ```css 2516 | .break-all { word-break: break-all } 2517 | ``` 2518 | 2519 | ```css 2520 | .break-keep { word-break: keep-all } 2521 | ``` 2522 | 2523 | ### overflow-wrap 2524 | 2525 | ```css 2526 | .wrap-break-word { overflow-wrap: break-word } 2527 | ``` 2528 | 2529 | ```css 2530 | .wrap-anywhere { overflow-wrap: anywhere } 2531 | ``` 2532 | 2533 | ```css 2534 | .wrap-normal { overflow-wrap: normal } 2535 | ``` 2536 | 2537 | ### hyphens 2538 | 2539 | ```css 2540 | .hyphens-none { hyphens: none } 2541 | ``` 2542 | 2543 | ```css 2544 | .hyphens-manual { hyphens: manual } 2545 | ``` 2546 | 2547 | ```css 2548 | .hyphens-auto { hyphens: auto } 2549 | ``` 2550 | 2551 | ### content 2552 | 2553 | ```css 2554 | .content-SUFFIX { content: ... } 2555 | ``` 2556 | 2557 | ## Backgrounds 2558 | 2559 | ### background-attachment 2560 | 2561 | ```css 2562 | .bg-fixed { background-attachment: fixed } 2563 | ``` 2564 | 2565 | ```css 2566 | .bg-local { background-attachment: local } 2567 | ``` 2568 | 2569 | ```css 2570 | .bg-scroll { background-attachment: scroll } 2571 | ``` 2572 | 2573 | ### background-clip 2574 | 2575 | ```css 2576 | .bg-clip-border { background-clip: border-box } 2577 | ``` 2578 | 2579 | ```css 2580 | .bg-clip-padding { background-clip: padding-box } 2581 | ``` 2582 | 2583 | ```css 2584 | .bg-clip-content { background-clip: content-box } 2585 | ``` 2586 | 2587 | ```css 2588 | .bg-clip-text { background-clip: text } 2589 | ``` 2590 | 2591 | ### background-color 2592 | 2593 | ```css 2594 | .bg-COLOR { background-color: oklch(...) } 2595 | ``` 2596 | 2597 | ### background-image 2598 | 2599 | ```css 2600 | .bg-SUFFIX { background-image: ... } 2601 | ``` 2602 | 2603 | ```css 2604 | .bg-none { background-image: none } 2605 | ``` 2606 | 2607 | ### background-origin 2608 | 2609 | ```css 2610 | .bg-border-box { background-origin: border-box } 2611 | ``` 2612 | 2613 | ```css 2614 | .bg-padding-box { background-origin: padding-box } 2615 | ``` 2616 | 2617 | ```css 2618 | .bg-content-box { background-origin: content-box } 2619 | ``` 2620 | 2621 | ### background-position 2622 | 2623 | ```css 2624 | .bg-bottom { background-position: bottom } 2625 | ``` 2626 | 2627 | ```css 2628 | .bg-center { background-position: center } 2629 | ``` 2630 | 2631 | ```css 2632 | .bg-left { background-position: left } 2633 | ``` 2634 | 2635 | ```css 2636 | .bg-left-bottom { background-position: left bottom } 2637 | ``` 2638 | 2639 | ```css 2640 | .bg-left-top { background-position: left top } 2641 | ``` 2642 | 2643 | ```css 2644 | .bg-right { background-position: right } 2645 | ``` 2646 | 2647 | ```css 2648 | .bg-right-bottom { background-position: right bottom } 2649 | ``` 2650 | 2651 | ```css 2652 | .bg-right-top { background-position: right top } 2653 | ``` 2654 | 2655 | ```css 2656 | .bg-top { background-position: top } 2657 | ``` 2658 | 2659 | ### background-repeat 2660 | 2661 | ```css 2662 | .bg-repeat { background-repeat: repeat } 2663 | ``` 2664 | 2665 | ```css 2666 | .bg-repeat-x { background-repeat: repeat-x } 2667 | ``` 2668 | 2669 | ```css 2670 | .bg-repeat-y { background-repeat: repeat-y } 2671 | ``` 2672 | 2673 | ```css 2674 | .bg-space { background-repeat: space } 2675 | ``` 2676 | 2677 | ```css 2678 | .bg-round { background-repeat: round } 2679 | ``` 2680 | 2681 | ```css 2682 | .bg-no-repeat { background-repeat: no-repeat } 2683 | ``` 2684 | 2685 | ### background-size 2686 | 2687 | ```css 2688 | .bg-auto { background-size: auto } 2689 | ``` 2690 | 2691 | ```css 2692 | .bg-cover { background-size: cover } 2693 | ``` 2694 | 2695 | ```css 2696 | .bg-contain { background-size: contain } 2697 | ``` 2698 | 2699 | ## Borders 2700 | 2701 | ### border-radius 2702 | 2703 | ```css 2704 | .rounded-xs { border-radius: 2px } 2705 | ``` 2706 | 2707 | ```css 2708 | .rounded-sm { border-radius: 4px } 2709 | ``` 2710 | 2711 | ```css 2712 | .rounded-md { border-radius: 6px } 2713 | ``` 2714 | 2715 | ```css 2716 | .rounded-lg { border-radius: 8px } 2717 | ``` 2718 | 2719 | ```css 2720 | .rounded-xl { border-radius: 12px } 2721 | ``` 2722 | 2723 | ```css 2724 | .rounded-2xl { border-radius: 16px } 2725 | ``` 2726 | 2727 | ```css 2728 | .rounded-3xl { border-radius: 24px } 2729 | ``` 2730 | 2731 | ```css 2732 | .rounded-full { border-radius: 50% } 2733 | ``` 2734 | 2735 | ```css 2736 | .rounded-none { border-radius: 0 } 2737 | ``` 2738 | 2739 | ```css 2740 | .rounded-tl-xs { border-top-left-radius: 2px } 2741 | ``` 2742 | 2743 | ```css 2744 | .rounded-tl-sm { border-top-left-radius: 4px } 2745 | ``` 2746 | 2747 | ```css 2748 | .rounded-tl-md { border-top-left-radius: 6px } 2749 | ``` 2750 | 2751 | ```css 2752 | .rounded-tl-lg { border-top-left-radius: 8px } 2753 | ``` 2754 | 2755 | ```css 2756 | .rounded-tl-xl { border-top-left-radius: 12px } 2757 | ``` 2758 | 2759 | ```css 2760 | .rounded-tl-2xl { border-top-left-radius: 16px } 2761 | ``` 2762 | 2763 | ```css 2764 | .rounded-tl-3xl { border-top-left-radius: 24px } 2765 | ``` 2766 | 2767 | ```css 2768 | .rounded-tl-full { border-top-left-radius: 50% } 2769 | ``` 2770 | 2771 | ```css 2772 | .rounded-tl-none { border-top-left-radius: 0 } 2773 | ``` 2774 | 2775 | ```css 2776 | .rounded-tr-xs { border-top-right-radius: 2px } 2777 | ``` 2778 | 2779 | ```css 2780 | .rounded-tr-sm { border-top-right-radius: 4px } 2781 | ``` 2782 | 2783 | ```css 2784 | .rounded-tr-md { border-top-right-radius: 6px } 2785 | ``` 2786 | 2787 | ```css 2788 | .rounded-tr-lg { border-top-right-radius: 8px } 2789 | ``` 2790 | 2791 | ```css 2792 | .rounded-tr-xl { border-top-right-radius: 12px } 2793 | ``` 2794 | 2795 | ```css 2796 | .rounded-tr-2xl { border-top-right-radius: 16px } 2797 | ``` 2798 | 2799 | ```css 2800 | .rounded-tr-3xl { border-top-right-radius: 24px } 2801 | ``` 2802 | 2803 | ```css 2804 | .rounded-tr-full { border-top-right-radius: 50% } 2805 | ``` 2806 | 2807 | ```css 2808 | .rounded-tr-none { border-top-right-radius: 0 } 2809 | ``` 2810 | 2811 | ```css 2812 | .rounded-bl-xs { border-bottom-left-radius: 2px } 2813 | ``` 2814 | 2815 | ```css 2816 | .rounded-bl-sm { border-bottom-left-radius: 4px } 2817 | ``` 2818 | 2819 | ```css 2820 | .rounded-bl-md { border-bottom-left-radius: 6px } 2821 | ``` 2822 | 2823 | ```css 2824 | .rounded-bl-lg { border-bottom-left-radius: 8px } 2825 | ``` 2826 | 2827 | ```css 2828 | .rounded-bl-xl { border-bottom-left-radius: 12px } 2829 | ``` 2830 | 2831 | ```css 2832 | .rounded-bl-2xl { border-bottom-left-radius: 16px } 2833 | ``` 2834 | 2835 | ```css 2836 | .rounded-bl-3xl { border-bottom-left-radius: 24px } 2837 | ``` 2838 | 2839 | ```css 2840 | .rounded-bl-full { border-bottom-left-radius: 50% } 2841 | ``` 2842 | 2843 | ```css 2844 | .rounded-bl-none { border-bottom-left-radius: 0 } 2845 | ``` 2846 | 2847 | ```css 2848 | .rounded-br-xs { border-bottom-right-radius: 2px } 2849 | ``` 2850 | 2851 | ```css 2852 | .rounded-br-sm { border-bottom-right-radius: 4px } 2853 | ``` 2854 | 2855 | ```css 2856 | .rounded-br-md { border-bottom-right-radius: 6px } 2857 | ``` 2858 | 2859 | ```css 2860 | .rounded-br-lg { border-bottom-right-radius: 8px } 2861 | ``` 2862 | 2863 | ```css 2864 | .rounded-br-xl { border-bottom-right-radius: 12px } 2865 | ``` 2866 | 2867 | ```css 2868 | .rounded-br-2xl { border-bottom-right-radius: 16px } 2869 | ``` 2870 | 2871 | ```css 2872 | .rounded-br-3xl { border-bottom-right-radius: 24px } 2873 | ``` 2874 | 2875 | ```css 2876 | .rounded-br-full { border-bottom-right-radius: 50% } 2877 | ``` 2878 | 2879 | ```css 2880 | .rounded-br-none { border-bottom-right-radius: 0 } 2881 | ``` 2882 | 2883 | ### border-width 2884 | 2885 | ```css 2886 | .border-0 { border-width: 0px } 2887 | ``` 2888 | 2889 | ```css 2890 | .border-1 { border-width: 1px } 2891 | ``` 2892 | 2893 | ```css 2894 | .border-2 { border-width: 2px } 2895 | ``` 2896 | 2897 | ```css 2898 | .border-4 { border-width: 4px } 2899 | ``` 2900 | 2901 | ```css 2902 | .border-8 { border-width: 8px } 2903 | ``` 2904 | 2905 | ```css 2906 | .border-t-0 { border-top-width: 0px } 2907 | ``` 2908 | 2909 | ```css 2910 | .border-t-1 { border-top-width: 1px } 2911 | ``` 2912 | 2913 | ```css 2914 | .border-t-2 { border-top-width: 2px } 2915 | ``` 2916 | 2917 | ```css 2918 | .border-t-4 { border-top-width: 4px } 2919 | ``` 2920 | 2921 | ```css 2922 | .border-t-8 { border-top-width: 8px } 2923 | ``` 2924 | 2925 | ```css 2926 | .border-b-0 { border-bottom-width: 0px } 2927 | ``` 2928 | 2929 | ```css 2930 | .border-b-1 { border-bottom-width: 1px } 2931 | ``` 2932 | 2933 | ```css 2934 | .border-b-2 { border-bottom-width: 2px } 2935 | ``` 2936 | 2937 | ```css 2938 | .border-b-4 { border-bottom-width: 4px } 2939 | ``` 2940 | 2941 | ```css 2942 | .border-b-8 { border-bottom-width: 8px } 2943 | ``` 2944 | 2945 | ```css 2946 | .border-l-0 { border-left-width: 0px } 2947 | ``` 2948 | 2949 | ```css 2950 | .border-l-1 { border-left-width: 1px } 2951 | ``` 2952 | 2953 | ```css 2954 | .border-l-2 { border-left-width: 2px } 2955 | ``` 2956 | 2957 | ```css 2958 | .border-l-4 { border-left-width: 4px } 2959 | ``` 2960 | 2961 | ```css 2962 | .border-l-8 { border-left-width: 8px } 2963 | ``` 2964 | 2965 | ```css 2966 | .border-r-0 { border-right-width: 0px } 2967 | ``` 2968 | 2969 | ```css 2970 | .border-r-1 { border-right-width: 1px } 2971 | ``` 2972 | 2973 | ```css 2974 | .border-r-2 { border-right-width: 2px } 2975 | ``` 2976 | 2977 | ```css 2978 | .border-r-4 { border-right-width: 4px } 2979 | ``` 2980 | 2981 | ```css 2982 | .border-r-8 { border-right-width: 8px } 2983 | ``` 2984 | 2985 | ```css 2986 | .border-s-0 { border-inline-start-width: 0px } 2987 | ``` 2988 | 2989 | ```css 2990 | .border-s-1 { border-inline-start-width: 1px } 2991 | ``` 2992 | 2993 | ```css 2994 | .border-s-2 { border-inline-start-width: 2px } 2995 | ``` 2996 | 2997 | ```css 2998 | .border-s-4 { border-inline-start-width: 4px } 2999 | ``` 3000 | 3001 | ```css 3002 | .border-s-8 { border-inline-start-width: 8px } 3003 | ``` 3004 | 3005 | ```css 3006 | .border-e-0 { border-inline-end-width: 0px } 3007 | ``` 3008 | 3009 | ```css 3010 | .border-e-1 { border-inline-end-width: 1px } 3011 | ``` 3012 | 3013 | ```css 3014 | .border-e-2 { border-inline-end-width: 2px } 3015 | ``` 3016 | 3017 | ```css 3018 | .border-e-4 { border-inline-end-width: 4px } 3019 | ``` 3020 | 3021 | ```css 3022 | .border-e-8 { border-inline-end-width: 8px } 3023 | ``` 3024 | 3025 | ```css 3026 | .border { border-width: 1px } 3027 | ``` 3028 | 3029 | ```css 3030 | .border-t { border-top-width: 1px } 3031 | ``` 3032 | 3033 | ```css 3034 | .border-b { border-bottom-width: 1px } 3035 | ``` 3036 | 3037 | ```css 3038 | .border-l { border-left-width: 1px } 3039 | ``` 3040 | 3041 | ```css 3042 | .border-r { border-right-width: 1px } 3043 | ``` 3044 | 3045 | ```css 3046 | .border-s { border-inline-start-width: 1px } 3047 | ``` 3048 | 3049 | ```css 3050 | .border-e { border-inline-end-width: 1px } 3051 | ``` 3052 | 3053 | ### border-color 3054 | 3055 | ```css 3056 | .border-COLOR { border-color: oklch(...) } 3057 | ``` 3058 | 3059 | ### border-style 3060 | 3061 | ```css 3062 | .border-solid { border-style: solid } 3063 | ``` 3064 | 3065 | ```css 3066 | .border-dashed { border-style: dashed } 3067 | ``` 3068 | 3069 | ```css 3070 | .border-dotted { border-style: dotted } 3071 | ``` 3072 | 3073 | ```css 3074 | .border-double { border-style: double } 3075 | ``` 3076 | 3077 | ```css 3078 | .border-hidden { border-style: hidden } 3079 | ``` 3080 | 3081 | ```css 3082 | .border-none { border-style: none } 3083 | ``` 3084 | 3085 | ### outline-width 3086 | 3087 | ```css 3088 | .outline-0 { outline-width: 0px } 3089 | ``` 3090 | 3091 | ```css 3092 | .outline-1 { outline-width: 1px } 3093 | ``` 3094 | 3095 | ```css 3096 | .outline-2 { outline-width: 2px } 3097 | ``` 3098 | 3099 | ```css 3100 | .outline-4 { outline-width: 4px } 3101 | ``` 3102 | 3103 | ```css 3104 | .outline-8 { outline-width: 8px } 3105 | ``` 3106 | 3107 | ### outline-color 3108 | 3109 | ```css 3110 | .outline-COLOR { outline-color: oklch(...) } 3111 | ``` 3112 | 3113 | ### outline-style 3114 | 3115 | ```css 3116 | .outline { outline-style: solid } 3117 | ``` 3118 | 3119 | ```css 3120 | .outline-none { outline-style: none } 3121 | ``` 3122 | 3123 | ```css 3124 | .outline-dashed { outline-style: dashed } 3125 | ``` 3126 | 3127 | ```css 3128 | .outline-dotted { outline-style: dotted } 3129 | ``` 3130 | 3131 | ```css 3132 | .outline-double { outline-style: double } 3133 | ``` 3134 | 3135 | ### outline-offset 3136 | 3137 | ```css 3138 | .outline-offset-0 { outline-offset: 0px } 3139 | ``` 3140 | 3141 | ```css 3142 | .outline-offset-1 { outline-offset: 1px } 3143 | ``` 3144 | 3145 | ```css 3146 | .outline-offset-2 { outline-offset: 2px } 3147 | ``` 3148 | 3149 | ```css 3150 | .outline-offset-4 { outline-offset: 4px } 3151 | ``` 3152 | 3153 | ```css 3154 | .outline-offset-8 { outline-offset: 8px } 3155 | ``` 3156 | 3157 | ## Effects 3158 | 3159 | ### box-shadow 3160 | 3161 | ```css 3162 | .shadow { box-shadow: 0 1px rgb(0 0 0 / 0.05) } 3163 | ``` 3164 | 3165 | ```css 3166 | .shadow-2xs { box-shadow: 0 1px rgb(0 0 0 / 0.05) } 3167 | ``` 3168 | 3169 | ```css 3170 | .shadow-xs { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) } 3171 | ``` 3172 | 3173 | ```css 3174 | .shadow-sm { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) } 3175 | ``` 3176 | 3177 | ```css 3178 | .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) } 3179 | ``` 3180 | 3181 | ```css 3182 | .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) } 3183 | ``` 3184 | 3185 | ```css 3186 | .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) } 3187 | ``` 3188 | 3189 | ```css 3190 | .shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) } 3191 | ``` 3192 | 3193 | ```css 3194 | .shadow-none { box-shadow: 0 0 rgb(0 0 0 / 0) } 3195 | ``` 3196 | 3197 | ### text-shadow 3198 | 3199 | ```css 3200 | .text-shadow-2xs { text-shadow: 0px 1px 0px rgb(0 0 0 / 0.15) } 3201 | ``` 3202 | 3203 | ```css 3204 | .text-shadow-xs { text-shadow: 0px 1px 1px rgb(0 0 0 / 0.2) } 3205 | ``` 3206 | 3207 | ```css 3208 | .text-shadow-sm { text-shadow: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) } 3209 | ``` 3210 | 3211 | ```css 3212 | .text-shadow-md { text-shadow: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) } 3213 | ``` 3214 | 3215 | ```css 3216 | .text-shadow-lg { text-shadow: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) } 3217 | ``` 3218 | 3219 | ```css 3220 | .text-shadow-none { text-shadow: none } 3221 | ``` 3222 | 3223 | ### opacity 3224 | 3225 | ```css 3226 | .opacity-0 { opacity: 0 } 3227 | ``` 3228 | 3229 | ```css 3230 | .opacity-5 { opacity: 0.05 } 3231 | ``` 3232 | 3233 | ```css 3234 | .opacity-10 { opacity: 0.1 } 3235 | ``` 3236 | 3237 | ```css 3238 | .opacity-20 { opacity: 0.2 } 3239 | ``` 3240 | 3241 | ```css 3242 | .opacity-25 { opacity: 0.25 } 3243 | ``` 3244 | 3245 | ```css 3246 | .opacity-30 { opacity: 0.3 } 3247 | ``` 3248 | 3249 | ```css 3250 | .opacity-40 { opacity: 0.4 } 3251 | ``` 3252 | 3253 | ```css 3254 | .opacity-50 { opacity: 0.5 } 3255 | ``` 3256 | 3257 | ```css 3258 | .opacity-60 { opacity: 0.6 } 3259 | ``` 3260 | 3261 | ```css 3262 | .opacity-70 { opacity: 0.7 } 3263 | ``` 3264 | 3265 | ```css 3266 | .opacity-75 { opacity: 0.75 } 3267 | ``` 3268 | 3269 | ```css 3270 | .opacity-80 { opacity: 0.8 } 3271 | ``` 3272 | 3273 | ```css 3274 | .opacity-90 { opacity: 0.9 } 3275 | ``` 3276 | 3277 | ```css 3278 | .opacity-95 { opacity: 0.95 } 3279 | ``` 3280 | 3281 | ```css 3282 | .opacity-100 { opacity: 1 } 3283 | ``` 3284 | 3285 | ### mix-blend-mode 3286 | 3287 | ```css 3288 | .mix-blend-normal { mix-blend-mode: normal } 3289 | ``` 3290 | 3291 | ```css 3292 | .mix-blend-multiply { mix-blend-mode: multiply } 3293 | ``` 3294 | 3295 | ```css 3296 | .mix-blend-screen { mix-blend-mode: screen } 3297 | ``` 3298 | 3299 | ```css 3300 | .mix-blend-overlay { mix-blend-mode: overlay } 3301 | ``` 3302 | 3303 | ```css 3304 | .mix-blend-darken { mix-blend-mode: darken } 3305 | ``` 3306 | 3307 | ```css 3308 | .mix-blend-lighten { mix-blend-mode: lighten } 3309 | ``` 3310 | 3311 | ```css 3312 | .mix-blend-color-dodge { mix-blend-mode: color-dodge } 3313 | ``` 3314 | 3315 | ```css 3316 | .mix-blend-color-burn { mix-blend-mode: color-burn } 3317 | ``` 3318 | 3319 | ```css 3320 | .mix-blend-hard-light { mix-blend-mode: hard-light } 3321 | ``` 3322 | 3323 | ```css 3324 | .mix-blend-soft-light { mix-blend-mode: soft-light } 3325 | ``` 3326 | 3327 | ```css 3328 | .mix-blend-difference { mix-blend-mode: difference } 3329 | ``` 3330 | 3331 | ```css 3332 | .mix-blend-exclusion { mix-blend-mode: exclusion } 3333 | ``` 3334 | 3335 | ```css 3336 | .mix-blend-hue { mix-blend-mode: hue } 3337 | ``` 3338 | 3339 | ```css 3340 | .mix-blend-saturation { mix-blend-mode: saturation } 3341 | ``` 3342 | 3343 | ```css 3344 | .mix-blend-color { mix-blend-mode: color } 3345 | ``` 3346 | 3347 | ```css 3348 | .mix-blend-luminosity { mix-blend-mode: luminosity } 3349 | ``` 3350 | 3351 | ### background-blend-mode 3352 | 3353 | ```css 3354 | .bg-blend-normal { background-blend-mode: normal } 3355 | ``` 3356 | 3357 | ```css 3358 | .bg-blend-multiply { background-blend-mode: multiply } 3359 | ``` 3360 | 3361 | ```css 3362 | .bg-blend-screen { background-blend-mode: screen } 3363 | ``` 3364 | 3365 | ```css 3366 | .bg-blend-overlay { background-blend-mode: overlay } 3367 | ``` 3368 | 3369 | ```css 3370 | .bg-blend-darken { background-blend-mode: darken } 3371 | ``` 3372 | 3373 | ```css 3374 | .bg-blend-lighten { background-blend-mode: lighten } 3375 | ``` 3376 | 3377 | ```css 3378 | .bg-blend-color-dodge { background-blend-mode: color-dodge } 3379 | ``` 3380 | 3381 | ```css 3382 | .bg-blend-color-burn { background-blend-mode: color-burn } 3383 | ``` 3384 | 3385 | ```css 3386 | .bg-blend-hard-light { background-blend-mode: hard-light } 3387 | ``` 3388 | 3389 | ```css 3390 | .bg-blend-soft-light { background-blend-mode: soft-light } 3391 | ``` 3392 | 3393 | ```css 3394 | .bg-blend-difference { background-blend-mode: difference } 3395 | ``` 3396 | 3397 | ```css 3398 | .bg-blend-exclusion { background-blend-mode: exclusion } 3399 | ``` 3400 | 3401 | ```css 3402 | .bg-blend-hue { background-blend-mode: hue } 3403 | ``` 3404 | 3405 | ```css 3406 | .bg-blend-saturation { background-blend-mode: saturation } 3407 | ``` 3408 | 3409 | ```css 3410 | .bg-blend-color { background-blend-mode: color } 3411 | ``` 3412 | 3413 | ```css 3414 | .bg-blend-luminosity { background-blend-mode: luminosity } 3415 | ``` 3416 | 3417 | ### mask-clip 3418 | 3419 | ```css 3420 | .mask-clip-border { mask-clip: border-box } 3421 | ``` 3422 | 3423 | ```css 3424 | .mask-clip-padding { mask-clip: padding-box } 3425 | ``` 3426 | 3427 | ```css 3428 | .mask-clip-content { mask-clip: content-box } 3429 | ``` 3430 | 3431 | ```css 3432 | .mask-clip-fill { mask-clip: fill-box } 3433 | ``` 3434 | 3435 | ```css 3436 | .mask-clip-stroke { mask-clip: stroke-box } 3437 | ``` 3438 | 3439 | ```css 3440 | .mask-clip-view { mask-clip: view-box } 3441 | ``` 3442 | 3443 | ```css 3444 | .mask-no-clip { mask-clip: no-clip } 3445 | ``` 3446 | 3447 | ### mask-composite 3448 | 3449 | ```css 3450 | .mask-add { mask-composite: add } 3451 | ``` 3452 | 3453 | ```css 3454 | .mask-subtract { mask-composite: subtract } 3455 | ``` 3456 | 3457 | ```css 3458 | .mask-intersect { mask-composite: intersect } 3459 | ``` 3460 | 3461 | ```css 3462 | .mask-exclude { mask-composite: exclude } 3463 | ``` 3464 | 3465 | ### mask-image 3466 | 3467 | ```css 3468 | .mask-image-SUFFIX { mask-image: ... } 3469 | ``` 3470 | 3471 | ```css 3472 | .mask-none { mask-image: none } 3473 | ``` 3474 | 3475 | ### mask-mode 3476 | 3477 | ```css 3478 | .mask-alpha { mask-mode: alpha } 3479 | ``` 3480 | 3481 | ```css 3482 | .mask-luminance { mask-mode: luminance } 3483 | ``` 3484 | 3485 | ```css 3486 | .mask-match { mask-mode: match-source } 3487 | ``` 3488 | 3489 | ### mask-origin 3490 | 3491 | ```css 3492 | .mask-origin-border { mask-origin: border-box } 3493 | ``` 3494 | 3495 | ```css 3496 | .mask-origin-padding { mask-origin: padding-box } 3497 | ``` 3498 | 3499 | ```css 3500 | .mask-origin-content { mask-origin: content-box } 3501 | ``` 3502 | 3503 | ```css 3504 | .mask-origin-fill { mask-origin: fill-box } 3505 | ``` 3506 | 3507 | ```css 3508 | .mask-origin-stroke { mask-origin: stroke-box } 3509 | ``` 3510 | 3511 | ```css 3512 | .mask-origin-view { mask-origin: view-box } 3513 | ``` 3514 | 3515 | ### mask-position 3516 | 3517 | ```css 3518 | .mask-top-left { mask-position: top left } 3519 | ``` 3520 | 3521 | ```css 3522 | .mask-top { mask-position: top } 3523 | ``` 3524 | 3525 | ```css 3526 | .mask-top-right { mask-position: top right } 3527 | ``` 3528 | 3529 | ```css 3530 | .mask-left { mask-position: left } 3531 | ``` 3532 | 3533 | ```css 3534 | .mask-center { mask-position: center } 3535 | ``` 3536 | 3537 | ```css 3538 | .mask-right { mask-position: right } 3539 | ``` 3540 | 3541 | ```css 3542 | .mask-bottom-left { mask-position: bottom left } 3543 | ``` 3544 | 3545 | ```css 3546 | .mask-bottom { mask-position: bottom } 3547 | ``` 3548 | 3549 | ```css 3550 | .mask-bottom-right { mask-position: bottom right } 3551 | ``` 3552 | 3553 | ```css 3554 | .mask-position-SUFFIX { mask-position: ... } 3555 | ``` 3556 | 3557 | ### mask-repeat 3558 | 3559 | ```css 3560 | .mask-repeat { mask-repeat: repeat } 3561 | ``` 3562 | 3563 | ```css 3564 | .mask-no-repeat { mask-repeat: no-repeat } 3565 | ``` 3566 | 3567 | ```css 3568 | .mask-repeat-x { mask-repeat: repeat-x } 3569 | ``` 3570 | 3571 | ```css 3572 | .mask-repeat-y { mask-repeat: repeat-y } 3573 | ``` 3574 | 3575 | ```css 3576 | .mask-repeat-space { mask-repeat: space } 3577 | ``` 3578 | 3579 | ```css 3580 | .mask-repeat-round { mask-repeat: round } 3581 | ``` 3582 | 3583 | ### mask-size 3584 | 3585 | ```css 3586 | .mask-auto { mask-size: auto } 3587 | ``` 3588 | 3589 | ```css 3590 | .mask-cover { mask-size: cover } 3591 | ``` 3592 | 3593 | ```css 3594 | .mask-contain { mask-size: contain } 3595 | ``` 3596 | 3597 | ```css 3598 | .mask-size-SUFFIX { mask-size: ... } 3599 | ``` 3600 | 3601 | ### mask-type 3602 | 3603 | ```css 3604 | .mask-type-alpha { mask-type: alpha } 3605 | ``` 3606 | 3607 | ```css 3608 | .mask-type-luminance { mask-type: luminance } 3609 | ``` 3610 | 3611 | ## Filters 3612 | 3613 | ### filter 3614 | 3615 | ```css 3616 | .blur-xs { filter: blur(4px) } 3617 | ``` 3618 | 3619 | ```css 3620 | .blur-sm { filter: blur(8px) } 3621 | ``` 3622 | 3623 | ```css 3624 | .blur-md { filter: blur(12px) } 3625 | ``` 3626 | 3627 | ```css 3628 | .blur-lg { filter: blur(16px) } 3629 | ``` 3630 | 3631 | ```css 3632 | .blur-xl { filter: blur(24px) } 3633 | ``` 3634 | 3635 | ```css 3636 | .blur-2xl { filter: blur(40px) } 3637 | ``` 3638 | 3639 | ```css 3640 | .blur-3xl { filter: blur(64px) } 3641 | ``` 3642 | 3643 | ```css 3644 | .blur-none { filter: none } 3645 | ``` 3646 | 3647 | ```css 3648 | .brightness-0 { filter: brightness(0%) } 3649 | ``` 3650 | 3651 | ```css 3652 | .brightness-50 { filter: brightness(50%) } 3653 | ``` 3654 | 3655 | ```css 3656 | .brightness-75 { filter: brightness(75%) } 3657 | ``` 3658 | 3659 | ```css 3660 | .brightness-90 { filter: brightness(90%) } 3661 | ``` 3662 | 3663 | ```css 3664 | .brightness-95 { filter: brightness(95%) } 3665 | ``` 3666 | 3667 | ```css 3668 | .brightness-100 { filter: brightness(100%) } 3669 | ``` 3670 | 3671 | ```css 3672 | .brightness-105 { filter: brightness(105%) } 3673 | ``` 3674 | 3675 | ```css 3676 | .brightness-110 { filter: brightness(110%) } 3677 | ``` 3678 | 3679 | ```css 3680 | .brightness-125 { filter: brightness(125%) } 3681 | ``` 3682 | 3683 | ```css 3684 | .brightness-150 { filter: brightness(150%) } 3685 | ``` 3686 | 3687 | ```css 3688 | .brightness-200 { filter: brightness(200%) } 3689 | ``` 3690 | 3691 | ```css 3692 | .contrast-0 { filter: contrast(0%) } 3693 | ``` 3694 | 3695 | ```css 3696 | .contrast-50 { filter: contrast(50%) } 3697 | ``` 3698 | 3699 | ```css 3700 | .contrast-75 { filter: contrast(75%) } 3701 | ``` 3702 | 3703 | ```css 3704 | .contrast-100 { filter: contrast(100%) } 3705 | ``` 3706 | 3707 | ```css 3708 | .contrast-125 { filter: contrast(125%) } 3709 | ``` 3710 | 3711 | ```css 3712 | .contrast-150 { filter: contrast(150%) } 3713 | ``` 3714 | 3715 | ```css 3716 | .contrast-200 { filter: contrast(200%) } 3717 | ``` 3718 | 3719 | ```css 3720 | .drop-shadow-xs { filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) } 3721 | ``` 3722 | 3723 | ```css 3724 | .drop-shadow-sm { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.15)) } 3725 | ``` 3726 | 3727 | ```css 3728 | .drop-shadow-md { filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.12)) } 3729 | ``` 3730 | 3731 | ```css 3732 | .drop-shadow-lg { filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.15)) } 3733 | ``` 3734 | 3735 | ```css 3736 | .drop-shadow-xl { filter: drop-shadow(0 9px 7px rgb(0 0 0 / 0.1)) } 3737 | ``` 3738 | 3739 | ```css 3740 | .drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)) } 3741 | ``` 3742 | 3743 | ```css 3744 | .drop-shadow-none { filter: drop-shadow(0 0 rgba(0, 0, 0, 0)) } 3745 | ``` 3746 | 3747 | ```css 3748 | .grayscale { filter: grayscale(100%) } 3749 | ``` 3750 | 3751 | ```css 3752 | .grayscale-0 { filter: grayscale(0) } 3753 | ``` 3754 | 3755 | ```css 3756 | .hue-rotate-0 { filter: hue-rotate(0deg) } 3757 | ``` 3758 | 3759 | ```css 3760 | .hue-rotate-15 { filter: hue-rotate(15deg) } 3761 | ``` 3762 | 3763 | ```css 3764 | .hue-rotate-30 { filter: hue-rotate(30deg) } 3765 | ``` 3766 | 3767 | ```css 3768 | .hue-rotate-60 { filter: hue-rotate(60deg) } 3769 | ``` 3770 | 3771 | ```css 3772 | .hue-rotate-90 { filter: hue-rotate(90deg) } 3773 | ``` 3774 | 3775 | ```css 3776 | .hue-rotate-180 { filter: hue-rotate(180deg) } 3777 | ``` 3778 | 3779 | ```css 3780 | .-hue-rotate-0 { filter: hue-rotate(-0deg) } 3781 | ``` 3782 | 3783 | ```css 3784 | .-hue-rotate-15 { filter: hue-rotate(-15deg) } 3785 | ``` 3786 | 3787 | ```css 3788 | .-hue-rotate-30 { filter: hue-rotate(-30deg) } 3789 | ``` 3790 | 3791 | ```css 3792 | .-hue-rotate-60 { filter: hue-rotate(-60deg) } 3793 | ``` 3794 | 3795 | ```css 3796 | .-hue-rotate-90 { filter: hue-rotate(-90deg) } 3797 | ``` 3798 | 3799 | ```css 3800 | .-hue-rotate-180 { filter: hue-rotate(-180deg) } 3801 | ``` 3802 | 3803 | ```css 3804 | .invert { filter: sepia(100%) } 3805 | ``` 3806 | 3807 | ```css 3808 | .invert-0 { filter: sepia(0) } 3809 | ``` 3810 | 3811 | ```css 3812 | .saturate-0 { filter: saturate(0%) } 3813 | ``` 3814 | 3815 | ```css 3816 | .saturate-50 { filter: saturate(50%) } 3817 | ``` 3818 | 3819 | ```css 3820 | .saturate-75 { filter: saturate(75%) } 3821 | ``` 3822 | 3823 | ```css 3824 | .saturate-100 { filter: saturate(100%) } 3825 | ``` 3826 | 3827 | ```css 3828 | .saturate-150 { filter: saturate(150%) } 3829 | ``` 3830 | 3831 | ```css 3832 | .saturate-200 { filter: saturate(200%) } 3833 | ``` 3834 | 3835 | ```css 3836 | .filter-none { filter: none } 3837 | ``` 3838 | 3839 | ### backdrop-filter 3840 | 3841 | ```css 3842 | .backdrop-blur-xs { backdrop-filter: blur(4px) } 3843 | ``` 3844 | 3845 | ```css 3846 | .backdrop-blur-sm { backdrop-filter: blur(8px) } 3847 | ``` 3848 | 3849 | ```css 3850 | .backdrop-blur-md { backdrop-filter: blur(12px) } 3851 | ``` 3852 | 3853 | ```css 3854 | .backdrop-blur-lg { backdrop-filter: blur(16px) } 3855 | ``` 3856 | 3857 | ```css 3858 | .backdrop-blur-xl { backdrop-filter: blur(24px) } 3859 | ``` 3860 | 3861 | ```css 3862 | .backdrop-blur-2xl { backdrop-filter: blur(40px) } 3863 | ``` 3864 | 3865 | ```css 3866 | .backdrop-blur-3xl { backdrop-filter: blur(64px) } 3867 | ``` 3868 | 3869 | ```css 3870 | .backdrop-blur-none { backdrop-filter: none } 3871 | ``` 3872 | 3873 | ```css 3874 | .backdrop-brightness-0 { backdrop-filter: brightness(0%) } 3875 | ``` 3876 | 3877 | ```css 3878 | .backdrop-brightness-50 { backdrop-filter: brightness(50%) } 3879 | ``` 3880 | 3881 | ```css 3882 | .backdrop-brightness-75 { backdrop-filter: brightness(75%) } 3883 | ``` 3884 | 3885 | ```css 3886 | .backdrop-brightness-90 { backdrop-filter: brightness(90%) } 3887 | ``` 3888 | 3889 | ```css 3890 | .backdrop-brightness-95 { backdrop-filter: brightness(95%) } 3891 | ``` 3892 | 3893 | ```css 3894 | .backdrop-brightness-100 { backdrop-filter: brightness(100%) } 3895 | ``` 3896 | 3897 | ```css 3898 | .backdrop-brightness-105 { backdrop-filter: brightness(105%) } 3899 | ``` 3900 | 3901 | ```css 3902 | .backdrop-brightness-110 { backdrop-filter: brightness(110%) } 3903 | ``` 3904 | 3905 | ```css 3906 | .backdrop-brightness-125 { backdrop-filter: brightness(125%) } 3907 | ``` 3908 | 3909 | ```css 3910 | .backdrop-brightness-150 { backdrop-filter: brightness(150%) } 3911 | ``` 3912 | 3913 | ```css 3914 | .backdrop-brightness-200 { backdrop-filter: brightness(200%) } 3915 | ``` 3916 | 3917 | ```css 3918 | .backdrop-contrast-0 { backdrop-filter: contrast(0%) } 3919 | ``` 3920 | 3921 | ```css 3922 | .backdrop-contrast-50 { backdrop-filter: contrast(50%) } 3923 | ``` 3924 | 3925 | ```css 3926 | .backdrop-contrast-75 { backdrop-filter: contrast(75%) } 3927 | ``` 3928 | 3929 | ```css 3930 | .backdrop-contrast-100 { backdrop-filter: contrast(100%) } 3931 | ``` 3932 | 3933 | ```css 3934 | .backdrop-contrast-125 { backdrop-filter: contrast(125%) } 3935 | ``` 3936 | 3937 | ```css 3938 | .backdrop-contrast-150 { backdrop-filter: contrast(150%) } 3939 | ``` 3940 | 3941 | ```css 3942 | .backdrop-contrast-200 { backdrop-filter: contrast(200%) } 3943 | ``` 3944 | 3945 | ```css 3946 | .backdrop-grayscale { backdrop-filter: grayscale(100%) } 3947 | ``` 3948 | 3949 | ```css 3950 | .backdrop-grayscale-0 { backdrop-filter: grayscale(0) } 3951 | ``` 3952 | 3953 | ```css 3954 | .backdrop-hue-rotate-0 { backdrop-filter: hue-rotate(0deg) } 3955 | ``` 3956 | 3957 | ```css 3958 | .backdrop-hue-rotate-15 { backdrop-filter: hue-rotate(15deg) } 3959 | ``` 3960 | 3961 | ```css 3962 | .backdrop-hue-rotate-30 { backdrop-filter: hue-rotate(30deg) } 3963 | ``` 3964 | 3965 | ```css 3966 | .backdrop-hue-rotate-60 { backdrop-filter: hue-rotate(60deg) } 3967 | ``` 3968 | 3969 | ```css 3970 | .backdrop-hue-rotate-90 { backdrop-filter: hue-rotate(90deg) } 3971 | ``` 3972 | 3973 | ```css 3974 | .backdrop-hue-rotate-180 { backdrop-filter: hue-rotate(180deg) } 3975 | ``` 3976 | 3977 | ```css 3978 | .backdrop--hue-rotate-0 { backdrop-filter: hue-rotate(-0deg) } 3979 | ``` 3980 | 3981 | ```css 3982 | .backdrop--hue-rotate-15 { backdrop-filter: hue-rotate(-15deg) } 3983 | ``` 3984 | 3985 | ```css 3986 | .backdrop--hue-rotate-30 { backdrop-filter: hue-rotate(-30deg) } 3987 | ``` 3988 | 3989 | ```css 3990 | .backdrop--hue-rotate-60 { backdrop-filter: hue-rotate(-60deg) } 3991 | ``` 3992 | 3993 | ```css 3994 | .backdrop--hue-rotate-90 { backdrop-filter: hue-rotate(-90deg) } 3995 | ``` 3996 | 3997 | ```css 3998 | .backdrop--hue-rotate-180 { backdrop-filter: hue-rotate(-180deg) } 3999 | ``` 4000 | 4001 | ```css 4002 | .backdrop-invert { backdrop-filter: sepia(100%) } 4003 | ``` 4004 | 4005 | ```css 4006 | .backdrop-invert-0 { backdrop-filter: sepia(0) } 4007 | ``` 4008 | 4009 | ```css 4010 | .backdrop-opacity-0 { backdrop-filter: opacity(0) } 4011 | ``` 4012 | 4013 | ```css 4014 | .backdrop-opacity-5 { backdrop-filter: opacity(0.05) } 4015 | ``` 4016 | 4017 | ```css 4018 | .backdrop-opacity-10 { backdrop-filter: opacity(0.1) } 4019 | ``` 4020 | 4021 | ```css 4022 | .backdrop-opacity-20 { backdrop-filter: opacity(0.2) } 4023 | ``` 4024 | 4025 | ```css 4026 | .backdrop-opacity-25 { backdrop-filter: opacity(0.25) } 4027 | ``` 4028 | 4029 | ```css 4030 | .backdrop-opacity-30 { backdrop-filter: opacity(0.3) } 4031 | ``` 4032 | 4033 | ```css 4034 | .backdrop-opacity-40 { backdrop-filter: opacity(0.4) } 4035 | ``` 4036 | 4037 | ```css 4038 | .backdrop-opacity-50 { backdrop-filter: opacity(0.5) } 4039 | ``` 4040 | 4041 | ```css 4042 | .backdrop-opacity-60 { backdrop-filter: opacity(0.6) } 4043 | ``` 4044 | 4045 | ```css 4046 | .backdrop-opacity-70 { backdrop-filter: opacity(0.7) } 4047 | ``` 4048 | 4049 | ```css 4050 | .backdrop-opacity-75 { backdrop-filter: opacity(0.75) } 4051 | ``` 4052 | 4053 | ```css 4054 | .backdrop-opacity-80 { backdrop-filter: opacity(0.8) } 4055 | ``` 4056 | 4057 | ```css 4058 | .backdrop-opacity-90 { backdrop-filter: opacity(0.9) } 4059 | ``` 4060 | 4061 | ```css 4062 | .backdrop-opacity-95 { backdrop-filter: opacity(0.95) } 4063 | ``` 4064 | 4065 | ```css 4066 | .backdrop-opacity-100 { backdrop-filter: opacity(1) } 4067 | ``` 4068 | 4069 | ```css 4070 | .backdrop-filter-none { backdrop-filter: none } 4071 | ``` 4072 | 4073 | ## Tables 4074 | 4075 | ### border-collapse 4076 | 4077 | ```css 4078 | .border-collapse { border-collapse: collapse } 4079 | ``` 4080 | 4081 | ```css 4082 | .border-separate { border-collapse: separate } 4083 | ``` 4084 | 4085 | ### border-spacing 4086 | 4087 | ```css 4088 | .border-spacing-SUFFIX { border-spacing: ... } 4089 | ``` 4090 | 4091 | ### table-layout 4092 | 4093 | ```css 4094 | .table-auto { table-layout: auto } 4095 | ``` 4096 | 4097 | ```css 4098 | .table-fixed { table-layout: fixed } 4099 | ``` 4100 | 4101 | ### caption-side 4102 | 4103 | ```css 4104 | .caption-top { caption-side: top } 4105 | ``` 4106 | 4107 | ```css 4108 | .caption-bottom { caption-side: bottom } 4109 | ``` 4110 | 4111 | ## Transitions & Animations 4112 | 4113 | ### transition-property 4114 | 4115 | ```css 4116 | .transition { 4117 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; 4118 | transition-duration: 250ms 4119 | } 4120 | ``` 4121 | 4122 | ```css 4123 | .transition-all { 4124 | transition-property: all; 4125 | transition-duration: 250ms 4126 | } 4127 | ``` 4128 | 4129 | ```css 4130 | .transition-colors { 4131 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; 4132 | transition-duration: 250ms 4133 | } 4134 | ``` 4135 | 4136 | ```css 4137 | .transition-opacity { 4138 | transition-property: opacity; 4139 | transition-duration: 250ms 4140 | } 4141 | ``` 4142 | 4143 | ```css 4144 | .transition-shadow { 4145 | transition-property: box-shadow; 4146 | transition-duration: 250ms 4147 | } 4148 | ``` 4149 | 4150 | ```css 4151 | .transition-transform { 4152 | transition-property: transform; 4153 | transition-duration: 250ms 4154 | } 4155 | ``` 4156 | 4157 | ```css 4158 | .transition-none { transition-property: none } 4159 | ``` 4160 | 4161 | ### transition-behavior 4162 | 4163 | ```css 4164 | .transition-normal { transition-behavior: normal } 4165 | ``` 4166 | 4167 | ```css 4168 | .transition-discrete { transition-behavior: allow-discrete } 4169 | ``` 4170 | 4171 | ### transition-duration 4172 | 4173 | ```css 4174 | .duration-initial { transition-duration: initial } 4175 | ``` 4176 | 4177 | ```css 4178 | .duration-75 { transition-duration: 75ms } 4179 | ``` 4180 | 4181 | ```css 4182 | .duration-100 { transition-duration: 100ms } 4183 | ``` 4184 | 4185 | ```css 4186 | .duration-150 { transition-duration: 150ms } 4187 | ``` 4188 | 4189 | ```css 4190 | .duration-200 { transition-duration: 200ms } 4191 | ``` 4192 | 4193 | ```css 4194 | .duration-300 { transition-duration: 300ms } 4195 | ``` 4196 | 4197 | ```css 4198 | .duration-500 { transition-duration: 500ms } 4199 | ``` 4200 | 4201 | ```css 4202 | .duration-700 { transition-duration: 700ms } 4203 | ``` 4204 | 4205 | ```css 4206 | .duration-1000 { transition-duration: 1000ms } 4207 | ``` 4208 | 4209 | ### transition-timing-function 4210 | 4211 | ```css 4212 | .ease-linear { transition-timing-function: linear } 4213 | ``` 4214 | 4215 | ```css 4216 | .ease-in { transition-timing-function: ease-in } 4217 | ``` 4218 | 4219 | ```css 4220 | .ease-out { transition-timing-function: ease-out } 4221 | ``` 4222 | 4223 | ```css 4224 | .ease-in-out { transition-timing-function: ease-in-out } 4225 | ``` 4226 | 4227 | ```css 4228 | .ease-initial { transition-timing-function: initial } 4229 | ``` 4230 | 4231 | ### animation 4232 | 4233 | ```css 4234 | .animate-expand { animation: expand 250ms ease-in-out } 4235 | ``` 4236 | 4237 | ```css 4238 | .animate-toast { animation: toast 250ms ease-in-out } 4239 | ``` 4240 | 4241 | ```css 4242 | .animate-fade { animation: fade 250ms ease-in-out } 4243 | ``` 4244 | 4245 | ```css 4246 | .animate-none { animation: none } 4247 | ``` 4248 | 4249 | ## Transforms 4250 | 4251 | ### backface-visibility 4252 | 4253 | ```css 4254 | .blackface-visible { backface-visibility: visible } 4255 | ``` 4256 | 4257 | ```css 4258 | .blackface-hidden { backface-visibility: hidden } 4259 | ``` 4260 | 4261 | ### perspective 4262 | 4263 | ```css 4264 | .perspective-dramatic { perspective: 100px } 4265 | ``` 4266 | 4267 | ```css 4268 | .perspective-near { perspective: 300px } 4269 | ``` 4270 | 4271 | ```css 4272 | .perspective-normal { perspective: 500px } 4273 | ``` 4274 | 4275 | ```css 4276 | .perspective-midrange { perspective: 800px } 4277 | ``` 4278 | 4279 | ```css 4280 | .perspective-distant { perspective: 1200px } 4281 | ``` 4282 | 4283 | ```css 4284 | .perspective-none { perspective: none } 4285 | ``` 4286 | 4287 | ### perspective-origin 4288 | 4289 | ```css 4290 | .perspective-origin-center { perspective-origin: center } 4291 | ``` 4292 | 4293 | ```css 4294 | .perspective-origin-top { perspective-origin: top } 4295 | ``` 4296 | 4297 | ```css 4298 | .perspective-origin-top-right { perspective-origin: top right } 4299 | ``` 4300 | 4301 | ```css 4302 | .perspective-origin-right { perspective-origin: right } 4303 | ``` 4304 | 4305 | ```css 4306 | .perspective-origin-bottom-right { perspective-origin: bottom right } 4307 | ``` 4308 | 4309 | ```css 4310 | .perspective-origin-bottom { perspective-origin: bottom } 4311 | ``` 4312 | 4313 | ```css 4314 | .perspective-origin-bottom-left { perspective-origin: bottom left } 4315 | ``` 4316 | 4317 | ```css 4318 | .perspective-origin-left { perspective-origin: left } 4319 | ``` 4320 | 4321 | ```css 4322 | .perspective-origin-top-left { perspective-origin: top left } 4323 | ``` 4324 | 4325 | ```css 4326 | .perspective-origin-SUFFIX { perspective-origin: ... } 4327 | ``` 4328 | 4329 | ### rotate 4330 | 4331 | ```css 4332 | .rotate-0 { rotate: 0deg } 4333 | ``` 4334 | 4335 | ```css 4336 | .rotate-1 { rotate: 1deg } 4337 | ``` 4338 | 4339 | ```css 4340 | .rotate-2 { rotate: 2deg } 4341 | ``` 4342 | 4343 | ```css 4344 | .rotate-3 { rotate: 3deg } 4345 | ``` 4346 | 4347 | ```css 4348 | .rotate-6 { rotate: 6deg } 4349 | ``` 4350 | 4351 | ```css 4352 | .rotate-12 { rotate: 12deg } 4353 | ``` 4354 | 4355 | ```css 4356 | .rotate-45 { rotate: 45deg } 4357 | ``` 4358 | 4359 | ```css 4360 | .rotate-90 { rotate: 90deg } 4361 | ``` 4362 | 4363 | ```css 4364 | .rotate-180 { rotate: 180deg } 4365 | ``` 4366 | 4367 | ```css 4368 | .-rotate-0 { rotate: -0deg } 4369 | ``` 4370 | 4371 | ```css 4372 | .-rotate-1 { rotate: -1deg } 4373 | ``` 4374 | 4375 | ```css 4376 | .-rotate-2 { rotate: -2deg } 4377 | ``` 4378 | 4379 | ```css 4380 | .-rotate-3 { rotate: -3deg } 4381 | ``` 4382 | 4383 | ```css 4384 | .-rotate-6 { rotate: -6deg } 4385 | ``` 4386 | 4387 | ```css 4388 | .-rotate-12 { rotate: -12deg } 4389 | ``` 4390 | 4391 | ```css 4392 | .-rotate-45 { rotate: -45deg } 4393 | ``` 4394 | 4395 | ```css 4396 | .-rotate-90 { rotate: -90deg } 4397 | ``` 4398 | 4399 | ```css 4400 | .-rotate-180 { rotate: -180deg } 4401 | ``` 4402 | 4403 | ### transform 4404 | 4405 | ```css 4406 | .scale-0 { transform: scale(0) } 4407 | ``` 4408 | 4409 | ```css 4410 | .scale-50 { transform: scale(0.5) } 4411 | ``` 4412 | 4413 | ```css 4414 | .scale-75 { transform: scale(0.75) } 4415 | ``` 4416 | 4417 | ```css 4418 | .scale-90 { transform: scale(0.9) } 4419 | ``` 4420 | 4421 | ```css 4422 | .scale-95 { transform: scale(0.95) } 4423 | ``` 4424 | 4425 | ```css 4426 | .scale-100 { transform: scale(1) } 4427 | ``` 4428 | 4429 | ```css 4430 | .scale-105 { transform: scale(1.05) } 4431 | ``` 4432 | 4433 | ```css 4434 | .scale-110 { transform: scale(1.1) } 4435 | ``` 4436 | 4437 | ```css 4438 | .scale-125 { transform: scale(1.25) } 4439 | ``` 4440 | 4441 | ```css 4442 | .scale-150 { transform: scale(1.5) } 4443 | ``` 4444 | 4445 | ```css 4446 | .-scale-0 { transform: scale(-0) } 4447 | ``` 4448 | 4449 | ```css 4450 | .-scale-50 { transform: scale(-0.5) } 4451 | ``` 4452 | 4453 | ```css 4454 | .-scale-75 { transform: scale(-0.75) } 4455 | ``` 4456 | 4457 | ```css 4458 | .-scale-90 { transform: scale(-0.9) } 4459 | ``` 4460 | 4461 | ```css 4462 | .-scale-95 { transform: scale(-0.95) } 4463 | ``` 4464 | 4465 | ```css 4466 | .-scale-100 { transform: scale(-1) } 4467 | ``` 4468 | 4469 | ```css 4470 | .-scale-105 { transform: scale(-1.05) } 4471 | ``` 4472 | 4473 | ```css 4474 | .-scale-110 { transform: scale(-1.1) } 4475 | ``` 4476 | 4477 | ```css 4478 | .-scale-125 { transform: scale(-1.25) } 4479 | ``` 4480 | 4481 | ```css 4482 | .-scale-150 { transform: scale(-1.5) } 4483 | ``` 4484 | 4485 | ```css 4486 | .scale-x-0 { transform: scaleX(0) } 4487 | ``` 4488 | 4489 | ```css 4490 | .scale-x-50 { transform: scaleX(0.5) } 4491 | ``` 4492 | 4493 | ```css 4494 | .scale-x-75 { transform: scaleX(0.75) } 4495 | ``` 4496 | 4497 | ```css 4498 | .scale-x-90 { transform: scaleX(0.9) } 4499 | ``` 4500 | 4501 | ```css 4502 | .scale-x-95 { transform: scaleX(0.95) } 4503 | ``` 4504 | 4505 | ```css 4506 | .scale-x-100 { transform: scaleX(1) } 4507 | ``` 4508 | 4509 | ```css 4510 | .scale-x-105 { transform: scaleX(1.05) } 4511 | ``` 4512 | 4513 | ```css 4514 | .scale-x-110 { transform: scaleX(1.1) } 4515 | ``` 4516 | 4517 | ```css 4518 | .scale-x-125 { transform: scaleX(1.25) } 4519 | ``` 4520 | 4521 | ```css 4522 | .scale-x-150 { transform: scaleX(1.5) } 4523 | ``` 4524 | 4525 | ```css 4526 | .-scale-x-0 { transform: scaleX(-0) } 4527 | ``` 4528 | 4529 | ```css 4530 | .-scale-x-50 { transform: scaleX(-0.5) } 4531 | ``` 4532 | 4533 | ```css 4534 | .-scale-x-75 { transform: scaleX(-0.75) } 4535 | ``` 4536 | 4537 | ```css 4538 | .-scale-x-90 { transform: scaleX(-0.9) } 4539 | ``` 4540 | 4541 | ```css 4542 | .-scale-x-95 { transform: scaleX(-0.95) } 4543 | ``` 4544 | 4545 | ```css 4546 | .-scale-x-100 { transform: scaleX(-1) } 4547 | ``` 4548 | 4549 | ```css 4550 | .-scale-x-105 { transform: scaleX(-1.05) } 4551 | ``` 4552 | 4553 | ```css 4554 | .-scale-x-110 { transform: scaleX(-1.1) } 4555 | ``` 4556 | 4557 | ```css 4558 | .-scale-x-125 { transform: scaleX(-1.25) } 4559 | ``` 4560 | 4561 | ```css 4562 | .-scale-x-150 { transform: scaleX(-1.5) } 4563 | ``` 4564 | 4565 | ```css 4566 | .scale-y-0 { transform: scaleY(0) } 4567 | ``` 4568 | 4569 | ```css 4570 | .scale-y-50 { transform: scaleY(0.5) } 4571 | ``` 4572 | 4573 | ```css 4574 | .scale-y-75 { transform: scaleY(0.75) } 4575 | ``` 4576 | 4577 | ```css 4578 | .scale-y-90 { transform: scaleY(0.9) } 4579 | ``` 4580 | 4581 | ```css 4582 | .scale-y-95 { transform: scaleY(0.95) } 4583 | ``` 4584 | 4585 | ```css 4586 | .scale-y-100 { transform: scaleY(1) } 4587 | ``` 4588 | 4589 | ```css 4590 | .scale-y-105 { transform: scaleY(1.05) } 4591 | ``` 4592 | 4593 | ```css 4594 | .scale-y-110 { transform: scaleY(1.1) } 4595 | ``` 4596 | 4597 | ```css 4598 | .scale-y-125 { transform: scaleY(1.25) } 4599 | ``` 4600 | 4601 | ```css 4602 | .scale-y-150 { transform: scaleY(1.5) } 4603 | ``` 4604 | 4605 | ```css 4606 | .-scale-y-0 { transform: scaleY(-0) } 4607 | ``` 4608 | 4609 | ```css 4610 | .-scale-y-50 { transform: scaleY(-0.5) } 4611 | ``` 4612 | 4613 | ```css 4614 | .-scale-y-75 { transform: scaleY(-0.75) } 4615 | ``` 4616 | 4617 | ```css 4618 | .-scale-y-90 { transform: scaleY(-0.9) } 4619 | ``` 4620 | 4621 | ```css 4622 | .-scale-y-95 { transform: scaleY(-0.95) } 4623 | ``` 4624 | 4625 | ```css 4626 | .-scale-y-100 { transform: scaleY(-1) } 4627 | ``` 4628 | 4629 | ```css 4630 | .-scale-y-105 { transform: scaleY(-1.05) } 4631 | ``` 4632 | 4633 | ```css 4634 | .-scale-y-110 { transform: scaleY(-1.1) } 4635 | ``` 4636 | 4637 | ```css 4638 | .-scale-y-125 { transform: scaleY(-1.25) } 4639 | ``` 4640 | 4641 | ```css 4642 | .-scale-y-150 { transform: scaleY(-1.5) } 4643 | ``` 4644 | 4645 | ```css 4646 | .skew-0 { transform: skewX(0deg) skewY(0deg) } 4647 | ``` 4648 | 4649 | ```css 4650 | .skew-1 { transform: skewX(1deg) skewY(1deg) } 4651 | ``` 4652 | 4653 | ```css 4654 | .skew-2 { transform: skewX(2deg) skewY(2deg) } 4655 | ``` 4656 | 4657 | ```css 4658 | .skew-3 { transform: skewX(3deg) skewY(3deg) } 4659 | ``` 4660 | 4661 | ```css 4662 | .skew-6 { transform: skewX(6deg) skewY(6deg) } 4663 | ``` 4664 | 4665 | ```css 4666 | .skew-12 { transform: skewX(12deg) skewY(12deg) } 4667 | ``` 4668 | 4669 | ```css 4670 | .-skew-0 { transform: skewX(-0deg) skewY(-0deg) } 4671 | ``` 4672 | 4673 | ```css 4674 | .-skew-1 { transform: skewX(-1deg) skewY(-1deg) } 4675 | ``` 4676 | 4677 | ```css 4678 | .-skew-2 { transform: skewX(-2deg) skewY(-2deg) } 4679 | ``` 4680 | 4681 | ```css 4682 | .-skew-3 { transform: skewX(-3deg) skewY(-3deg) } 4683 | ``` 4684 | 4685 | ```css 4686 | .-skew-6 { transform: skewX(-6deg) skewY(-6deg) } 4687 | ``` 4688 | 4689 | ```css 4690 | .-skew-12 { transform: skewX(-12deg) skewY(-12deg) } 4691 | ``` 4692 | 4693 | ```css 4694 | .skew-x-0 { transform: skewX(0deg) } 4695 | ``` 4696 | 4697 | ```css 4698 | .skew-x-1 { transform: skewX(1deg) } 4699 | ``` 4700 | 4701 | ```css 4702 | .skew-x-2 { transform: skewX(2deg) } 4703 | ``` 4704 | 4705 | ```css 4706 | .skew-x-3 { transform: skewX(3deg) } 4707 | ``` 4708 | 4709 | ```css 4710 | .skew-x-6 { transform: skewX(6deg) } 4711 | ``` 4712 | 4713 | ```css 4714 | .skew-x-12 { transform: skewX(12deg) } 4715 | ``` 4716 | 4717 | ```css 4718 | .-skew-x-0 { transform: skewX(-0deg) } 4719 | ``` 4720 | 4721 | ```css 4722 | .-skew-x-1 { transform: skewX(-1deg) } 4723 | ``` 4724 | 4725 | ```css 4726 | .-skew-x-2 { transform: skewX(-2deg) } 4727 | ``` 4728 | 4729 | ```css 4730 | .-skew-x-3 { transform: skewX(-3deg) } 4731 | ``` 4732 | 4733 | ```css 4734 | .-skew-x-6 { transform: skewX(-6deg) } 4735 | ``` 4736 | 4737 | ```css 4738 | .-skew-x-12 { transform: skewX(-12deg) } 4739 | ``` 4740 | 4741 | ```css 4742 | .skew-y-0 { transform: skewY(0deg) } 4743 | ``` 4744 | 4745 | ```css 4746 | .skew-y-1 { transform: skewY(1deg) } 4747 | ``` 4748 | 4749 | ```css 4750 | .skew-y-2 { transform: skewY(2deg) } 4751 | ``` 4752 | 4753 | ```css 4754 | .skew-y-3 { transform: skewY(3deg) } 4755 | ``` 4756 | 4757 | ```css 4758 | .skew-y-6 { transform: skewY(6deg) } 4759 | ``` 4760 | 4761 | ```css 4762 | .skew-y-12 { transform: skewY(12deg) } 4763 | ``` 4764 | 4765 | ```css 4766 | .-skew-y-0 { transform: skewY(-0deg) } 4767 | ``` 4768 | 4769 | ```css 4770 | .-skew-y-1 { transform: skewY(-1deg) } 4771 | ``` 4772 | 4773 | ```css 4774 | .-skew-y-2 { transform: skewY(-2deg) } 4775 | ``` 4776 | 4777 | ```css 4778 | .-skew-y-3 { transform: skewY(-3deg) } 4779 | ``` 4780 | 4781 | ```css 4782 | .-skew-y-6 { transform: skewY(-6deg) } 4783 | ``` 4784 | 4785 | ```css 4786 | .-skew-y-12 { transform: skewY(-12deg) } 4787 | ``` 4788 | 4789 | ```css 4790 | .translate-x-SUFFIX { transform: translateX(...) } 4791 | ``` 4792 | 4793 | ```css 4794 | .translate-y-SUFFIX { transform: translateY(...) } 4795 | ``` 4796 | 4797 | ### transform-origin 4798 | 4799 | ```css 4800 | .origin-center { transform-origin: center } 4801 | ``` 4802 | 4803 | ```css 4804 | .origin-top { transform-origin: top } 4805 | ``` 4806 | 4807 | ```css 4808 | .origin-top-right { transform-origin: top right } 4809 | ``` 4810 | 4811 | ```css 4812 | .origin-right { transform-origin: right } 4813 | ``` 4814 | 4815 | ```css 4816 | .origin-bottom-right { transform-origin: bottom right } 4817 | ``` 4818 | 4819 | ```css 4820 | .origin-bottom { transform-origin: bottom } 4821 | ``` 4822 | 4823 | ```css 4824 | .origin-bottom-left { transform-origin: bottom left } 4825 | ``` 4826 | 4827 | ```css 4828 | .origin-left { transform-origin: left } 4829 | ``` 4830 | 4831 | ```css 4832 | .origin-top-left { transform-origin: top left } 4833 | ``` 4834 | 4835 | ### transform-style 4836 | 4837 | ```css 4838 | .transform-3d { transform-style: preserve-3d } 4839 | ``` 4840 | 4841 | ```css 4842 | .transform-flat { transform-style: flat } 4843 | ``` 4844 | 4845 | ## Interactivity 4846 | 4847 | ### accent-color 4848 | 4849 | ```css 4850 | .accent-COLOR { accent-color: oklch(...) } 4851 | ``` 4852 | 4853 | ### appearance 4854 | 4855 | ```css 4856 | .appearance-none { appearance: none } 4857 | ``` 4858 | 4859 | ```css 4860 | .appearance-auto { appearance: auto } 4861 | ``` 4862 | 4863 | ### caret-color 4864 | 4865 | ```css 4866 | .caret-COLOR { caret-color: oklch(...) } 4867 | ``` 4868 | 4869 | ### color-scheme 4870 | 4871 | ```css 4872 | .scheme-normal { color-scheme: normal } 4873 | ``` 4874 | 4875 | ```css 4876 | .scheme-dark { color-scheme: dark } 4877 | ``` 4878 | 4879 | ```css 4880 | .scheme-light { color-scheme: light } 4881 | ``` 4882 | 4883 | ```css 4884 | .scheme-light-dark { color-scheme: light dark } 4885 | ``` 4886 | 4887 | ```css 4888 | .scheme-only-dark { color-scheme: only dark } 4889 | ``` 4890 | 4891 | ```css 4892 | .scheme-only-light { color-scheme: only light } 4893 | ``` 4894 | 4895 | ### cursor 4896 | 4897 | ```css 4898 | .cursor-auto { cursor: auto } 4899 | ``` 4900 | 4901 | ```css 4902 | .cursor-default { cursor: default } 4903 | ``` 4904 | 4905 | ```css 4906 | .cursor-pointer { cursor: pointer } 4907 | ``` 4908 | 4909 | ```css 4910 | .cursor-wait { cursor: wait } 4911 | ``` 4912 | 4913 | ```css 4914 | .cursor-text { cursor: text } 4915 | ``` 4916 | 4917 | ```css 4918 | .cursor-move { cursor: move } 4919 | ``` 4920 | 4921 | ```css 4922 | .cursor-not-allowed { cursor: not-allowed } 4923 | ``` 4924 | 4925 | ### field-sizing 4926 | 4927 | ```css 4928 | .field-sizing-fixed { field-sizing: fixed } 4929 | ``` 4930 | 4931 | ```css 4932 | .field-sizing-content { field-sizing: content } 4933 | ``` 4934 | 4935 | ### pointer-events 4936 | 4937 | ```css 4938 | .pointer-events-none { pointer-events: none } 4939 | ``` 4940 | 4941 | ```css 4942 | .pointer-events-auto { pointer-events: auto } 4943 | ``` 4944 | 4945 | ### resize 4946 | 4947 | ```css 4948 | .resize-none { resize: none } 4949 | ``` 4950 | 4951 | ```css 4952 | .resize-x { resize: horizontal } 4953 | ``` 4954 | 4955 | ```css 4956 | .resize-y { resize: vertical } 4957 | ``` 4958 | 4959 | ```css 4960 | .resize-both { resize: both } 4961 | ``` 4962 | 4963 | ### scroll-behavior 4964 | 4965 | ```css 4966 | .scroll-auto { scroll-behavior: auto } 4967 | ``` 4968 | 4969 | ```css 4970 | .scroll-smooth { scroll-behavior: smooth } 4971 | ``` 4972 | 4973 | ### scroll-margin 4974 | 4975 | ```css 4976 | .scroll-m-SUFFIX { scroll-margin: ... } 4977 | ``` 4978 | 4979 | ### scroll-padding 4980 | 4981 | ```css 4982 | .scroll-p-SUFFIX { scroll-padding: ... } 4983 | ``` 4984 | 4985 | ### scroll-snap-align 4986 | 4987 | ```css 4988 | .snap-start { scroll-snap-align: start } 4989 | ``` 4990 | 4991 | ```css 4992 | .snap-end { scroll-snap-align: end } 4993 | ``` 4994 | 4995 | ```css 4996 | .snap-center { scroll-snap-align: center } 4997 | ``` 4998 | 4999 | ```css 5000 | .snap-align-none { scroll-snap-align: none } 5001 | ``` 5002 | 5003 | ### scroll-snap-stop 5004 | 5005 | ```css 5006 | .snap-stop-normal { scroll-snap-stop: normal } 5007 | ``` 5008 | 5009 | ```css 5010 | .snap-stop-always { scroll-snap-stop: always } 5011 | ``` 5012 | 5013 | ### scroll-snap-type 5014 | 5015 | ```css 5016 | .snap-none { scroll-snap-type: none } 5017 | ``` 5018 | 5019 | ```css 5020 | .snap-x { scroll-snap-type: x mandatory } 5021 | ``` 5022 | 5023 | ```css 5024 | .snap-y { scroll-snap-type: y proximity } 5025 | ``` 5026 | 5027 | ```css 5028 | .snap-both { scroll-snap-type: both proximity } 5029 | ``` 5030 | 5031 | ### touch-action 5032 | 5033 | ```css 5034 | .touch-auto { touch-action: auto } 5035 | ``` 5036 | 5037 | ```css 5038 | .touch-none { touch-action: none } 5039 | ``` 5040 | 5041 | ```css 5042 | .touch-pan-x { touch-action: pan-x } 5043 | ``` 5044 | 5045 | ```css 5046 | .touch-pan-left { touch-action: pan-left } 5047 | ``` 5048 | 5049 | ```css 5050 | .touch-pan-right { touch-action: pan-right } 5051 | ``` 5052 | 5053 | ```css 5054 | .touch-pan-y { touch-action: pan-y } 5055 | ``` 5056 | 5057 | ```css 5058 | .touch-pan-up { touch-action: pan-up } 5059 | ``` 5060 | 5061 | ```css 5062 | .touch-pan-down { touch-action: pan-down } 5063 | ``` 5064 | 5065 | ```css 5066 | .touch-pinch-zoom { touch-action: pinch-zoom } 5067 | ``` 5068 | 5069 | ```css 5070 | .touch-manipulation { touch-action: manipulation } 5071 | ``` 5072 | 5073 | ### user-select 5074 | 5075 | ```css 5076 | .select-none { user-select: none } 5077 | ``` 5078 | 5079 | ```css 5080 | .select-text { user-select: text } 5081 | ``` 5082 | 5083 | ```css 5084 | .select-all { user-select: all } 5085 | ``` 5086 | 5087 | ```css 5088 | .select-auto { user-select: auto } 5089 | ``` 5090 | 5091 | ### will-change 5092 | 5093 | ```css 5094 | .will-change-auto { will-change: auto } 5095 | ``` 5096 | 5097 | ```css 5098 | .will-change-scroll { will-change: scroll-position } 5099 | ``` 5100 | 5101 | ```css 5102 | .will-change-contents { will-change: contents } 5103 | ``` 5104 | 5105 | ```css 5106 | .will-change-transform { will-change: transform } 5107 | ``` 5108 | 5109 | ## SVG 5110 | 5111 | ### fill 5112 | 5113 | ```css 5114 | .fill-COLOR { fill: oklch(...) } 5115 | ``` 5116 | 5117 | ### stroke 5118 | 5119 | ```css 5120 | .stroke-COLOR { stroke: oklch(...) } 5121 | ``` 5122 | 5123 | ### stroke-width 5124 | 5125 | ```css 5126 | .stroke-0 { stroke-width: 0 } 5127 | ``` 5128 | 5129 | ```css 5130 | .stroke-1 { stroke-width: 1 } 5131 | ``` 5132 | 5133 | ```css 5134 | .stroke-2 { stroke-width: 2 } 5135 | ``` 5136 | 5137 | ## Accessibility 5138 | 5139 | ### forced-color-adjust 5140 | 5141 | ```css 5142 | .forced-color-adjust-auto { forced-color-adjust: auto } 5143 | ``` 5144 | 5145 | ```css 5146 | .forced-color-adjust-none { forced-color-adjust: none } 5147 | ``` 5148 | --------------------------------------------------------------------------------

Hello, TWCSS!

9 | Welcome to TWCSS! 10 |

TWCSS

Zero setup

Library agnostic