├── .gitignore ├── README.md ├── build.js ├── index.js ├── metrics.json ├── package.json ├── tailwind.config.js └── test.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | package-lock.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tailwindcss-leading-trim 2 | 3 | leading trim utility classes and polyfill for tailwindcss 4 | 5 | 6 | 7 | ## what is leading-trim? 8 | 9 | 10 | 11 | 12 | ## config 13 | 14 | in tailwind.config.js 15 | 16 | ```js 17 | module.exports = { 18 | plugins: [require("tailwindcss-leading-trim")], 19 | theme: { 20 | fontFamily: { 21 | "source-sans": "Source Sans Pro", 22 | }, 23 | fontMetrics: { 24 | "Source Sans Pro": { 25 | capHeight: 660, 26 | ascent: 984, 27 | descent: -273, 28 | unitsPerEm: 1000, 29 | }, 30 | }, 31 | }, 32 | }; 33 | ``` 34 | 35 | font metrics are optional and will be automatically picked for fonts from google fonts 36 | 37 | easy web-based tool to extract font metrics from any font: https://seek-oss.github.io/capsize/ 38 | 39 | ## usage 40 | 41 | this plugin adds 3 utility classes: `.trim-start`, `.trim-end` and `.trim-both` 42 | 43 | **font-family must be explicitly set on the element or a parent element with a tailwind class** 44 | 45 | ## how the polyfill is implemented 46 | 47 | leading and font-family classes have a custom property added 48 | 49 | ```css 50 | 51 | .leading-normal { 52 | line-height: 1.5; 53 | --leading-offset: -0.25em 54 | } 55 | 56 | .font-source-sans { 57 | font-family: Source Sans Pro; 58 | --font-offset-start: -0.1955em; 59 | --font-offset-end: -0.1445em 60 | } 61 | 62 | ``` 63 | 64 | and the trim classes apply a negative margin to the element based on the font family and leading 65 | 66 | ```css 67 | 68 | .trim-both { 69 | margin-top: calc( var(--leading-offset) + var(--font-offset-start,0) ); 70 | margin-bottom: calc( var(--leading-offset) + var(--font-offset-end,0) ) 71 | } 72 | 73 | ``` 74 | 75 | ## future features? 76 | 77 | - more verbose option that uses pseudo-elements so as not to mess with the margin of elements 78 | - more docs and tooling 79 | - options for `text-edge` (edge-ex, edge-cap, others?) 80 | 81 | issues and pull requests are welcome and encouraged! -------------------------------------------------------------------------------- /build.js: -------------------------------------------------------------------------------- 1 | const { writeFile } = require("fs").promises; 2 | const config = require("postcss")([require("tailwindcss")]); 3 | (async () => { 4 | writeFile( 5 | "./test.css", 6 | ( 7 | await config.process("@tailwind utilities;", { 8 | from: undefined, 9 | }) 10 | ).css 11 | ); 12 | })(); 13 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const plugin = require("tailwindcss/plugin"); 2 | const { map, fromPairs, find, isPlainObject, get } = require("lodash"); 3 | 4 | const parser = require("postcss-selector-parser"); 5 | 6 | const escapeClassName = (className) => { 7 | const node = parser.className(); 8 | node.value = className; 9 | return get(node, "raws.value", node.value); 10 | }; 11 | 12 | const stripUnit = (string) => string.match(/[\d.]+/)[0]; 13 | 14 | const asClass = (name) => `.${escapeClassName(name)}`; 15 | 16 | const nameClass = (classPrefix, key) => { 17 | if (key === "DEFAULT") { 18 | return asClass(classPrefix); 19 | } 20 | 21 | if (key === "-") { 22 | return asClass(`-${classPrefix}`); 23 | } 24 | 25 | if (key.startsWith("-")) { 26 | return asClass(`-${classPrefix}${key}`); 27 | } 28 | 29 | return asClass(`${classPrefix}-${key}`); 30 | }; 31 | 32 | const offsetFromLineHeight = (value) => { 33 | const valueStripped = stripUnit(value); 34 | 35 | return valueStripped === value 36 | ? (Number(value) - 1) / -2 + "em" 37 | : `calc( (${value} - 1em) / -2)`; 38 | }; 39 | 40 | const fontMetricsList = require("./metrics.json"); 41 | 42 | module.exports = plugin( 43 | ({ addUtilities, e, theme, variants }) => { 44 | addUtilities({ 45 | ".trim-start": { 46 | "margin-top": 47 | "calc( var(--leading-offset,-.25em) + var(--font-offset-start,0em) )", 48 | }, 49 | ".trim-end": { 50 | "margin-bottom": 51 | "calc( var(--leading-offset,-.25em) + var(--font-offset-end,0em) )", 52 | }, 53 | ".trim-both": { 54 | "margin-top": 55 | "calc( var(--leading-offset,-.25em) + var(--font-offset-start,0em) )", 56 | "margin-bottom": 57 | "calc( var(--leading-offset,-.25em) + var(--font-offset-end,0em) )", 58 | }, 59 | }); 60 | 61 | const fontFamilyUtilities = fromPairs( 62 | map(theme("fontFamily"), (value, modifier) => { 63 | const preferedFont = Array.isArray(value) ? value[0] : value; 64 | const fontFamily = Array.isArray(value) ? value.join(", ") : value; 65 | 66 | const fontMetrics = 67 | theme("fontMetrics." + preferedFont) || 68 | find(fontMetricsList, { 69 | familyName: preferedFont, 70 | }); 71 | 72 | if (!fontMetrics) { 73 | console.log("can't find font metrics for font: " + preferedFont); 74 | return [ 75 | `.${e(`font-${modifier}`)}`, 76 | { 77 | "font-family": fontFamily, 78 | }, 79 | ]; 80 | } 81 | 82 | const { ascent, descent, unitsPerEm, capHeight } = fontMetrics; 83 | 84 | const foo = (ascent - descent - unitsPerEm) / 2; 85 | 86 | const offsetStart = (ascent - capHeight - foo) / -unitsPerEm + "em"; 87 | const offsetEnd = (foo + descent) / unitsPerEm + "em"; 88 | 89 | const ajust = unitsPerEm / capHeight + ""; 90 | 91 | return [ 92 | `.${e(`font-${modifier}`)}`, 93 | { 94 | "font-family": fontFamily, 95 | "--font-offset-start": offsetStart, 96 | "--font-offset-end": offsetEnd, 97 | "--font-adjust": ajust, 98 | }, 99 | ]; 100 | }) 101 | ); 102 | 103 | addUtilities(fontFamilyUtilities, variants("fontFamily")); 104 | 105 | const numericFontSizeUtilities = fromPairs( 106 | map(theme("spacing"), (value, modifier) => { 107 | return [ 108 | nameClass("text", modifier), 109 | { 110 | "font-size": `calc(${value} * var(--font-adjust,1))`, 111 | }, 112 | ]; 113 | }) 114 | ); 115 | 116 | addUtilities(numericFontSizeUtilities, variants("fontSize")); 117 | 118 | const fontSizeUtilities = fromPairs( 119 | map(theme("fontSize"), (value, modifier) => { 120 | const [fontSize, options] = Array.isArray(value) ? value : [value]; 121 | const { lineHeight, letterSpacing } = isPlainObject(options) 122 | ? options 123 | : { 124 | lineHeight: options, 125 | }; 126 | 127 | return [ 128 | nameClass("text", modifier), 129 | { 130 | "font-size": fontSize, 131 | ...(lineHeight === undefined 132 | ? {} 133 | : { 134 | "line-height": lineHeight, 135 | "--leading-offset": offsetFromLineHeight(lineHeight), 136 | }), 137 | ...(letterSpacing === undefined 138 | ? {} 139 | : { 140 | "letter-spacing": letterSpacing, 141 | }), 142 | }, 143 | ]; 144 | }) 145 | ); 146 | 147 | addUtilities(fontSizeUtilities, variants("fontSize")); 148 | 149 | const lineHeightUtilities = fromPairs( 150 | map(theme("lineHeight"), (value, modifier) => { 151 | return [ 152 | `.${e(`leading-${modifier}`)}`, 153 | { 154 | "line-height": value, 155 | "--leading-offset": offsetFromLineHeight(value), 156 | }, 157 | ]; 158 | }) 159 | ); 160 | 161 | addUtilities(lineHeightUtilities, variants("lineHeight")); 162 | }, 163 | { 164 | corePlugins: { 165 | fontFamily: false, 166 | fontSize: false, 167 | lineHeight: false, 168 | }, 169 | } 170 | ); 171 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-leading-trim", 3 | "version": "1.1.0", 4 | "description": "leading trim utility classes and polyfill for tailwindcss", 5 | "repository": "https://github.com/MathGeniusJodie/tailwindcss-leading-trim", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node build.js ; npx prettier --use-tabs --write ./*.js" 9 | }, 10 | "contributors": [ 11 | "Jodie " 12 | ], 13 | "license": "BSD0", 14 | "devDependencies": { 15 | "postcss": "^8.3.11", 16 | "tailwindcss": "^2.2.17", 17 | "tailwindcss-rtl": "^0.7.3" 18 | }, 19 | "dependencies": { 20 | "capsize": "^1.1.0", 21 | "lodash": "^4.17.20" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require("./index.js")], 3 | theme: { 4 | fontFamily: { 5 | "source-sans": "Source Sans Pro", 6 | }, 7 | fontMetrics: { 8 | "Source Sans Pro": { 9 | capHeight: 660, 10 | ascent: 984, 11 | descent: -273, 12 | unitsPerEm: 1000, 13 | }, 14 | }, 15 | }, 16 | corePlugins: [], 17 | }; 18 | -------------------------------------------------------------------------------- /test.css: -------------------------------------------------------------------------------- 1 | .trim-start { 2 | margin-top: calc( var(--leading-offset,-.25em) + var(--font-offset-start,0em) ) 3 | } 4 | 5 | .trim-end { 6 | margin-bottom: calc( var(--leading-offset,-.25em) + var(--font-offset-end,0em) ) 7 | } 8 | 9 | .trim-both { 10 | margin-top: calc( var(--leading-offset,-.25em) + var(--font-offset-start,0em) ); 11 | margin-bottom: calc( var(--leading-offset,-.25em) + var(--font-offset-end,0em) ) 12 | } 13 | 14 | .font-source-sans { 15 | font-family: Source Sans Pro; 16 | --font-offset-start: -0.1955em; 17 | --font-offset-end: -0.1445em; 18 | --font-adjust: 1.5151515151515151 19 | } 20 | 21 | .text-0 { 22 | font-size: calc(0px * var(--font-adjust,1)) 23 | } 24 | 25 | .text-1 { 26 | font-size: calc(0.25rem * var(--font-adjust,1)) 27 | } 28 | 29 | .text-2 { 30 | font-size: calc(0.5rem * var(--font-adjust,1)) 31 | } 32 | 33 | .text-3 { 34 | font-size: calc(0.75rem * var(--font-adjust,1)) 35 | } 36 | 37 | .text-4 { 38 | font-size: calc(1rem * var(--font-adjust,1)) 39 | } 40 | 41 | .text-5 { 42 | font-size: calc(1.25rem * var(--font-adjust,1)) 43 | } 44 | 45 | .text-6 { 46 | font-size: calc(1.5rem * var(--font-adjust,1)) 47 | } 48 | 49 | .text-7 { 50 | font-size: calc(1.75rem * var(--font-adjust,1)) 51 | } 52 | 53 | .text-8 { 54 | font-size: calc(2rem * var(--font-adjust,1)) 55 | } 56 | 57 | .text-9 { 58 | font-size: calc(2.25rem * var(--font-adjust,1)) 59 | } 60 | 61 | .text-10 { 62 | font-size: calc(2.5rem * var(--font-adjust,1)) 63 | } 64 | 65 | .text-11 { 66 | font-size: calc(2.75rem * var(--font-adjust,1)) 67 | } 68 | 69 | .text-12 { 70 | font-size: calc(3rem * var(--font-adjust,1)) 71 | } 72 | 73 | .text-14 { 74 | font-size: calc(3.5rem * var(--font-adjust,1)) 75 | } 76 | 77 | .text-16 { 78 | font-size: calc(4rem * var(--font-adjust,1)) 79 | } 80 | 81 | .text-20 { 82 | font-size: calc(5rem * var(--font-adjust,1)) 83 | } 84 | 85 | .text-24 { 86 | font-size: calc(6rem * var(--font-adjust,1)) 87 | } 88 | 89 | .text-28 { 90 | font-size: calc(7rem * var(--font-adjust,1)) 91 | } 92 | 93 | .text-32 { 94 | font-size: calc(8rem * var(--font-adjust,1)) 95 | } 96 | 97 | .text-36 { 98 | font-size: calc(9rem * var(--font-adjust,1)) 99 | } 100 | 101 | .text-40 { 102 | font-size: calc(10rem * var(--font-adjust,1)) 103 | } 104 | 105 | .text-44 { 106 | font-size: calc(11rem * var(--font-adjust,1)) 107 | } 108 | 109 | .text-48 { 110 | font-size: calc(12rem * var(--font-adjust,1)) 111 | } 112 | 113 | .text-52 { 114 | font-size: calc(13rem * var(--font-adjust,1)) 115 | } 116 | 117 | .text-56 { 118 | font-size: calc(14rem * var(--font-adjust,1)) 119 | } 120 | 121 | .text-60 { 122 | font-size: calc(15rem * var(--font-adjust,1)) 123 | } 124 | 125 | .text-64 { 126 | font-size: calc(16rem * var(--font-adjust,1)) 127 | } 128 | 129 | .text-72 { 130 | font-size: calc(18rem * var(--font-adjust,1)) 131 | } 132 | 133 | .text-80 { 134 | font-size: calc(20rem * var(--font-adjust,1)) 135 | } 136 | 137 | .text-96 { 138 | font-size: calc(24rem * var(--font-adjust,1)) 139 | } 140 | 141 | .text-px { 142 | font-size: calc(1px * var(--font-adjust,1)) 143 | } 144 | 145 | .text-0\.5 { 146 | font-size: calc(0.125rem * var(--font-adjust,1)) 147 | } 148 | 149 | .text-1\.5 { 150 | font-size: calc(0.375rem * var(--font-adjust,1)) 151 | } 152 | 153 | .text-2\.5 { 154 | font-size: calc(0.625rem * var(--font-adjust,1)) 155 | } 156 | 157 | .text-3\.5 { 158 | font-size: calc(0.875rem * var(--font-adjust,1)) 159 | } 160 | 161 | .text-xs { 162 | font-size: 0.75rem; 163 | line-height: 1rem; 164 | --leading-offset: calc( (1rem - 1em) / -2) 165 | } 166 | 167 | .text-sm { 168 | font-size: 0.875rem; 169 | line-height: 1.25rem; 170 | --leading-offset: calc( (1.25rem - 1em) / -2) 171 | } 172 | 173 | .text-base { 174 | font-size: 1rem; 175 | line-height: 1.5rem; 176 | --leading-offset: calc( (1.5rem - 1em) / -2) 177 | } 178 | 179 | .text-lg { 180 | font-size: 1.125rem; 181 | line-height: 1.75rem; 182 | --leading-offset: calc( (1.75rem - 1em) / -2) 183 | } 184 | 185 | .text-xl { 186 | font-size: 1.25rem; 187 | line-height: 1.75rem; 188 | --leading-offset: calc( (1.75rem - 1em) / -2) 189 | } 190 | 191 | .text-2xl { 192 | font-size: 1.5rem; 193 | line-height: 2rem; 194 | --leading-offset: calc( (2rem - 1em) / -2) 195 | } 196 | 197 | .text-3xl { 198 | font-size: 1.875rem; 199 | line-height: 2.25rem; 200 | --leading-offset: calc( (2.25rem - 1em) / -2) 201 | } 202 | 203 | .text-4xl { 204 | font-size: 2.25rem; 205 | line-height: 2.5rem; 206 | --leading-offset: calc( (2.5rem - 1em) / -2) 207 | } 208 | 209 | .text-5xl { 210 | font-size: 3rem; 211 | line-height: 1; 212 | --leading-offset: 0em 213 | } 214 | 215 | .text-6xl { 216 | font-size: 3.75rem; 217 | line-height: 1; 218 | --leading-offset: 0em 219 | } 220 | 221 | .text-7xl { 222 | font-size: 4.5rem; 223 | line-height: 1; 224 | --leading-offset: 0em 225 | } 226 | 227 | .text-8xl { 228 | font-size: 6rem; 229 | line-height: 1; 230 | --leading-offset: 0em 231 | } 232 | 233 | .text-9xl { 234 | font-size: 8rem; 235 | line-height: 1; 236 | --leading-offset: 0em 237 | } 238 | 239 | .leading-3 { 240 | line-height: .75rem; 241 | --leading-offset: calc( (.75rem - 1em) / -2) 242 | } 243 | 244 | .leading-4 { 245 | line-height: 1rem; 246 | --leading-offset: calc( (1rem - 1em) / -2) 247 | } 248 | 249 | .leading-5 { 250 | line-height: 1.25rem; 251 | --leading-offset: calc( (1.25rem - 1em) / -2) 252 | } 253 | 254 | .leading-6 { 255 | line-height: 1.5rem; 256 | --leading-offset: calc( (1.5rem - 1em) / -2) 257 | } 258 | 259 | .leading-7 { 260 | line-height: 1.75rem; 261 | --leading-offset: calc( (1.75rem - 1em) / -2) 262 | } 263 | 264 | .leading-8 { 265 | line-height: 2rem; 266 | --leading-offset: calc( (2rem - 1em) / -2) 267 | } 268 | 269 | .leading-9 { 270 | line-height: 2.25rem; 271 | --leading-offset: calc( (2.25rem - 1em) / -2) 272 | } 273 | 274 | .leading-10 { 275 | line-height: 2.5rem; 276 | --leading-offset: calc( (2.5rem - 1em) / -2) 277 | } 278 | 279 | .leading-none { 280 | line-height: 1; 281 | --leading-offset: 0em 282 | } 283 | 284 | .leading-tight { 285 | line-height: 1.25; 286 | --leading-offset: -0.125em 287 | } 288 | 289 | .leading-snug { 290 | line-height: 1.375; 291 | --leading-offset: -0.1875em 292 | } 293 | 294 | .leading-normal { 295 | line-height: 1.5; 296 | --leading-offset: -0.25em 297 | } 298 | 299 | .leading-relaxed { 300 | line-height: 1.625; 301 | --leading-offset: -0.3125em 302 | } 303 | 304 | .leading-loose { 305 | line-height: 2; 306 | --leading-offset: -0.5em 307 | } 308 | 309 | @media (min-width: 640px) { 310 | .sm\:font-source-sans { 311 | font-family: Source Sans Pro; 312 | --font-offset-start: -0.1955em; 313 | --font-offset-end: -0.1445em; 314 | --font-adjust: 1.5151515151515151 315 | } 316 | 317 | .sm\:text-0 { 318 | font-size: calc(0px * var(--font-adjust,1)) 319 | } 320 | 321 | .sm\:text-1 { 322 | font-size: calc(0.25rem * var(--font-adjust,1)) 323 | } 324 | 325 | .sm\:text-2 { 326 | font-size: calc(0.5rem * var(--font-adjust,1)) 327 | } 328 | 329 | .sm\:text-3 { 330 | font-size: calc(0.75rem * var(--font-adjust,1)) 331 | } 332 | 333 | .sm\:text-4 { 334 | font-size: calc(1rem * var(--font-adjust,1)) 335 | } 336 | 337 | .sm\:text-5 { 338 | font-size: calc(1.25rem * var(--font-adjust,1)) 339 | } 340 | 341 | .sm\:text-6 { 342 | font-size: calc(1.5rem * var(--font-adjust,1)) 343 | } 344 | 345 | .sm\:text-7 { 346 | font-size: calc(1.75rem * var(--font-adjust,1)) 347 | } 348 | 349 | .sm\:text-8 { 350 | font-size: calc(2rem * var(--font-adjust,1)) 351 | } 352 | 353 | .sm\:text-9 { 354 | font-size: calc(2.25rem * var(--font-adjust,1)) 355 | } 356 | 357 | .sm\:text-10 { 358 | font-size: calc(2.5rem * var(--font-adjust,1)) 359 | } 360 | 361 | .sm\:text-11 { 362 | font-size: calc(2.75rem * var(--font-adjust,1)) 363 | } 364 | 365 | .sm\:text-12 { 366 | font-size: calc(3rem * var(--font-adjust,1)) 367 | } 368 | 369 | .sm\:text-14 { 370 | font-size: calc(3.5rem * var(--font-adjust,1)) 371 | } 372 | 373 | .sm\:text-16 { 374 | font-size: calc(4rem * var(--font-adjust,1)) 375 | } 376 | 377 | .sm\:text-20 { 378 | font-size: calc(5rem * var(--font-adjust,1)) 379 | } 380 | 381 | .sm\:text-24 { 382 | font-size: calc(6rem * var(--font-adjust,1)) 383 | } 384 | 385 | .sm\:text-28 { 386 | font-size: calc(7rem * var(--font-adjust,1)) 387 | } 388 | 389 | .sm\:text-32 { 390 | font-size: calc(8rem * var(--font-adjust,1)) 391 | } 392 | 393 | .sm\:text-36 { 394 | font-size: calc(9rem * var(--font-adjust,1)) 395 | } 396 | 397 | .sm\:text-40 { 398 | font-size: calc(10rem * var(--font-adjust,1)) 399 | } 400 | 401 | .sm\:text-44 { 402 | font-size: calc(11rem * var(--font-adjust,1)) 403 | } 404 | 405 | .sm\:text-48 { 406 | font-size: calc(12rem * var(--font-adjust,1)) 407 | } 408 | 409 | .sm\:text-52 { 410 | font-size: calc(13rem * var(--font-adjust,1)) 411 | } 412 | 413 | .sm\:text-56 { 414 | font-size: calc(14rem * var(--font-adjust,1)) 415 | } 416 | 417 | .sm\:text-60 { 418 | font-size: calc(15rem * var(--font-adjust,1)) 419 | } 420 | 421 | .sm\:text-64 { 422 | font-size: calc(16rem * var(--font-adjust,1)) 423 | } 424 | 425 | .sm\:text-72 { 426 | font-size: calc(18rem * var(--font-adjust,1)) 427 | } 428 | 429 | .sm\:text-80 { 430 | font-size: calc(20rem * var(--font-adjust,1)) 431 | } 432 | 433 | .sm\:text-96 { 434 | font-size: calc(24rem * var(--font-adjust,1)) 435 | } 436 | 437 | .sm\:text-px { 438 | font-size: calc(1px * var(--font-adjust,1)) 439 | } 440 | 441 | .sm\:text-0\.5 { 442 | font-size: calc(0.125rem * var(--font-adjust,1)) 443 | } 444 | 445 | .sm\:text-1\.5 { 446 | font-size: calc(0.375rem * var(--font-adjust,1)) 447 | } 448 | 449 | .sm\:text-2\.5 { 450 | font-size: calc(0.625rem * var(--font-adjust,1)) 451 | } 452 | 453 | .sm\:text-3\.5 { 454 | font-size: calc(0.875rem * var(--font-adjust,1)) 455 | } 456 | 457 | .sm\:text-xs { 458 | font-size: 0.75rem; 459 | line-height: 1rem; 460 | --leading-offset: calc( (1rem - 1em) / -2) 461 | } 462 | 463 | .sm\:text-sm { 464 | font-size: 0.875rem; 465 | line-height: 1.25rem; 466 | --leading-offset: calc( (1.25rem - 1em) / -2) 467 | } 468 | 469 | .sm\:text-base { 470 | font-size: 1rem; 471 | line-height: 1.5rem; 472 | --leading-offset: calc( (1.5rem - 1em) / -2) 473 | } 474 | 475 | .sm\:text-lg { 476 | font-size: 1.125rem; 477 | line-height: 1.75rem; 478 | --leading-offset: calc( (1.75rem - 1em) / -2) 479 | } 480 | 481 | .sm\:text-xl { 482 | font-size: 1.25rem; 483 | line-height: 1.75rem; 484 | --leading-offset: calc( (1.75rem - 1em) / -2) 485 | } 486 | 487 | .sm\:text-2xl { 488 | font-size: 1.5rem; 489 | line-height: 2rem; 490 | --leading-offset: calc( (2rem - 1em) / -2) 491 | } 492 | 493 | .sm\:text-3xl { 494 | font-size: 1.875rem; 495 | line-height: 2.25rem; 496 | --leading-offset: calc( (2.25rem - 1em) / -2) 497 | } 498 | 499 | .sm\:text-4xl { 500 | font-size: 2.25rem; 501 | line-height: 2.5rem; 502 | --leading-offset: calc( (2.5rem - 1em) / -2) 503 | } 504 | 505 | .sm\:text-5xl { 506 | font-size: 3rem; 507 | line-height: 1; 508 | --leading-offset: 0em 509 | } 510 | 511 | .sm\:text-6xl { 512 | font-size: 3.75rem; 513 | line-height: 1; 514 | --leading-offset: 0em 515 | } 516 | 517 | .sm\:text-7xl { 518 | font-size: 4.5rem; 519 | line-height: 1; 520 | --leading-offset: 0em 521 | } 522 | 523 | .sm\:text-8xl { 524 | font-size: 6rem; 525 | line-height: 1; 526 | --leading-offset: 0em 527 | } 528 | 529 | .sm\:text-9xl { 530 | font-size: 8rem; 531 | line-height: 1; 532 | --leading-offset: 0em 533 | } 534 | 535 | .sm\:leading-3 { 536 | line-height: .75rem; 537 | --leading-offset: calc( (.75rem - 1em) / -2) 538 | } 539 | 540 | .sm\:leading-4 { 541 | line-height: 1rem; 542 | --leading-offset: calc( (1rem - 1em) / -2) 543 | } 544 | 545 | .sm\:leading-5 { 546 | line-height: 1.25rem; 547 | --leading-offset: calc( (1.25rem - 1em) / -2) 548 | } 549 | 550 | .sm\:leading-6 { 551 | line-height: 1.5rem; 552 | --leading-offset: calc( (1.5rem - 1em) / -2) 553 | } 554 | 555 | .sm\:leading-7 { 556 | line-height: 1.75rem; 557 | --leading-offset: calc( (1.75rem - 1em) / -2) 558 | } 559 | 560 | .sm\:leading-8 { 561 | line-height: 2rem; 562 | --leading-offset: calc( (2rem - 1em) / -2) 563 | } 564 | 565 | .sm\:leading-9 { 566 | line-height: 2.25rem; 567 | --leading-offset: calc( (2.25rem - 1em) / -2) 568 | } 569 | 570 | .sm\:leading-10 { 571 | line-height: 2.5rem; 572 | --leading-offset: calc( (2.5rem - 1em) / -2) 573 | } 574 | 575 | .sm\:leading-none { 576 | line-height: 1; 577 | --leading-offset: 0em 578 | } 579 | 580 | .sm\:leading-tight { 581 | line-height: 1.25; 582 | --leading-offset: -0.125em 583 | } 584 | 585 | .sm\:leading-snug { 586 | line-height: 1.375; 587 | --leading-offset: -0.1875em 588 | } 589 | 590 | .sm\:leading-normal { 591 | line-height: 1.5; 592 | --leading-offset: -0.25em 593 | } 594 | 595 | .sm\:leading-relaxed { 596 | line-height: 1.625; 597 | --leading-offset: -0.3125em 598 | } 599 | 600 | .sm\:leading-loose { 601 | line-height: 2; 602 | --leading-offset: -0.5em 603 | } 604 | } 605 | 606 | @media (min-width: 768px) { 607 | .md\:font-source-sans { 608 | font-family: Source Sans Pro; 609 | --font-offset-start: -0.1955em; 610 | --font-offset-end: -0.1445em; 611 | --font-adjust: 1.5151515151515151 612 | } 613 | 614 | .md\:text-0 { 615 | font-size: calc(0px * var(--font-adjust,1)) 616 | } 617 | 618 | .md\:text-1 { 619 | font-size: calc(0.25rem * var(--font-adjust,1)) 620 | } 621 | 622 | .md\:text-2 { 623 | font-size: calc(0.5rem * var(--font-adjust,1)) 624 | } 625 | 626 | .md\:text-3 { 627 | font-size: calc(0.75rem * var(--font-adjust,1)) 628 | } 629 | 630 | .md\:text-4 { 631 | font-size: calc(1rem * var(--font-adjust,1)) 632 | } 633 | 634 | .md\:text-5 { 635 | font-size: calc(1.25rem * var(--font-adjust,1)) 636 | } 637 | 638 | .md\:text-6 { 639 | font-size: calc(1.5rem * var(--font-adjust,1)) 640 | } 641 | 642 | .md\:text-7 { 643 | font-size: calc(1.75rem * var(--font-adjust,1)) 644 | } 645 | 646 | .md\:text-8 { 647 | font-size: calc(2rem * var(--font-adjust,1)) 648 | } 649 | 650 | .md\:text-9 { 651 | font-size: calc(2.25rem * var(--font-adjust,1)) 652 | } 653 | 654 | .md\:text-10 { 655 | font-size: calc(2.5rem * var(--font-adjust,1)) 656 | } 657 | 658 | .md\:text-11 { 659 | font-size: calc(2.75rem * var(--font-adjust,1)) 660 | } 661 | 662 | .md\:text-12 { 663 | font-size: calc(3rem * var(--font-adjust,1)) 664 | } 665 | 666 | .md\:text-14 { 667 | font-size: calc(3.5rem * var(--font-adjust,1)) 668 | } 669 | 670 | .md\:text-16 { 671 | font-size: calc(4rem * var(--font-adjust,1)) 672 | } 673 | 674 | .md\:text-20 { 675 | font-size: calc(5rem * var(--font-adjust,1)) 676 | } 677 | 678 | .md\:text-24 { 679 | font-size: calc(6rem * var(--font-adjust,1)) 680 | } 681 | 682 | .md\:text-28 { 683 | font-size: calc(7rem * var(--font-adjust,1)) 684 | } 685 | 686 | .md\:text-32 { 687 | font-size: calc(8rem * var(--font-adjust,1)) 688 | } 689 | 690 | .md\:text-36 { 691 | font-size: calc(9rem * var(--font-adjust,1)) 692 | } 693 | 694 | .md\:text-40 { 695 | font-size: calc(10rem * var(--font-adjust,1)) 696 | } 697 | 698 | .md\:text-44 { 699 | font-size: calc(11rem * var(--font-adjust,1)) 700 | } 701 | 702 | .md\:text-48 { 703 | font-size: calc(12rem * var(--font-adjust,1)) 704 | } 705 | 706 | .md\:text-52 { 707 | font-size: calc(13rem * var(--font-adjust,1)) 708 | } 709 | 710 | .md\:text-56 { 711 | font-size: calc(14rem * var(--font-adjust,1)) 712 | } 713 | 714 | .md\:text-60 { 715 | font-size: calc(15rem * var(--font-adjust,1)) 716 | } 717 | 718 | .md\:text-64 { 719 | font-size: calc(16rem * var(--font-adjust,1)) 720 | } 721 | 722 | .md\:text-72 { 723 | font-size: calc(18rem * var(--font-adjust,1)) 724 | } 725 | 726 | .md\:text-80 { 727 | font-size: calc(20rem * var(--font-adjust,1)) 728 | } 729 | 730 | .md\:text-96 { 731 | font-size: calc(24rem * var(--font-adjust,1)) 732 | } 733 | 734 | .md\:text-px { 735 | font-size: calc(1px * var(--font-adjust,1)) 736 | } 737 | 738 | .md\:text-0\.5 { 739 | font-size: calc(0.125rem * var(--font-adjust,1)) 740 | } 741 | 742 | .md\:text-1\.5 { 743 | font-size: calc(0.375rem * var(--font-adjust,1)) 744 | } 745 | 746 | .md\:text-2\.5 { 747 | font-size: calc(0.625rem * var(--font-adjust,1)) 748 | } 749 | 750 | .md\:text-3\.5 { 751 | font-size: calc(0.875rem * var(--font-adjust,1)) 752 | } 753 | 754 | .md\:text-xs { 755 | font-size: 0.75rem; 756 | line-height: 1rem; 757 | --leading-offset: calc( (1rem - 1em) / -2) 758 | } 759 | 760 | .md\:text-sm { 761 | font-size: 0.875rem; 762 | line-height: 1.25rem; 763 | --leading-offset: calc( (1.25rem - 1em) / -2) 764 | } 765 | 766 | .md\:text-base { 767 | font-size: 1rem; 768 | line-height: 1.5rem; 769 | --leading-offset: calc( (1.5rem - 1em) / -2) 770 | } 771 | 772 | .md\:text-lg { 773 | font-size: 1.125rem; 774 | line-height: 1.75rem; 775 | --leading-offset: calc( (1.75rem - 1em) / -2) 776 | } 777 | 778 | .md\:text-xl { 779 | font-size: 1.25rem; 780 | line-height: 1.75rem; 781 | --leading-offset: calc( (1.75rem - 1em) / -2) 782 | } 783 | 784 | .md\:text-2xl { 785 | font-size: 1.5rem; 786 | line-height: 2rem; 787 | --leading-offset: calc( (2rem - 1em) / -2) 788 | } 789 | 790 | .md\:text-3xl { 791 | font-size: 1.875rem; 792 | line-height: 2.25rem; 793 | --leading-offset: calc( (2.25rem - 1em) / -2) 794 | } 795 | 796 | .md\:text-4xl { 797 | font-size: 2.25rem; 798 | line-height: 2.5rem; 799 | --leading-offset: calc( (2.5rem - 1em) / -2) 800 | } 801 | 802 | .md\:text-5xl { 803 | font-size: 3rem; 804 | line-height: 1; 805 | --leading-offset: 0em 806 | } 807 | 808 | .md\:text-6xl { 809 | font-size: 3.75rem; 810 | line-height: 1; 811 | --leading-offset: 0em 812 | } 813 | 814 | .md\:text-7xl { 815 | font-size: 4.5rem; 816 | line-height: 1; 817 | --leading-offset: 0em 818 | } 819 | 820 | .md\:text-8xl { 821 | font-size: 6rem; 822 | line-height: 1; 823 | --leading-offset: 0em 824 | } 825 | 826 | .md\:text-9xl { 827 | font-size: 8rem; 828 | line-height: 1; 829 | --leading-offset: 0em 830 | } 831 | 832 | .md\:leading-3 { 833 | line-height: .75rem; 834 | --leading-offset: calc( (.75rem - 1em) / -2) 835 | } 836 | 837 | .md\:leading-4 { 838 | line-height: 1rem; 839 | --leading-offset: calc( (1rem - 1em) / -2) 840 | } 841 | 842 | .md\:leading-5 { 843 | line-height: 1.25rem; 844 | --leading-offset: calc( (1.25rem - 1em) / -2) 845 | } 846 | 847 | .md\:leading-6 { 848 | line-height: 1.5rem; 849 | --leading-offset: calc( (1.5rem - 1em) / -2) 850 | } 851 | 852 | .md\:leading-7 { 853 | line-height: 1.75rem; 854 | --leading-offset: calc( (1.75rem - 1em) / -2) 855 | } 856 | 857 | .md\:leading-8 { 858 | line-height: 2rem; 859 | --leading-offset: calc( (2rem - 1em) / -2) 860 | } 861 | 862 | .md\:leading-9 { 863 | line-height: 2.25rem; 864 | --leading-offset: calc( (2.25rem - 1em) / -2) 865 | } 866 | 867 | .md\:leading-10 { 868 | line-height: 2.5rem; 869 | --leading-offset: calc( (2.5rem - 1em) / -2) 870 | } 871 | 872 | .md\:leading-none { 873 | line-height: 1; 874 | --leading-offset: 0em 875 | } 876 | 877 | .md\:leading-tight { 878 | line-height: 1.25; 879 | --leading-offset: -0.125em 880 | } 881 | 882 | .md\:leading-snug { 883 | line-height: 1.375; 884 | --leading-offset: -0.1875em 885 | } 886 | 887 | .md\:leading-normal { 888 | line-height: 1.5; 889 | --leading-offset: -0.25em 890 | } 891 | 892 | .md\:leading-relaxed { 893 | line-height: 1.625; 894 | --leading-offset: -0.3125em 895 | } 896 | 897 | .md\:leading-loose { 898 | line-height: 2; 899 | --leading-offset: -0.5em 900 | } 901 | } 902 | 903 | @media (min-width: 1024px) { 904 | .lg\:font-source-sans { 905 | font-family: Source Sans Pro; 906 | --font-offset-start: -0.1955em; 907 | --font-offset-end: -0.1445em; 908 | --font-adjust: 1.5151515151515151 909 | } 910 | 911 | .lg\:text-0 { 912 | font-size: calc(0px * var(--font-adjust,1)) 913 | } 914 | 915 | .lg\:text-1 { 916 | font-size: calc(0.25rem * var(--font-adjust,1)) 917 | } 918 | 919 | .lg\:text-2 { 920 | font-size: calc(0.5rem * var(--font-adjust,1)) 921 | } 922 | 923 | .lg\:text-3 { 924 | font-size: calc(0.75rem * var(--font-adjust,1)) 925 | } 926 | 927 | .lg\:text-4 { 928 | font-size: calc(1rem * var(--font-adjust,1)) 929 | } 930 | 931 | .lg\:text-5 { 932 | font-size: calc(1.25rem * var(--font-adjust,1)) 933 | } 934 | 935 | .lg\:text-6 { 936 | font-size: calc(1.5rem * var(--font-adjust,1)) 937 | } 938 | 939 | .lg\:text-7 { 940 | font-size: calc(1.75rem * var(--font-adjust,1)) 941 | } 942 | 943 | .lg\:text-8 { 944 | font-size: calc(2rem * var(--font-adjust,1)) 945 | } 946 | 947 | .lg\:text-9 { 948 | font-size: calc(2.25rem * var(--font-adjust,1)) 949 | } 950 | 951 | .lg\:text-10 { 952 | font-size: calc(2.5rem * var(--font-adjust,1)) 953 | } 954 | 955 | .lg\:text-11 { 956 | font-size: calc(2.75rem * var(--font-adjust,1)) 957 | } 958 | 959 | .lg\:text-12 { 960 | font-size: calc(3rem * var(--font-adjust,1)) 961 | } 962 | 963 | .lg\:text-14 { 964 | font-size: calc(3.5rem * var(--font-adjust,1)) 965 | } 966 | 967 | .lg\:text-16 { 968 | font-size: calc(4rem * var(--font-adjust,1)) 969 | } 970 | 971 | .lg\:text-20 { 972 | font-size: calc(5rem * var(--font-adjust,1)) 973 | } 974 | 975 | .lg\:text-24 { 976 | font-size: calc(6rem * var(--font-adjust,1)) 977 | } 978 | 979 | .lg\:text-28 { 980 | font-size: calc(7rem * var(--font-adjust,1)) 981 | } 982 | 983 | .lg\:text-32 { 984 | font-size: calc(8rem * var(--font-adjust,1)) 985 | } 986 | 987 | .lg\:text-36 { 988 | font-size: calc(9rem * var(--font-adjust,1)) 989 | } 990 | 991 | .lg\:text-40 { 992 | font-size: calc(10rem * var(--font-adjust,1)) 993 | } 994 | 995 | .lg\:text-44 { 996 | font-size: calc(11rem * var(--font-adjust,1)) 997 | } 998 | 999 | .lg\:text-48 { 1000 | font-size: calc(12rem * var(--font-adjust,1)) 1001 | } 1002 | 1003 | .lg\:text-52 { 1004 | font-size: calc(13rem * var(--font-adjust,1)) 1005 | } 1006 | 1007 | .lg\:text-56 { 1008 | font-size: calc(14rem * var(--font-adjust,1)) 1009 | } 1010 | 1011 | .lg\:text-60 { 1012 | font-size: calc(15rem * var(--font-adjust,1)) 1013 | } 1014 | 1015 | .lg\:text-64 { 1016 | font-size: calc(16rem * var(--font-adjust,1)) 1017 | } 1018 | 1019 | .lg\:text-72 { 1020 | font-size: calc(18rem * var(--font-adjust,1)) 1021 | } 1022 | 1023 | .lg\:text-80 { 1024 | font-size: calc(20rem * var(--font-adjust,1)) 1025 | } 1026 | 1027 | .lg\:text-96 { 1028 | font-size: calc(24rem * var(--font-adjust,1)) 1029 | } 1030 | 1031 | .lg\:text-px { 1032 | font-size: calc(1px * var(--font-adjust,1)) 1033 | } 1034 | 1035 | .lg\:text-0\.5 { 1036 | font-size: calc(0.125rem * var(--font-adjust,1)) 1037 | } 1038 | 1039 | .lg\:text-1\.5 { 1040 | font-size: calc(0.375rem * var(--font-adjust,1)) 1041 | } 1042 | 1043 | .lg\:text-2\.5 { 1044 | font-size: calc(0.625rem * var(--font-adjust,1)) 1045 | } 1046 | 1047 | .lg\:text-3\.5 { 1048 | font-size: calc(0.875rem * var(--font-adjust,1)) 1049 | } 1050 | 1051 | .lg\:text-xs { 1052 | font-size: 0.75rem; 1053 | line-height: 1rem; 1054 | --leading-offset: calc( (1rem - 1em) / -2) 1055 | } 1056 | 1057 | .lg\:text-sm { 1058 | font-size: 0.875rem; 1059 | line-height: 1.25rem; 1060 | --leading-offset: calc( (1.25rem - 1em) / -2) 1061 | } 1062 | 1063 | .lg\:text-base { 1064 | font-size: 1rem; 1065 | line-height: 1.5rem; 1066 | --leading-offset: calc( (1.5rem - 1em) / -2) 1067 | } 1068 | 1069 | .lg\:text-lg { 1070 | font-size: 1.125rem; 1071 | line-height: 1.75rem; 1072 | --leading-offset: calc( (1.75rem - 1em) / -2) 1073 | } 1074 | 1075 | .lg\:text-xl { 1076 | font-size: 1.25rem; 1077 | line-height: 1.75rem; 1078 | --leading-offset: calc( (1.75rem - 1em) / -2) 1079 | } 1080 | 1081 | .lg\:text-2xl { 1082 | font-size: 1.5rem; 1083 | line-height: 2rem; 1084 | --leading-offset: calc( (2rem - 1em) / -2) 1085 | } 1086 | 1087 | .lg\:text-3xl { 1088 | font-size: 1.875rem; 1089 | line-height: 2.25rem; 1090 | --leading-offset: calc( (2.25rem - 1em) / -2) 1091 | } 1092 | 1093 | .lg\:text-4xl { 1094 | font-size: 2.25rem; 1095 | line-height: 2.5rem; 1096 | --leading-offset: calc( (2.5rem - 1em) / -2) 1097 | } 1098 | 1099 | .lg\:text-5xl { 1100 | font-size: 3rem; 1101 | line-height: 1; 1102 | --leading-offset: 0em 1103 | } 1104 | 1105 | .lg\:text-6xl { 1106 | font-size: 3.75rem; 1107 | line-height: 1; 1108 | --leading-offset: 0em 1109 | } 1110 | 1111 | .lg\:text-7xl { 1112 | font-size: 4.5rem; 1113 | line-height: 1; 1114 | --leading-offset: 0em 1115 | } 1116 | 1117 | .lg\:text-8xl { 1118 | font-size: 6rem; 1119 | line-height: 1; 1120 | --leading-offset: 0em 1121 | } 1122 | 1123 | .lg\:text-9xl { 1124 | font-size: 8rem; 1125 | line-height: 1; 1126 | --leading-offset: 0em 1127 | } 1128 | 1129 | .lg\:leading-3 { 1130 | line-height: .75rem; 1131 | --leading-offset: calc( (.75rem - 1em) / -2) 1132 | } 1133 | 1134 | .lg\:leading-4 { 1135 | line-height: 1rem; 1136 | --leading-offset: calc( (1rem - 1em) / -2) 1137 | } 1138 | 1139 | .lg\:leading-5 { 1140 | line-height: 1.25rem; 1141 | --leading-offset: calc( (1.25rem - 1em) / -2) 1142 | } 1143 | 1144 | .lg\:leading-6 { 1145 | line-height: 1.5rem; 1146 | --leading-offset: calc( (1.5rem - 1em) / -2) 1147 | } 1148 | 1149 | .lg\:leading-7 { 1150 | line-height: 1.75rem; 1151 | --leading-offset: calc( (1.75rem - 1em) / -2) 1152 | } 1153 | 1154 | .lg\:leading-8 { 1155 | line-height: 2rem; 1156 | --leading-offset: calc( (2rem - 1em) / -2) 1157 | } 1158 | 1159 | .lg\:leading-9 { 1160 | line-height: 2.25rem; 1161 | --leading-offset: calc( (2.25rem - 1em) / -2) 1162 | } 1163 | 1164 | .lg\:leading-10 { 1165 | line-height: 2.5rem; 1166 | --leading-offset: calc( (2.5rem - 1em) / -2) 1167 | } 1168 | 1169 | .lg\:leading-none { 1170 | line-height: 1; 1171 | --leading-offset: 0em 1172 | } 1173 | 1174 | .lg\:leading-tight { 1175 | line-height: 1.25; 1176 | --leading-offset: -0.125em 1177 | } 1178 | 1179 | .lg\:leading-snug { 1180 | line-height: 1.375; 1181 | --leading-offset: -0.1875em 1182 | } 1183 | 1184 | .lg\:leading-normal { 1185 | line-height: 1.5; 1186 | --leading-offset: -0.25em 1187 | } 1188 | 1189 | .lg\:leading-relaxed { 1190 | line-height: 1.625; 1191 | --leading-offset: -0.3125em 1192 | } 1193 | 1194 | .lg\:leading-loose { 1195 | line-height: 2; 1196 | --leading-offset: -0.5em 1197 | } 1198 | } 1199 | 1200 | @media (min-width: 1280px) { 1201 | .xl\:font-source-sans { 1202 | font-family: Source Sans Pro; 1203 | --font-offset-start: -0.1955em; 1204 | --font-offset-end: -0.1445em; 1205 | --font-adjust: 1.5151515151515151 1206 | } 1207 | 1208 | .xl\:text-0 { 1209 | font-size: calc(0px * var(--font-adjust,1)) 1210 | } 1211 | 1212 | .xl\:text-1 { 1213 | font-size: calc(0.25rem * var(--font-adjust,1)) 1214 | } 1215 | 1216 | .xl\:text-2 { 1217 | font-size: calc(0.5rem * var(--font-adjust,1)) 1218 | } 1219 | 1220 | .xl\:text-3 { 1221 | font-size: calc(0.75rem * var(--font-adjust,1)) 1222 | } 1223 | 1224 | .xl\:text-4 { 1225 | font-size: calc(1rem * var(--font-adjust,1)) 1226 | } 1227 | 1228 | .xl\:text-5 { 1229 | font-size: calc(1.25rem * var(--font-adjust,1)) 1230 | } 1231 | 1232 | .xl\:text-6 { 1233 | font-size: calc(1.5rem * var(--font-adjust,1)) 1234 | } 1235 | 1236 | .xl\:text-7 { 1237 | font-size: calc(1.75rem * var(--font-adjust,1)) 1238 | } 1239 | 1240 | .xl\:text-8 { 1241 | font-size: calc(2rem * var(--font-adjust,1)) 1242 | } 1243 | 1244 | .xl\:text-9 { 1245 | font-size: calc(2.25rem * var(--font-adjust,1)) 1246 | } 1247 | 1248 | .xl\:text-10 { 1249 | font-size: calc(2.5rem * var(--font-adjust,1)) 1250 | } 1251 | 1252 | .xl\:text-11 { 1253 | font-size: calc(2.75rem * var(--font-adjust,1)) 1254 | } 1255 | 1256 | .xl\:text-12 { 1257 | font-size: calc(3rem * var(--font-adjust,1)) 1258 | } 1259 | 1260 | .xl\:text-14 { 1261 | font-size: calc(3.5rem * var(--font-adjust,1)) 1262 | } 1263 | 1264 | .xl\:text-16 { 1265 | font-size: calc(4rem * var(--font-adjust,1)) 1266 | } 1267 | 1268 | .xl\:text-20 { 1269 | font-size: calc(5rem * var(--font-adjust,1)) 1270 | } 1271 | 1272 | .xl\:text-24 { 1273 | font-size: calc(6rem * var(--font-adjust,1)) 1274 | } 1275 | 1276 | .xl\:text-28 { 1277 | font-size: calc(7rem * var(--font-adjust,1)) 1278 | } 1279 | 1280 | .xl\:text-32 { 1281 | font-size: calc(8rem * var(--font-adjust,1)) 1282 | } 1283 | 1284 | .xl\:text-36 { 1285 | font-size: calc(9rem * var(--font-adjust,1)) 1286 | } 1287 | 1288 | .xl\:text-40 { 1289 | font-size: calc(10rem * var(--font-adjust,1)) 1290 | } 1291 | 1292 | .xl\:text-44 { 1293 | font-size: calc(11rem * var(--font-adjust,1)) 1294 | } 1295 | 1296 | .xl\:text-48 { 1297 | font-size: calc(12rem * var(--font-adjust,1)) 1298 | } 1299 | 1300 | .xl\:text-52 { 1301 | font-size: calc(13rem * var(--font-adjust,1)) 1302 | } 1303 | 1304 | .xl\:text-56 { 1305 | font-size: calc(14rem * var(--font-adjust,1)) 1306 | } 1307 | 1308 | .xl\:text-60 { 1309 | font-size: calc(15rem * var(--font-adjust,1)) 1310 | } 1311 | 1312 | .xl\:text-64 { 1313 | font-size: calc(16rem * var(--font-adjust,1)) 1314 | } 1315 | 1316 | .xl\:text-72 { 1317 | font-size: calc(18rem * var(--font-adjust,1)) 1318 | } 1319 | 1320 | .xl\:text-80 { 1321 | font-size: calc(20rem * var(--font-adjust,1)) 1322 | } 1323 | 1324 | .xl\:text-96 { 1325 | font-size: calc(24rem * var(--font-adjust,1)) 1326 | } 1327 | 1328 | .xl\:text-px { 1329 | font-size: calc(1px * var(--font-adjust,1)) 1330 | } 1331 | 1332 | .xl\:text-0\.5 { 1333 | font-size: calc(0.125rem * var(--font-adjust,1)) 1334 | } 1335 | 1336 | .xl\:text-1\.5 { 1337 | font-size: calc(0.375rem * var(--font-adjust,1)) 1338 | } 1339 | 1340 | .xl\:text-2\.5 { 1341 | font-size: calc(0.625rem * var(--font-adjust,1)) 1342 | } 1343 | 1344 | .xl\:text-3\.5 { 1345 | font-size: calc(0.875rem * var(--font-adjust,1)) 1346 | } 1347 | 1348 | .xl\:text-xs { 1349 | font-size: 0.75rem; 1350 | line-height: 1rem; 1351 | --leading-offset: calc( (1rem - 1em) / -2) 1352 | } 1353 | 1354 | .xl\:text-sm { 1355 | font-size: 0.875rem; 1356 | line-height: 1.25rem; 1357 | --leading-offset: calc( (1.25rem - 1em) / -2) 1358 | } 1359 | 1360 | .xl\:text-base { 1361 | font-size: 1rem; 1362 | line-height: 1.5rem; 1363 | --leading-offset: calc( (1.5rem - 1em) / -2) 1364 | } 1365 | 1366 | .xl\:text-lg { 1367 | font-size: 1.125rem; 1368 | line-height: 1.75rem; 1369 | --leading-offset: calc( (1.75rem - 1em) / -2) 1370 | } 1371 | 1372 | .xl\:text-xl { 1373 | font-size: 1.25rem; 1374 | line-height: 1.75rem; 1375 | --leading-offset: calc( (1.75rem - 1em) / -2) 1376 | } 1377 | 1378 | .xl\:text-2xl { 1379 | font-size: 1.5rem; 1380 | line-height: 2rem; 1381 | --leading-offset: calc( (2rem - 1em) / -2) 1382 | } 1383 | 1384 | .xl\:text-3xl { 1385 | font-size: 1.875rem; 1386 | line-height: 2.25rem; 1387 | --leading-offset: calc( (2.25rem - 1em) / -2) 1388 | } 1389 | 1390 | .xl\:text-4xl { 1391 | font-size: 2.25rem; 1392 | line-height: 2.5rem; 1393 | --leading-offset: calc( (2.5rem - 1em) / -2) 1394 | } 1395 | 1396 | .xl\:text-5xl { 1397 | font-size: 3rem; 1398 | line-height: 1; 1399 | --leading-offset: 0em 1400 | } 1401 | 1402 | .xl\:text-6xl { 1403 | font-size: 3.75rem; 1404 | line-height: 1; 1405 | --leading-offset: 0em 1406 | } 1407 | 1408 | .xl\:text-7xl { 1409 | font-size: 4.5rem; 1410 | line-height: 1; 1411 | --leading-offset: 0em 1412 | } 1413 | 1414 | .xl\:text-8xl { 1415 | font-size: 6rem; 1416 | line-height: 1; 1417 | --leading-offset: 0em 1418 | } 1419 | 1420 | .xl\:text-9xl { 1421 | font-size: 8rem; 1422 | line-height: 1; 1423 | --leading-offset: 0em 1424 | } 1425 | 1426 | .xl\:leading-3 { 1427 | line-height: .75rem; 1428 | --leading-offset: calc( (.75rem - 1em) / -2) 1429 | } 1430 | 1431 | .xl\:leading-4 { 1432 | line-height: 1rem; 1433 | --leading-offset: calc( (1rem - 1em) / -2) 1434 | } 1435 | 1436 | .xl\:leading-5 { 1437 | line-height: 1.25rem; 1438 | --leading-offset: calc( (1.25rem - 1em) / -2) 1439 | } 1440 | 1441 | .xl\:leading-6 { 1442 | line-height: 1.5rem; 1443 | --leading-offset: calc( (1.5rem - 1em) / -2) 1444 | } 1445 | 1446 | .xl\:leading-7 { 1447 | line-height: 1.75rem; 1448 | --leading-offset: calc( (1.75rem - 1em) / -2) 1449 | } 1450 | 1451 | .xl\:leading-8 { 1452 | line-height: 2rem; 1453 | --leading-offset: calc( (2rem - 1em) / -2) 1454 | } 1455 | 1456 | .xl\:leading-9 { 1457 | line-height: 2.25rem; 1458 | --leading-offset: calc( (2.25rem - 1em) / -2) 1459 | } 1460 | 1461 | .xl\:leading-10 { 1462 | line-height: 2.5rem; 1463 | --leading-offset: calc( (2.5rem - 1em) / -2) 1464 | } 1465 | 1466 | .xl\:leading-none { 1467 | line-height: 1; 1468 | --leading-offset: 0em 1469 | } 1470 | 1471 | .xl\:leading-tight { 1472 | line-height: 1.25; 1473 | --leading-offset: -0.125em 1474 | } 1475 | 1476 | .xl\:leading-snug { 1477 | line-height: 1.375; 1478 | --leading-offset: -0.1875em 1479 | } 1480 | 1481 | .xl\:leading-normal { 1482 | line-height: 1.5; 1483 | --leading-offset: -0.25em 1484 | } 1485 | 1486 | .xl\:leading-relaxed { 1487 | line-height: 1.625; 1488 | --leading-offset: -0.3125em 1489 | } 1490 | 1491 | .xl\:leading-loose { 1492 | line-height: 2; 1493 | --leading-offset: -0.5em 1494 | } 1495 | } 1496 | 1497 | @media (min-width: 1536px) { 1498 | .\32xl\:font-source-sans { 1499 | font-family: Source Sans Pro; 1500 | --font-offset-start: -0.1955em; 1501 | --font-offset-end: -0.1445em; 1502 | --font-adjust: 1.5151515151515151 1503 | } 1504 | 1505 | .\32xl\:text-0 { 1506 | font-size: calc(0px * var(--font-adjust,1)) 1507 | } 1508 | 1509 | .\32xl\:text-1 { 1510 | font-size: calc(0.25rem * var(--font-adjust,1)) 1511 | } 1512 | 1513 | .\32xl\:text-2 { 1514 | font-size: calc(0.5rem * var(--font-adjust,1)) 1515 | } 1516 | 1517 | .\32xl\:text-3 { 1518 | font-size: calc(0.75rem * var(--font-adjust,1)) 1519 | } 1520 | 1521 | .\32xl\:text-4 { 1522 | font-size: calc(1rem * var(--font-adjust,1)) 1523 | } 1524 | 1525 | .\32xl\:text-5 { 1526 | font-size: calc(1.25rem * var(--font-adjust,1)) 1527 | } 1528 | 1529 | .\32xl\:text-6 { 1530 | font-size: calc(1.5rem * var(--font-adjust,1)) 1531 | } 1532 | 1533 | .\32xl\:text-7 { 1534 | font-size: calc(1.75rem * var(--font-adjust,1)) 1535 | } 1536 | 1537 | .\32xl\:text-8 { 1538 | font-size: calc(2rem * var(--font-adjust,1)) 1539 | } 1540 | 1541 | .\32xl\:text-9 { 1542 | font-size: calc(2.25rem * var(--font-adjust,1)) 1543 | } 1544 | 1545 | .\32xl\:text-10 { 1546 | font-size: calc(2.5rem * var(--font-adjust,1)) 1547 | } 1548 | 1549 | .\32xl\:text-11 { 1550 | font-size: calc(2.75rem * var(--font-adjust,1)) 1551 | } 1552 | 1553 | .\32xl\:text-12 { 1554 | font-size: calc(3rem * var(--font-adjust,1)) 1555 | } 1556 | 1557 | .\32xl\:text-14 { 1558 | font-size: calc(3.5rem * var(--font-adjust,1)) 1559 | } 1560 | 1561 | .\32xl\:text-16 { 1562 | font-size: calc(4rem * var(--font-adjust,1)) 1563 | } 1564 | 1565 | .\32xl\:text-20 { 1566 | font-size: calc(5rem * var(--font-adjust,1)) 1567 | } 1568 | 1569 | .\32xl\:text-24 { 1570 | font-size: calc(6rem * var(--font-adjust,1)) 1571 | } 1572 | 1573 | .\32xl\:text-28 { 1574 | font-size: calc(7rem * var(--font-adjust,1)) 1575 | } 1576 | 1577 | .\32xl\:text-32 { 1578 | font-size: calc(8rem * var(--font-adjust,1)) 1579 | } 1580 | 1581 | .\32xl\:text-36 { 1582 | font-size: calc(9rem * var(--font-adjust,1)) 1583 | } 1584 | 1585 | .\32xl\:text-40 { 1586 | font-size: calc(10rem * var(--font-adjust,1)) 1587 | } 1588 | 1589 | .\32xl\:text-44 { 1590 | font-size: calc(11rem * var(--font-adjust,1)) 1591 | } 1592 | 1593 | .\32xl\:text-48 { 1594 | font-size: calc(12rem * var(--font-adjust,1)) 1595 | } 1596 | 1597 | .\32xl\:text-52 { 1598 | font-size: calc(13rem * var(--font-adjust,1)) 1599 | } 1600 | 1601 | .\32xl\:text-56 { 1602 | font-size: calc(14rem * var(--font-adjust,1)) 1603 | } 1604 | 1605 | .\32xl\:text-60 { 1606 | font-size: calc(15rem * var(--font-adjust,1)) 1607 | } 1608 | 1609 | .\32xl\:text-64 { 1610 | font-size: calc(16rem * var(--font-adjust,1)) 1611 | } 1612 | 1613 | .\32xl\:text-72 { 1614 | font-size: calc(18rem * var(--font-adjust,1)) 1615 | } 1616 | 1617 | .\32xl\:text-80 { 1618 | font-size: calc(20rem * var(--font-adjust,1)) 1619 | } 1620 | 1621 | .\32xl\:text-96 { 1622 | font-size: calc(24rem * var(--font-adjust,1)) 1623 | } 1624 | 1625 | .\32xl\:text-px { 1626 | font-size: calc(1px * var(--font-adjust,1)) 1627 | } 1628 | 1629 | .\32xl\:text-0\.5 { 1630 | font-size: calc(0.125rem * var(--font-adjust,1)) 1631 | } 1632 | 1633 | .\32xl\:text-1\.5 { 1634 | font-size: calc(0.375rem * var(--font-adjust,1)) 1635 | } 1636 | 1637 | .\32xl\:text-2\.5 { 1638 | font-size: calc(0.625rem * var(--font-adjust,1)) 1639 | } 1640 | 1641 | .\32xl\:text-3\.5 { 1642 | font-size: calc(0.875rem * var(--font-adjust,1)) 1643 | } 1644 | 1645 | .\32xl\:text-xs { 1646 | font-size: 0.75rem; 1647 | line-height: 1rem; 1648 | --leading-offset: calc( (1rem - 1em) / -2) 1649 | } 1650 | 1651 | .\32xl\:text-sm { 1652 | font-size: 0.875rem; 1653 | line-height: 1.25rem; 1654 | --leading-offset: calc( (1.25rem - 1em) / -2) 1655 | } 1656 | 1657 | .\32xl\:text-base { 1658 | font-size: 1rem; 1659 | line-height: 1.5rem; 1660 | --leading-offset: calc( (1.5rem - 1em) / -2) 1661 | } 1662 | 1663 | .\32xl\:text-lg { 1664 | font-size: 1.125rem; 1665 | line-height: 1.75rem; 1666 | --leading-offset: calc( (1.75rem - 1em) / -2) 1667 | } 1668 | 1669 | .\32xl\:text-xl { 1670 | font-size: 1.25rem; 1671 | line-height: 1.75rem; 1672 | --leading-offset: calc( (1.75rem - 1em) / -2) 1673 | } 1674 | 1675 | .\32xl\:text-2xl { 1676 | font-size: 1.5rem; 1677 | line-height: 2rem; 1678 | --leading-offset: calc( (2rem - 1em) / -2) 1679 | } 1680 | 1681 | .\32xl\:text-3xl { 1682 | font-size: 1.875rem; 1683 | line-height: 2.25rem; 1684 | --leading-offset: calc( (2.25rem - 1em) / -2) 1685 | } 1686 | 1687 | .\32xl\:text-4xl { 1688 | font-size: 2.25rem; 1689 | line-height: 2.5rem; 1690 | --leading-offset: calc( (2.5rem - 1em) / -2) 1691 | } 1692 | 1693 | .\32xl\:text-5xl { 1694 | font-size: 3rem; 1695 | line-height: 1; 1696 | --leading-offset: 0em 1697 | } 1698 | 1699 | .\32xl\:text-6xl { 1700 | font-size: 3.75rem; 1701 | line-height: 1; 1702 | --leading-offset: 0em 1703 | } 1704 | 1705 | .\32xl\:text-7xl { 1706 | font-size: 4.5rem; 1707 | line-height: 1; 1708 | --leading-offset: 0em 1709 | } 1710 | 1711 | .\32xl\:text-8xl { 1712 | font-size: 6rem; 1713 | line-height: 1; 1714 | --leading-offset: 0em 1715 | } 1716 | 1717 | .\32xl\:text-9xl { 1718 | font-size: 8rem; 1719 | line-height: 1; 1720 | --leading-offset: 0em 1721 | } 1722 | 1723 | .\32xl\:leading-3 { 1724 | line-height: .75rem; 1725 | --leading-offset: calc( (.75rem - 1em) / -2) 1726 | } 1727 | 1728 | .\32xl\:leading-4 { 1729 | line-height: 1rem; 1730 | --leading-offset: calc( (1rem - 1em) / -2) 1731 | } 1732 | 1733 | .\32xl\:leading-5 { 1734 | line-height: 1.25rem; 1735 | --leading-offset: calc( (1.25rem - 1em) / -2) 1736 | } 1737 | 1738 | .\32xl\:leading-6 { 1739 | line-height: 1.5rem; 1740 | --leading-offset: calc( (1.5rem - 1em) / -2) 1741 | } 1742 | 1743 | .\32xl\:leading-7 { 1744 | line-height: 1.75rem; 1745 | --leading-offset: calc( (1.75rem - 1em) / -2) 1746 | } 1747 | 1748 | .\32xl\:leading-8 { 1749 | line-height: 2rem; 1750 | --leading-offset: calc( (2rem - 1em) / -2) 1751 | } 1752 | 1753 | .\32xl\:leading-9 { 1754 | line-height: 2.25rem; 1755 | --leading-offset: calc( (2.25rem - 1em) / -2) 1756 | } 1757 | 1758 | .\32xl\:leading-10 { 1759 | line-height: 2.5rem; 1760 | --leading-offset: calc( (2.5rem - 1em) / -2) 1761 | } 1762 | 1763 | .\32xl\:leading-none { 1764 | line-height: 1; 1765 | --leading-offset: 0em 1766 | } 1767 | 1768 | .\32xl\:leading-tight { 1769 | line-height: 1.25; 1770 | --leading-offset: -0.125em 1771 | } 1772 | 1773 | .\32xl\:leading-snug { 1774 | line-height: 1.375; 1775 | --leading-offset: -0.1875em 1776 | } 1777 | 1778 | .\32xl\:leading-normal { 1779 | line-height: 1.5; 1780 | --leading-offset: -0.25em 1781 | } 1782 | 1783 | .\32xl\:leading-relaxed { 1784 | line-height: 1.625; 1785 | --leading-offset: -0.3125em 1786 | } 1787 | 1788 | .\32xl\:leading-loose { 1789 | line-height: 2; 1790 | --leading-offset: -0.5em 1791 | } 1792 | } --------------------------------------------------------------------------------