kitchen-sink.test.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/favicon.ico" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Title</title>
  8. <link rel="stylesheet" href="./tailwind.css" />
  9. </head>
  10. <body>
  11. <div class="range:text-right multi:text-left"></div>
  12. <div
  13. class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
  14. ></div>
  15. <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
  16. <div class="test-apply-font-variant"></div>
  17. <div class="mt-6"></div>
  18. <div class="bg-black"></div>
  19. <div class="md:hover:border-r-blue-500/30"></div>
  20. <div class="custom-util"></div>
  21. <div class="hover:custom-util"></div>
  22. <div class="group-hover:custom-util"></div>
  23. <div class="foo:custom-util"></div>
  24. <div class="foo:hover:custom-util"></div>
  25. <div class="sm:custom-util"></div>
  26. <div class="dark:custom-util"></div>
  27. <div class="motion-safe:custom-util"></div>
  28. <div class="md:dark:motion-safe:foo:active:custom-util"></div>
  29. <div class="aspect-w-1 aspect-h-2"></div>
  30. <div class="aspect-w-3 aspect-h-4"></div>
  31. <div class="magic-none magic-tons"></div>
  32. <div class="focus:font-normal"></div>
  33. <div class="font-medium"></div>
  34. <div class="bg-gradient-to-r from-foo"></div>
  35. <div class="custom-component custom-util"></div>
  36. <div class="bg-opacity-50"></div>
  37. <div class="focus:ring-2 focus:ring-blue-500"></div>
  38. <div class="hover:font-bold"></div>
  39. <div class="disabled:font-bold"></div>
  40. <div class="focus:hover:font-light"></div>
  41. <div class="first:pt-0"></div>
  42. <div class="container"></div>
  43. <div class="bg-hero--home-1"></div>
  44. <div class="group-hover:opacity-100"></div>
  45. <div class="group-active:opacity-10"></div>
  46. <div class="sm:motion-safe:group-active:focus:opacity-10"></div>
  47. <div class="motion-safe:transition"></div>
  48. <div class="motion-reduce:transition"></div>
  49. <div class="md:motion-safe:hover:transition"></div>
  50. <div class="md:sm:text-center shadow-sm md:shadow-sm"></div>
  51. <div class="md:sm:text-center shadow-sm md:shadow-sm"></div>
  52. <div class="bg-green-500 md:opacity-50 md:hover:opacity-20 sm:tabular-nums"></div>
  53. <div class="text-center shadow-md hover:shadow-lg transform scale-50 hover:scale-75"></div>
  54. </body>
  55. </html>
  56. <script>
  57. defineComponent({
  58. name: 'HelloWorld',
  59. props: {
  60. msg: {
  61. type: String,
  62. required: true,
  63. },
  64. things: Array /* PropType<string[]> */,
  65. },
  66. setup: () => {
  67. const count = ref(0)
  68. // Weird regex-looking stuff that once caused a stack overflow in candidatePermutations
  69. const pattern = ' ]-[] '
  70. return {
  71. count,
  72. stuff: [] /* string[] | undefined */,
  73. }
  74. },
  75. })
  76. </script>