Home Explore Help
Sign In
LinusTuring
/
tailwindcss
mirror of https://github.com/tailwindlabs/tailwindcss.git
Watch 1
Star 0
Fork 0
Files Issues 0 Wiki
Branch: feature/parcel-css
Branches Tags
tailwindcss
/
tests
/
variants.test.html

variants.test.html 7.3 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <link rel="icon" href="/favicon.ico" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Title</title>
    8. 

  8.     <link rel="stylesheet" href="./tailwind.css" />
    9. 

  9.   </head>
    10. 

  10.   <body>
    11. 

  11.     <!-- Basic pseudo variants -->
    12. 

  12.     <div class="first:shadow-md"></div>
    13. 

  13.     <div class="last:shadow-md"></div>
    14. 

  14.     <div class="only:shadow-md"></div>
    15. 

  15.     <div class="even:shadow-md"></div>
    16. 

  16.     <div class="odd:shadow-md"></div>
    17. 

  17.     <div class="first-of-type:shadow-md"></div>
    18. 

  18.     <div class="last-of-type:shadow-md"></div>
    19. 

  19.     <div class="only-of-type:shadow-md"></div>
    20. 

  20.     <div class="hover:shadow-md"></div>
    21. 

  21.     <div class="focus:shadow-md"></div>
    22. 

  22.     <div class="enabled:shadow-md"></div>
    23. 

  23.     <div class="disabled:shadow-md"></div>
    24. 

  24.     <div class="active:shadow-md"></div>
    25. 

  25.     <div class="target:shadow-md"></div>
    26. 

  26.     <div class="open:bg-red-200"></div>
    27. 

  27.     <div class="visited:shadow-md"></div>
    28. 

  28.     <div class="default:shadow-md"></div>
    29. 

  29.     <div class="checked:shadow-md"></div>
    30. 

  30.     <div class="indeterminate:shadow-md"></div>
    31. 

  31.     <div class="placeholder-shown:shadow-md"></div>
    32. 

  32.     <div class="autofill:shadow-md"></div>
    33. 

  33.     <div class="focus-within:shadow-md"></div>
    34. 

  34.     <div class="focus-visible:shadow-md"></div>
    35. 

  35.     <div class="optional:shadow-md"></div>
    36. 

  36.     <div class="required:shadow-md"></div>
    37. 

  37.     <div class="valid:shadow-md"></div>
    38. 

  38.     <div class="invalid:shadow-md"></div>
    39. 

  39.     <div class="in-range:shadow-md"></div>
    40. 

  40.     <div class="out-of-range:shadow-md"></div>
    41. 

  41.     <div class="read-only:shadow-md"></div>
    42. 

  42.     <div class="empty:shadow-md"></div>
    43. 

  43.     <dialog class="backdrop:shadow-md"></dialog>
    44. 

  44. 

  45.     <!-- Pseudo-element variants -->
    46. 

  46.     <div class="first-letter:text-2xl first-letter:text-red-500"></div>
    47. 

  47.     <div class="first-line:bg-yellow-300 first-line:underline"></div>
    48. 

  48.     <ul>
    49. 

  49.       <li class="marker:text-lg marker:text-red-500"></li>
    50. 

  50.     </ul>
    51. 

  51.     <div class="selection:bg-blue-500 selection:text-white"></div>
    52. 

  52.     <div class="file:bg-blue-500 file:text-white"></div>
    53. 

  53.     <div class="before:block before:bg-red-500"></div>
    54. 

  54.     <div class="after:flex after:uppercase"></div>
    55. 

  55.     <div class="placeholder:font-bold placeholder:text-red-500"></div>
    56. 

  56. 

  57.     <!-- Group variants -->
    58. 

  58.     <div class="group-open:bg-red-200"></div>
    59. 

  59.     <div class="group-first:shadow-md"></div>
    60. 

  60.     <div class="group-last:shadow-md"></div>
    61. 

  61.     <div class="group-only:shadow-md"></div>
    62. 

  62.     <div class="group-even:shadow-md"></div>
    63. 

  63.     <div class="group-odd:shadow-md"></div>
    64. 

  64.     <div class="group-first-of-type:shadow-md"></div>
    65. 

  65.     <div class="group-last-of-type:shadow-md"></div>
    66. 

  66.     <div class="group-only-of-type:shadow-md"></div>
    67. 

  67.     <div class="group-hover:shadow-md"></div>
    68. 

  68.     <div class="group-focus:shadow-md"></div>
    69. 

  69.     <div class="group-enabled:shadow-md"></div>
    70. 

  70.     <div class="group-disabled:shadow-md"></div>
    71. 

  71.     <div class="group-active:shadow-md"></div>
    72. 

  72.     <div class="group-target:shadow-md"></div>
    73. 

  73.     <div class="group-visited:shadow-md"></div>
    74. 

  74.     <div class="group-default:shadow-md"></div>
    75. 

  75.     <div class="group-checked:shadow-md"></div>
    76. 

  76.     <div class="group-indeterminate:shadow-md"></div>
    77. 

  77.     <div class="group-placeholder-shown:shadow-md"></div>
    78. 

  78.     <div class="group-autofill:shadow-md"></div>
    79. 

  79.     <div class="group-focus-within:shadow-md"></div>
    80. 

  80.     <div class="group-focus-visible:shadow-md"></div>
    81. 

  81.     <div class="group-optional:shadow-md"></div>
    82. 

  82.     <div class="group-required:shadow-md"></div>
    83. 

  83.     <div class="group-valid:shadow-md"></div>
    84. 

  84.     <div class="group-invalid:shadow-md"></div>
    85. 

  85.     <div class="group-in-range:shadow-md"></div>
    86. 

  86.     <div class="group-out-of-range:shadow-md"></div>
    87. 

  87.     <div class="group-read-only:shadow-md"></div>
    88. 

  88.     <div class="group-empty:shadow-md"></div>
    89. 

  89. 

  90.     <!-- Peer variants -->
    91. 

  91.     <div class="peer-first:shadow-md"></div>
    92. 

  92.     <div class="peer-last:shadow-md"></div>
    93. 

  93.     <div class="peer-only:shadow-md"></div>
    94. 

  94.     <div class="peer-even:shadow-md"></div>
    95. 

  95.     <div class="peer-odd:shadow-md"></div>
    96. 

  96.     <div class="peer-first-of-type:shadow-md"></div>
    97. 

  97.     <div class="peer-last-of-type:shadow-md"></div>
    98. 

  98.     <div class="peer-only-of-type:shadow-md"></div>
    99. 

  99.     <div class="peer-hover:shadow-md"></div>
    100. 

  100.     <div class="peer-focus:shadow-md"></div>
    101. 

  101.     <div class="peer-enabled:shadow-md"></div>
    102. 

  102.     <div class="peer-disabled:shadow-md"></div>
    103. 

  103.     <div class="peer-active:shadow-md"></div>
    104. 

  104.     <div class="peer-target:shadow-md"></div>
    105. 

  105.     <div class="peer-visited:shadow-md"></div>
    106. 

  106.     <div class="peer-default:shadow-md"></div>
    107. 

  107.     <div class="peer-checked:shadow-md"></div>
    108. 

  108.     <div class="peer-indeterminate:shadow-md"></div>
    109. 

  109.     <div class="peer-placeholder-shown:shadow-md"></div>
    110. 

  110.     <div class="peer-autofill:shadow-md"></div>
    111. 

  111.     <div class="peer-focus-within:shadow-md"></div>
    112. 

  112.     <div class="peer-focus-visible:shadow-md"></div>
    113. 

  113.     <div class="peer-optional:shadow-md"></div>
    114. 

  114.     <div class="peer-required:shadow-md"></div>
    115. 

  115.     <div class="peer-valid:shadow-md"></div>
    116. 

  116.     <div class="peer-invalid:shadow-md"></div>
    117. 

  117.     <div class="peer-in-range:shadow-md"></div>
    118. 

  118.     <div class="peer-out-of-range:shadow-md"></div>
    119. 

  119.     <div class="peer-read-only:shadow-md"></div>
    120. 

  120.     <div class="peer-empty:shadow-md"></div>
    121. 

  121. 

  122.     <!-- Reduced motion variants -->
    123. 

  123.     <div class="motion-safe:shadow-md"></div>
    124. 

  124.     <div class="motion-reduce:shadow-md"></div>
    125. 

  125. 

  126.     <!-- Direction variants -->
    127. 

  127.     <div class="rtl:shadow-md"></div>
    128. 

  128.     <div class="ltr:shadow-md"></div>
    129. 

  129. 

  130.     <!-- Dark mode variants -->
    131. 

  131.     <div class="dark:shadow-md"></div>
    132. 

  132. 

  133.     <!-- Print variant -->
    134. 

  134.     <div class="print:bg-yellow-300"></div>
    135. 

  135. 

  136.     <!-- Screen variants -->
    137. 

  137.     <div class="sm:shadow-md"></div>
    138. 

  138.     <div class="md:shadow-md"></div>
    139. 

  139.     <div class="lg:shadow-md"></div>
    140. 

  140.     <div class="xl:shadow-md"></div>
    141. 

  141.     <div class="2xl:shadow-md"></div>
    142. 

  142.     <div class="lg:animate-spin"></div>
    143. 

  143.     <div class="hover:animate-spin"></div>
    144. 

  144. 

  145.     <!-- Orientation variants -->
    146. 

  146.     <div class="portrait:bg-yellow-300"></div>
    147. 

  147.     <div class="landscape:bg-yellow-300"></div>
    148. 

  148. 

  149.     <!-- Prefers contrast variants -->
    150. 

  150.     <div class="contrast-more:bg-yellow-300"></div>
    151. 

  151.     <div class="contrast-less:bg-yellow-300"></div>
    152. 

  152. 

  153.     <!-- Stacked variants -->
    154. 

  154.     <div class="open:hover:bg-red-200"></div>
    155. 

  155.     <div class="file:hover:bg-blue-600"></div>
    156. 

  156.     <div class="focus:hover:shadow-md"></div>
    157. 

  157.     <div class="sm:active:shadow-md"></div>
    158. 

  158.     <div class="md:group-focus:shadow-md"></div>
    159. 

  159.     <div class="lg:dark:shadow-md"></div>
    160. 

  160.     <div class="xl:dark:disabledshadow-md"></div>
    161. 

  161.     <div class="2xl:dark:motion-safe:focus-within:shadow-md"></div>
    162. 

  162. 

  163.     <!-- Stacked group variants -->
    164. 

  164.     <div class="group-open:group-focus:bg-red-200"></div>
    165. 

  165.     <div class="group-open:group-hover:space-x-2"></div>
    166. 

  166.     <div class="group-focus:group-hover:shadow-md"></div>
    167. 

  167.     <div class="group-disabled:group-focus:group-hover:shadow-md"></div>
    168. 

  168.     <div class="dark:group-disabled:group-focus:group-hover:shadow-md"></div>
    169. 

  169.     <div class="group-disabled:group-focus:group-hover:first:shadow-md"></div>
    170. 

  170. 

  171.     <!-- Stacked peer variants -->
    172. 

  172.     <div class="peer-focus:peer-hover:shadow-md"></div>
    173. 

  173.     <div class="peer-disabled:peer-focus:peer-hover:shadow-md"></div>
    174. 

  174.     <div class="dark:peer-disabled:peer-focus:peer-hover:shadow-md"></div>
    175. 

  175.     <div class="peer-disabled:peer-focus:peer-hover:first:shadow-md"></div>
    176. 

  176.   </body>
    177. 

  177. </html>
    178. 

  178.