tailwindcss/tests/jit/variants.test.html
Robin Malfait bfc61625d9
[WIP] Unify JIT and AOT code paths (#4188)
* WIP

* WIP

* Finish combining JIT and AOT plugins

Still lots of clean up that can be done in some of the more complex ones, but at least it's one file per plugin now.

* Remove unused import

* Fix AOT generation bugs

* Move corePlugins/index.js to corePlugins.js

* Convert JIT files to ESM

* Move tests

* Reorder core plugins to match JIT order

* Update AOT apply tests

* Unify utils

* Combine plugin lists to one single source of truth

* Finish resolving merge conflicts, fix tests

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2021-04-30 10:58:40 -04:00

69 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<link rel="stylesheet" href="./tailwind.css" />
</head>
<body>
<!-- Basic pseudo variants -->
<div class="shadow-md"></div>
<div class="hover:shadow-md"></div>
<div class="focus:shadow-md"></div>
<div class="disabled:shadow-md"></div>
<div class="active:shadow-md"></div>
<div class="first:shadow-md"></div>
<div class="last:shadow-md"></div>
<div class="even:shadow-md"></div>
<div class="odd:shadow-md"></div>
<div class="visited:shadow-md"></div>
<div class="checked:shadow-md"></div>
<div class="focus-within:shadow-md"></div>
<div class="focus-visible:shadow-md"></div>
<!-- Group variants -->
<div class="group-hover:shadow-md"></div>
<div class="group-focus:shadow-md"></div>
<div class="group-disabled:shadow-md"></div>
<div class="group-active:shadow-md"></div>
<div class="group-first:shadow-md"></div>
<div class="group-last:shadow-md"></div>
<div class="group-even:shadow-md"></div>
<div class="group-odd:shadow-md"></div>
<div class="group-odd:shadow-md"></div>
<div class="group-visited:shadow-md"></div>
<div class="group-checked:shadow-md"></div>
<div class="group-focus-within:shadow-md"></div>
<div class="group-focus-visible:shadow-md"></div>
<div class="group-focus-visible:shadow-md"></div>
<!-- Reduced motion variants -->
<div class="motion-safe:shadow-md"></div>
<div class="motion-reduce:shadow-md"></div>
<!-- Direction variants -->
<div class="rtl:shadow-md"></div>
<div class="ltr:shadow-md"></div>
<!-- Dark mode variants -->
<div class="dark:shadow-md"></div>
<!-- Screen variants -->
<div class="sm:shadow-md"></div>
<div class="md:shadow-md"></div>
<div class="lg:shadow-md"></div>
<div class="xl:shadow-md"></div>
<div class="2xl:shadow-md"></div>
<!-- Stacked variants -->
<div class="focus:hover:shadow-md"></div>
<div class="sm:active:shadow-md"></div>
<div class="md:group-focus:shadow-md"></div>
<div class="lg:dark:shadow-md"></div>
<div class="xl:dark:disabledshadow-md"></div>
<div class="2xl:dark:motion-safe:focus-within:shadow-md"></div>
</body>
</html>