mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
60a06788fe
* Implement `filter` helper classes with all methods * Rename filter plugins/utilities, drop filter opacity, add drop shadow * Remove non-final default filter values * Working on default filter values, add basic JIT support * Working on blur values * New blur values (these are ~okay) * Match drop-shadow values to box-shadows by eye as best as possible * Update tests * Fix kitchen sink test * Add filter variants configuration * Move drop-shadow to end of filters list Co-Authored-By: Peter Neupauer <peter@neupauer.sk> * Add invert variants configuration * Add backdrop-filter utilities * Update tests * Transition filters by default * Alphabetize new config keys * Optimize filter plugins for JIT + add arbitrary value support Except for drop-shadow, will add that once we can think it through a bit. Co-authored-by: Nick Schmidt <nick@kreativgebiet.com> Co-authored-by: Peter Neupauer <peter@neupauer.sk>
65 lines
2.7 KiB
HTML
65 lines
2.7 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>
|
|
<div class="bg-[#0f0] bg-[#ff0000] bg-[#0000ffcc]"></div>
|
|
<div class="bg-[rgb(123,123,123)] bg-[rgba(123,123,123,0.5)]"></div>
|
|
<div class="bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]"></div>
|
|
<div class="bg-opacity-[0.11]"></div>
|
|
<div class="border-[#f00]"></div>
|
|
<div class="border-[2.5px]"></div>
|
|
<div class="w-[3.23rem]"></div>
|
|
<div class="w-[calc(100%+1rem)]"></div>
|
|
<div class="w-[var(--width)]"></div>
|
|
<div class="min-w-[3.23rem]"></div>
|
|
<div class="min-w-[calc(100%+1rem)]"></div>
|
|
<div class="min-w-[var(--width)]"></div>
|
|
<div class="max-w-[3.23rem]"></div>
|
|
<div class="max-w-[calc(100%+1rem)]"></div>
|
|
<div class="max-w-[var(--width)]"></div>
|
|
<div class="h-[3.23rem]"></div>
|
|
<div class="h-[calc(100%+1rem)]"></div>
|
|
<div class="h-[var(--height)]"></div>
|
|
<div class="min-h-[3.23rem]"></div>
|
|
<div class="min-h-[calc(100%+1rem)]"></div>
|
|
<div class="min-h-[var(--height)]"></div>
|
|
<div class="max-h-[3.23rem]"></div>
|
|
<div class="max-h-[calc(100%+1rem)]"></div>
|
|
<div class="max-h-[var(--height)]"></div>
|
|
<div class="space-x-[20cm]"></div>
|
|
<div class="space-x-[calc(20%-1cm)]"></div>
|
|
<div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
|
|
<div class="lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
|
|
<div class="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
|
|
<div class="text-[2.23rem]"></div>
|
|
<div class="duration-[2s]"></div>
|
|
<div class="mt-[clamp(30px,100px)]"></div>
|
|
<div class="duration-[var(--app-duration)]"></div>
|
|
<div class="p-[var(--app-padding)]"></div>
|
|
<div class="inset-[11px]"></div>
|
|
<div class="blur-[15px]"></div>
|
|
<div class="brightness-[300%]"></div>
|
|
<div class="contrast-[2.4]"></div>
|
|
<div class="grayscale-[0.55]"></div>
|
|
<div class="hue-rotate-[0.8turn]"></div>
|
|
<div class="invert-[0.75]"></div>
|
|
<div class="saturate-[180%]"></div>
|
|
<div class="sepia-[0.2]"></div>
|
|
<div class="backdrop-blur-[11px]"></div>
|
|
<div class="backdrop-brightness-[1.23]"></div>
|
|
<div class="backdrop-contrast-[0.87]"></div>
|
|
<div class="backdrop-grayscale-[0.42]"></div>
|
|
<div class="backdrop-hue-rotate-[1.57rad]"></div>
|
|
<div class="backdrop-invert-[0.66]"></div>
|
|
<div class="backdrop-opacity-[22%]"></div>
|
|
<div class="backdrop-saturate-[144%]"></div>
|
|
<div class="backdrop-sepia-[0.38]"></div>
|
|
</body>
|
|
</html>
|