There are five modes below to choose from.
If an instruction doesn't know how to interpret it, it is left as-is.
<div class="inset-unknown"></div>
For some instructions, units can be added directly
<div class="inset-1px"></div>
<div class="inset-[1px]"></div>
Fractions will be reduced to the simplest
<div class="inset-1/1"></div>
<div class="inset-1/2"></div>
<div class="inset-1/1"></div>
<div class="inset-1/1"></div>
Arbitrary values are never reduced, so two classes are generated.
But turn on `obfuscate` can reduce redundant classes.
<div class="inset-unset"></div>
<div class="inset-[unset]"></div>
Note that not all directives can be inlined.
<div class="container divide-solid"></div>
The positioning follows the keypad positioning method, top=8, down=2, left=4, right=6
You can write redundant instructions together, the latter will overwrite the former
<div class="object-7"></div>
`( )` indicates a command group, the first command will broadcast to the following commands
<div class="blur-8 brightness-100 contrast-100 grayscale-100 hue-rotate-180 invert-100 opacity-50 saturate-100 sepia-100"></div>
<div class="backdrop-blur-8 backdrop-brightness-100 backdrop-contrast-100 backdrop-grayscale-100 backdrop-hue-rotate-180 backdrop-invert-100 backdrop-opacity-50 backdrop-saturate-100 backdrop-sepia-100"></div>
.backdrop-blur-8 {
backdrop-filter: blur(8px);
}
.backdrop-brightness-100 {
backdrop-filter: brightness();
}
.backdrop-contrast-100 {
backdrop-filter: contrast();
}
.backdrop-grayscale-100 {
backdrop-filter: grayscale();
}
.backdrop-hue-rotate-180 {
backdrop-filter: hue-rotate(180deg);
}
.backdrop-invert-100 {
backdrop-filter: invert();
}
.backdrop-opacity-50 {
backdrop-filter: opacity(50%);
}
.backdrop-saturate-100 {
backdrop-filter: saturate();
}
.backdrop-sepia-100 {
backdrop-filter: sepia();
}
.blur-8 {
filter: blur(8px);
}
.brightness-100 {
filter: brightness();
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 720px) {
.container {
max-width: 720px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.contrast-100 {
filter: contrast();
}
.divide-solid {
divide-style: solid;
}
.grayscale-100 {
filter: grayscale();
}
.hue-rotate-180 {
filter: hue-rotate(180deg);
}
.inset-1\/1 {
inset: 100%;
}
.inset-1\/2 {
inset: 50%;
}
.inset-1px, .inset-\[1px\] {
inset: 1px;
}
.inset-\[unset\], .inset-unset {
bottom: unset;
left: unset;
right: unset;
top: unset;
}
.invert-100 {
filter: invert();
}
.object-7 {
object-position: 0% 0%;
}
.opacity-50 {
opacity: .5;
}
.saturate-100 {
filter: saturate();
}
.sepia-100 {
filter: sepia();
}