├── .gitignore ├── tailwindcss-cheatsheet.pdf ├── tailwindcss-cheatsheet.psd ├── printable-tailwindcss-cheatsheet.jpg ├── printable-tailwindcss-cheatsheet.png └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /tailwindcss-cheatsheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/just214/tailwind-cheatsheet/HEAD/tailwindcss-cheatsheet.pdf -------------------------------------------------------------------------------- /tailwindcss-cheatsheet.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/just214/tailwind-cheatsheet/HEAD/tailwindcss-cheatsheet.psd -------------------------------------------------------------------------------- /printable-tailwindcss-cheatsheet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/just214/tailwind-cheatsheet/HEAD/printable-tailwindcss-cheatsheet.jpg -------------------------------------------------------------------------------- /printable-tailwindcss-cheatsheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/just214/tailwind-cheatsheet/HEAD/printable-tailwindcss-cheatsheet.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TailwindCSS Cheatsheet (ARCHIVED) 2 | 3 | Update 04/29/2022: 4 | 5 | I've made the decision to archive this repo for the following reasons: 6 | 7 | - This cheatsheet is behind by two major versions of Tailwind 8 | - The Tailwind V3 API has grown to a size that can no longer be confined to a single page 9 | - The Tailwind website is likely just as fast to search for what you are looking for 10 | - The API changes pretty frequently, and I don't want to have to maintain this cheatsheet 11 | 12 | > Last updated on November 9th, 2020 for TailwindCSS v1.9.6 13 | 14 | This README contains a complete list of the TailwindCSS class names for a quick reference. 15 | 16 | There is also a more condensed, printable one-page jpg version: 17 | 18 | ![Printable TailwindCSS Cheatsheet](https://github.com/gojutin/tailwindcss-cheatsheet/blob/main/printable-tailwindcss-cheatsheet.jpg?raw=true) 19 | 20 | ## Default Config 21 | 22 | [View the TailwindCSS default configuration](https://github.com/tailwindlabs/tailwindcss/blob/v1/stubs/defaultConfig.stub.js) 23 | 24 | Breakpoints: sm:640px | md:768px | lg:1024px | xl:1280px 25 | 26 | Colors: transparent, current, black, white, grays, reds, oranges, yellows, greens, teals, blues, indigos, purples, pinks 27 | 28 | Spacing: 0|1|2|3|4|5|6|8|10|12|16|20|24|32|40|48|56|64|px 29 | 30 | Supported Variants: responsive|group-hover|focus-within|first|last|odd|even|hover|focus|active|visited|disabled|motion-safe|motion-reduce 31 | 32 | ## Utility Classes 33 | 34 | ### LAYOUT 35 | 36 | **Container** 37 | 38 | - .container 39 | 40 | **Box Sizing** 41 | 42 | - .box-[border|content] 43 | 44 | **Display** 45 | 46 | - .block 47 | - .inline-block 48 | - .inline 49 | - .flex 50 | - .inline-flex 51 | - .table 52 | - .table-caption 53 | - .table-cell 54 | - .table-column 55 | - .table-column-group 56 | - .table-footer-group 57 | - .table-header-group 58 | - .table-row-group 59 | - .table-row 60 | - .flow-root 61 | - .grid 62 | - .inline-grid 63 | - .contents 64 | - .hidden 65 | 66 | **Floats** 67 | 68 | - .float-[right|left|none] 69 | - .clearfix 70 | 71 | **Clear** 72 | 73 | - .clear-[left|right|both|none] 74 | 75 | **Object Fit** 76 | 77 | - .object-[contain|cover|fill|none|scale-down] 78 | 79 | **Object Position** 80 | 81 | - .object-bottom 82 | - .object-center 83 | - .object-left 84 | - .object-left-bottom 85 | - .object-left-top 86 | - .object-right 87 | - .object-right-bottom 88 | - .object-right-top 89 | - .object-top 90 | 91 | **Overflow** 92 | 93 | - .overflow-[auto|hidden|visible|scroll] 94 | - .overflow-x-[auto|hidden|visible|scroll] 95 | - .overflow-y-[auto|hidden|visible|scroll] 96 | - .scrolling-[touch|auto] 97 | 98 | **Overscroll Behavior** 99 | 100 | - .overscroll-[auto|contain|none] 101 | - .overscroll-y-[auto|contain|none] 102 | - .overscroll-x-[auto|contain|none] 103 | 104 | **Position** 105 | 106 | - .static 107 | - .fixed 108 | - .absolute 109 | - .relative 110 | - .sticky 111 | 112 | **Top / Right / Bottom / Left** 113 | 114 | - .inset-[0|auto] 115 | - .inset-y-[0|auto] 116 | - .inset-x-[0|auto] 117 | - .top-[0|auto] 118 | - .right-[0|auto] 119 | - .bottom-[0|auto] 120 | - .left-[0|auto] 121 | 122 | **Visibility** 123 | 124 | - .visible 125 | - .invisible 126 | 127 | **Z-index** 128 | 129 | - .z-[0|10|20|30|40|50|auto] 130 | 131 | ### FLEXBOX 132 | 133 | > Make sure to use the `.flex` class with the classes below! 134 | 135 | **Flex Direction** 136 | 137 | - .flex-row 138 | - .flex-row-reverse 139 | - .flex-col 140 | - .flex-col-reverse 141 | 142 | **Flex Wrap** 143 | 144 | - .flex-wrap 145 | - .flex-wrap-reverse 146 | - .flex-no-wrap 147 | 148 | **Flex** 149 | 150 | - .flex-1 151 | - .flex-auto 152 | - .flex-initial 153 | - .flex-none 154 | 155 | **Flex Grow** 156 | 157 | - .flex-grow-0 158 | - .flex-grow 159 | 160 | **Flex Shrink** 161 | 162 | - .flex-shrink-0 163 | - .flex-shrink 164 | 165 | **Order** 166 | 167 | - .order-[1|2|3|4|5|6|7|8|9|10|11|12] 168 | - .order-[first|last|none] 169 | 170 | ### GRID 171 | 172 | **Grid Template Columns** 173 | 174 | - .grid-cols-[1|2|3|4|5|6|7|8|9|10|11|12|none] 175 | 176 | **Grid Column Start / End** 177 | 178 | - .col-auto 179 | - .col-span-[1|2|3|4|5|6|7|8|9|10|11|12|full] 180 | - .col-start-[1|2|3|4|5|6|7|8|9|10|11|12|13|auto] 181 | - .col-end-[1|2|3|4|5|6|7|8|9|10|11|12|13|auto] 182 | 183 | **Grid Template Rows** 184 | 185 | - .grid-rows-[1|2|3|4|5|6|none] 186 | 187 | **Grid Row Start / End** 188 | 189 | - .row-auto 190 | - .row-span-[1|2|3|4|5|6|full] 191 | - .row-start-[1|2|3|4|5|6|7|auto] 192 | - .row-end-[1|2|3|4|5|6|7|auto] 193 | 194 | **Grid Auto Flow** 195 | 196 | - .grid-flow-row 197 | - .grid-flow-col 198 | - .grid-flow-row-dense 199 | - .grid-flow-col-dense 200 | 201 | **Grid Auto Columns** 202 | 203 | - .auto-cols-auto 204 | - .auto-cols-min 205 | - .auto-cols-max 206 | - .auto-cols-fr 207 | 208 | **Grid Auto Rows** 209 | 210 | - .auto-rows-auto 211 | - .auto-rows-min 212 | - .auto-rows-max 213 | - .auto-rows-fr 214 | 215 | **Gap** 216 | 217 | - .gap-[0|1|2|3|4|5|6|8|10|12|16|20|24|32|40|48|56|64|px] 218 | - .gap-x-[0|1|2|3|4|5|6|8|10|12|16|20|24|32|40|48|56|64|px] 219 | - .gap-y-[0|1|2|3|4|5|6|8|10|12|16|20|24|32|40|48|56|64|px] 220 | 221 | ### BOX ALIGNMENT 222 | 223 | **Justify Content** 224 | 225 | - .justify-[start|end|center|between|around|evenly] 226 | 227 | **Justify Items** 228 | 229 | - .justify-items-[auto|start|end|center|stretch] 230 | 231 | **Justify Self** 232 | 233 | - .justify-self-[auto|start|end|center|stretch] 234 | 235 | **Align Content** 236 | 237 | - .content-[center|start|end|between|around|evenly] 238 | 239 | **Align Items** 240 | 241 | - .items-[start|end|center|baseline|stretch] 242 | 243 | **Align Self** 244 | 245 | - .self-[auto|start|end|center|stretch] 246 | 247 | **Place Content** 248 | 249 | - .place-content-[center|start|end|between|around|evenly|stretch] 250 | 251 | **Place Items** 252 | 253 | - .place-items-[auto|start|end|center|stretch] 254 | 255 | **Place Self** 256 | 257 | - .place-self-[auto|start|end|center|stretch] 258 | 259 | ### SPACING 260 | 261 | **Padding** 262 | 263 | - .[p|py|px|pt|pr|pb|pl]-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|px] 264 | 265 | **Margin** 266 | 267 | - .[m|my|mx|mt|mr|mb|ml]-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|auto|px] 268 | - .-[m|my|mx|mt|mr|mb|ml]-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|px] 269 | 270 | **Space Between** 271 | 272 | - .space-[x|y]-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|px|reverse] 273 | - .-space-[x|y]-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|px] 274 | 275 | ### SIZING 276 | 277 | **Width** 278 | 279 | - .w-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|auto|px] 280 | - .w-[1/2|1/3|2/3|1/4|2/4|3/4] 281 | - .w-[1/5|2/5|3/5|4/5] 282 | - .w-[1/6|2/6|3/6|4/6|5/6] 283 | - .w-[1/12|2/12|3/12|4/12|5/12|6/12|7/12|8/12|9/12|10/12|11/12] 284 | - .w-[full|screen] 285 | 286 | **Min-Width** 287 | 288 | - .min-w-[0|full] 289 | 290 | **Max-Width** 291 | 292 | - .max-w-[none|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|full] 293 | - .max-w-screen-[sm|md|lg|xl] 294 | 295 | **Height** 296 | 297 | - .h-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|auto|px|full|screen] 298 | 299 | **Min-Height** 300 | 301 | - .min-h-[0,full,screen] 302 | 303 | **Max-Height** 304 | 305 | - .max-h-[full,screen] 306 | 307 | ### TYPOGRAPHY 308 | 309 | **Font Family** 310 | 311 | - .font[sans|serif|mono] 312 | 313 | **Font Size** 314 | 315 | - .text-[xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl] 316 | 317 | **Font Smoothing** 318 | 319 | - .antialiased 320 | - .subpixel-antialiased 321 | 322 | **Font Style** 323 | 324 | - .italic 325 | - .not-italic 326 | 327 | **Font Weight** 328 | 329 | - .font-[hairline|thin|light|normal|medium|semibold|bold|extrabold|black] 330 | 331 | **Font Variant Numeric** 332 | 333 | - .normal-nums 334 | - .ordinal 335 | - .slashed-zero 336 | - .lining-nums 337 | - .oldstyle-nums 338 | - .proportional-nums 339 | - .tabular-nums 340 | - .diagonal-fractions 341 | - .stacked-fractions 342 | 343 | **Letter Spacing** 344 | 345 | - .tracking-[tighter|tight|normal|wide|wider|widest] 346 | 347 | **Line Height** 348 | 349 | - .leading-[3|4|5|6|7|8|9|10|none|tight|snug|normal|relaxed|loose] 350 | 351 | **List Style Type** 352 | 353 | - .list-[none|disc|decimal] 354 | 355 | **List Style Position** 356 | 357 | - .list-[inside|outside] 358 | 359 | **Placeholder Color** 360 | 361 | - .placeholder-[transparent|current|black|white] 362 | - .placeholder-gray-[100|200|300|400|500|600|700|800|900] 363 | - .placeholder-red-[100|200|300|400|500|600|700|800|900] 364 | - .placeholder-orange-[100|200|300|400|500|600|700|800|900] 365 | - .placeholder-yellow-[100|200|300|400|500|600|700|800|900] 366 | - .placeholder-green-[100|200|300|400|500|600|700|800|900] 367 | - .placeholder-teal-[100|200|300|400|500|600|700|800|900] 368 | - .placeholder-blue-[100|200|300|400|500|600|700|800|900] 369 | - .placeholder-indigo-[100|200|300|400|500|600|700|800|900] 370 | - .placeholder-purple-[100|200|300|400|500|600|700|800|900] 371 | - .placeholder-pink-[100|200|300|400|500|600|700|800|900] 372 | 373 | **Placeholder Opacity** 374 | 375 | - .placeholder-opacity-[0|25|50|75|100] 376 | 377 | **Text Align** 378 | 379 | - .text-[left|center|right|justify] 380 | 381 | **Text Color** 382 | 383 | - .text-[transparent|current|black|white] 384 | - .text-gray-[100|200|300|400|500|600|700|800|900] 385 | - .text-red-[100|200|300|400|500|600|700|800|900] 386 | - .text-orange-[100|200|300|400|500|600|700|800|900] 387 | - .text-yellow-[100|200|300|400|500|600|700|800|900] 388 | - .text-green-[100|200|300|400|500|600|700|800|900] 389 | - .text-teal-[100|200|300|400|500|600|700|800|900] 390 | - .text-blue-[100|200|300|400|500|600|700|800|900] 391 | - .text-indigo-[100|200|300|400|500|600|700|800|900] 392 | - .text-purple-[100|200|300|400|500|600|700|800|900] 393 | - .text-pink-[100|200|300|400|500|600|700|800|900] 394 | 395 | **Text Opacity** 396 | 397 | - .text-opacity-[0|25|50|75|100] 398 | 399 | **Text Decoration** 400 | 401 | - .underline 402 | - .line-through 403 | - .no-underline 404 | 405 | **Text Transform** 406 | 407 | - .uppercase 408 | - .lowercase 409 | - .capitalize 410 | - .normal-case 411 | 412 | **Vertical Align** 413 | 414 | - .align-[baseline|top|middle|bottom|text-top|text-bottom] 415 | 416 | **Whitespace** 417 | 418 | - .whitespace-[normal|no-wrap|pre|pre-line|pre-wrap] 419 | 420 | **Word Break** 421 | 422 | - .break-[normal|words|all] 423 | - .truncate 424 | 425 | ### BACKGROUNDS 426 | 427 | **Background Attachment** 428 | 429 | - .bg-[fixed|local|scroll] 430 | 431 | **Background Clip** 432 | 433 | - .bg-clip-[border|padding|content|text] 434 | 435 | **Background Color** 436 | 437 | - .bg-[transparent|current|black|white] 438 | - .bg-gray-[100|200|300|400|500|600|700|800|900] 439 | - .bg-red-[100|200|300|400|500|600|700|800|900] 440 | - .bg-orange-[100|200|300|400|500|600|700|800|900] 441 | - .bg-yellow-[100|200|300|400|500|600|700|800|900] 442 | - .bg-green-[100|200|300|400|500|600|700|800|900] 443 | - .bg-teal-[100|200|300|400|500|600|700|800|900] 444 | - .bg-blue-[100|200|300|400|500|600|700|800|900] 445 | - .bg-indigo-[100|200|300|400|500|600|700|800|900] 446 | - .bg-purple-[100|200|300|400|500|600|700|800|900] 447 | - .bg-pink-[100|200|300|400|500|600|700|800|900] 448 | 449 | **Background Opacity** 450 | 451 | - .bg-opacity-[0|25|50|75|100] 452 | 453 | **Background Position** 454 | 455 | - .bg-bottom 456 | - .bg-center 457 | - .bg-left 458 | - .bg-left-bottom 459 | - .bg-left-top 460 | - .bg-right 461 | - .bg-right-bottom 462 | - .bg-right-top 463 | - .bg-top 464 | 465 | **Background Repeat** 466 | 467 | - .bg-repeat 468 | - .bg-no-repeat 469 | - .bg-repeat-x 470 | - .bg-repeat-y 471 | - .bg-repeat-round 472 | - .bg-repeat-space 473 | 474 | **Background Size** 475 | 476 | - .bg-[auto|cover|contain] 477 | 478 | **Background Image** 479 | 480 | - .bg-none 481 | - .bg-gradient-to-[t|tr|r|br|b|bl|l|tl] 482 | 483 | **Gradient Color Stops** 484 | 485 | - .from-[transparent|current|black|white] 486 | - .from-gray-[100|200|300|400|500|600|700|800|900] 487 | - .from-red-[100|200|300|400|500|600|700|800|900] 488 | - .from-orange-[100|200|300|400|500|600|700|800|900] 489 | - .from-yellow-[100|200|300|400|500|600|700|800|900] 490 | - .from-green-[100|200|300|400|500|600|700|800|900] 491 | - .from-teal-[100|200|300|400|500|600|700|800|900] 492 | - .from-blue-[100|200|300|400|500|600|700|800|900] 493 | - .from-indigo-[100|200|300|400|500|600|700|800|900] 494 | - .from-purple-[100|200|300|400|500|600|700|800|900] 495 | - .from-pink-[100|200|300|400|500|600|700|800|900] 496 | - .via-[transparent|current|black|white] 497 | - .via-gray-[100|200|300|400|500|600|700|800|900] 498 | - .via-red-[100|200|300|400|500|600|700|800|900] 499 | - .via-orange-[100|200|300|400|500|600|700|800|900] 500 | - .via-yellow-[100|200|300|400|500|600|700|800|900] 501 | - .via-green-[100|200|300|400|500|600|700|800|900] 502 | - .via-teal-[100|200|300|400|500|600|700|800|900] 503 | - .via-blue-[100|200|300|400|500|600|700|800|900] 504 | - .via-indigo-[100|200|300|400|500|600|700|800|900] 505 | - .via-purple-[100|200|300|400|500|600|700|800|900] 506 | - .via-pink-[100|200|300|400|500|600|700|800|900] 507 | - .to-[transparent|current|black|white] 508 | - .to-gray-[100|200|300|400|500|600|700|800|900] 509 | - .to-red-[100|200|300|400|500|600|700|800|900] 510 | - .to-orange-[100|200|300|400|500|600|700|800|900] 511 | - .to-yellow-[100|200|300|400|500|600|700|800|900] 512 | - .to-green-[100|200|300|400|500|600|700|800|900] 513 | - .to-teal-[100|200|300|400|500|600|700|800|900] 514 | - .to-blue-[100|200|300|400|500|600|700|800|900] 515 | - .to-indigo-[100|200|300|400|500|600|700|800|900] 516 | - .to-purple-[100|200|300|400|500|600|700|800|900] 517 | - .to-pink-[100|200|300|400|500|600|700|800|900] 518 | 519 | ### BORDERS 520 | 521 | **Border Radius** 522 | 523 | - .rounded 524 | - .rounded-[none|sm|md|lg|xl|2xl|3xl|full] 525 | - .rounded-t-[none|sm|md|lg|xl|2xl|3xl|full] 526 | - .rounded-r-[none|sm|md|lg|xl|2xl|3xl|full] 527 | - .rounded-b-[none|sm|md|lg|xl|2xl|3xl|full] 528 | - .rounded-l-[none|sm|md|lg|xl|2xl|3xl|full] 529 | - .rounded-tl-[none|sm|md|lg|xl|2xl|3xl|full] 530 | - .rounded-tr-[none|sm|md|lg|xl|2xl|3xl|full] 531 | - .rounded-bl-[none|sm|md|lg|xl|2xl|3xl|full] 532 | - .rounded-br-[none|sm|md|lg|xl|2xl|3xl|full] 533 | 534 | **Border Width** 535 | 536 | - .border 537 | - .border-[0|2|4|8] 538 | - .border-[t|r|b|l] 539 | - .border-t-[0|2|4|8] 540 | - .border-r-[0|2|4|8] 541 | - .border-b-[0|2|4|8] 542 | - .border-l-[0|2|4|8] 543 | 544 | **Border Color** 545 | 546 | - .border-[transparent|current|black|white] 547 | - .border-gray-[100|200|300|400|500|600|700|800|900] 548 | - .border-red-[100|200|300|400|500|600|700|800|900] 549 | - .border-orange-[100|200|300|400|500|600|700|800|900] 550 | - .border-yellow-[100|200|300|400|500|600|700|800|900] 551 | - .border-green-[100|200|300|400|500|600|700|800|900] 552 | - .border-teal-[100|200|300|400|500|600|700|800|900] 553 | - .border-blue-[100|200|300|400|500|600|700|800|900] 554 | - .border-indigo-[100|200|300|400|500|600|700|800|900] 555 | - .border-purple-[100|200|300|400|500|600|700|800|900] 556 | - .border-pink-[100|200|300|400|500|600|700|800|900] 557 | 558 | **Border Opacity** 559 | 560 | - .border-opacity-[0|25|50|75|100] 561 | 562 | **Border Style** 563 | 564 | - .border-[solid|dashed|dotted|double|none] 565 | 566 | **Divide Width** 567 | 568 | - .divide-[x|y] 569 | - .divide-x-[0|2|4|8|reverse] 570 | - .divide-y-[0|2|4|8|reverse] 571 | 572 | **Divide Color** 573 | 574 | - .divide-[transparent|current|black|white] 575 | - .divide-gray-[100|200|300|400|500|600|700|800|900] 576 | - .divide-red-[100|200|300|400|500|600|700|800|900] 577 | - .divide-orange-[100|200|300|400|500|600|700|800|900] 578 | - .divide-yellow-[100|200|300|400|500|600|700|800|900] 579 | - .divide-green-[100|200|300|400|500|600|700|800|900] 580 | - .divide-teal-[100|200|300|400|500|600|700|800|900] 581 | - .divide-blue-[100|200|300|400|500|600|700|800|900] 582 | - .divide-indigo-[100|200|300|400|500|600|700|800|900] 583 | - .divide-purple-[100|200|300|400|500|600|700|800|900] 584 | - .divide-pink-[100|200|300|400|500|600|700|800|900] 585 | 586 | **Divide Opacity** 587 | 588 | - .divide-opacity-[0|25|50|75|100] 589 | 590 | **Divide Style** 591 | 592 | - .divide-[solid|dashed|dotted|double|none] 593 | 594 | ### TABLES 595 | 596 | **Border Collapse** 597 | 598 | - .border-[collapse|seperate] 599 | 600 | **Table Layout** 601 | 602 | - .table-[auto|fixed] 603 | 604 | ### EFFECTS 605 | 606 | **Box Shadow** 607 | 608 | - .shadow 609 | - .shadow-[xs|sm|md|lg|xl|2xl|inner|outline|none] 610 | 611 | **Opacity** 612 | 613 | - .opacity-[0|25|50|75|100] 614 | 615 | ### TRANSITIONS AND ANIMATION 616 | 617 | **Transition Property** 618 | 619 | - .transition 620 | - .transition-[none|all|colors|opacity|shadow|transform] 621 | 622 | **Transition Duration** 623 | 624 | - .duration-[75|100|150|200|300|500|700|1000] 625 | 626 | **Transition Timing Function** 627 | 628 | - .ease-[linear|in|out|in-out] 629 | 630 | **Transition Delay** 631 | 632 | - .delay-[75|100|150|200|300|500|700|1000] 633 | 634 | **Animation** 635 | 636 | - .animate-[none|spin|ping|pulse|bounce] 637 | 638 | ### TRANSFORMS 639 | 640 | **Scale** 641 | 642 | - .scale-[0|50|75|90|95|100|105|110|125|150] 643 | - .scale-x-[0|50|75|90|95|100|105|110|125|150] 644 | - .scale-y-[0|50|75|90|95|100|105|110|125|150] 645 | 646 | **Rotate** 647 | 648 | - .rotate-[0|1|2|3|6|12|45|90|180] 649 | - .-rotate-[1|2|3|6|12|45|90|180] 650 | 651 | **Translate** 652 | 653 | - .translate-x-[0|1|2|3|4|5|6|7|8|10|12|16|20|24|32|40|48|56|64|px|full|1/2] 654 | - .-translate-x-[1|2|3|4|5|6|7|8|10|12|16|20|24|32|40|48|56|64|px|full|1/2] 655 | - .translate-y-[0|1|2|3|4|5|6|7|8|10|12|16|20|24|32|40|48|56|64|px|full|1/2] 656 | - .-translate-y-[1|2|3|4|5|6|7|8|10|12|16|20|24|32|40|48|56|64|px|full|1/2] 657 | 658 | **Skew** 659 | 660 | - .skew-x-[0|1|2|3|6|12] 661 | - .-skew-x-[1|2|3|6|12] 662 | - .skew-y-[0|1|2|3|6|12] 663 | - .-skew-x-[1|2|3|6|12] 664 | 665 | **Transform Origin** 666 | 667 | - .origin-center 668 | - .origin-top 669 | - .origin-top-right 670 | - .origin-right 671 | - .origin-bottom-right 672 | - .origin-bottom 673 | - .origin-bottom-left 674 | - .origin-left 675 | - .origin-top-left 676 | 677 | ### INTERACTIVITY 678 | 679 | **Appearance** 680 | 681 | - .appearance-none 682 | 683 | **Cursor** 684 | 685 | - .cursor-[auto|default|pointer|wait|text|move|not-allowed] 686 | 687 | **Outline** 688 | 689 | - .outline-[none|white|black] 690 | 691 | **Pointer Events** 692 | 693 | - .pointer-events-[none|auto] 694 | 695 | **Resize** 696 | 697 | - .resize 698 | - .resize-[none|y|x] 699 | 700 | **User Select** 701 | 702 | - .select-[none|text|all|auto] 703 | 704 | ### SVG 705 | 706 | **Fill** 707 | 708 | - .fill-current 709 | 710 | **Stroke** 711 | 712 | - .stroke-current 713 | 714 | **Stroke Width** 715 | 716 | - .stroke-[0|1|2] 717 | 718 | ### ACCESSIBILITY 719 | 720 | **Screen Readers** 721 | 722 | - .sr-only 723 | - .not-sr-only 724 | --------------------------------------------------------------------------------