mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
5809c4d07c
* fix incorrect comment
Probably messed this up in another PR, so just a bit of cleaning.
* implement a formatVariantSelector function
This will be used to eventually simplify the addVariant API.
The idea is that it can take a list of strings that define a certain
format. Then it squashes everything to a single format how you would
expect it.
E.g.:
Input:
- '&:hover'
- '&:focus'
- '.dark &'
- ':merge(.group):hover &'
- ':merge(.group):focus &'
Output:
- ':merge(.group):focus:hover .dark &:focus:hover'
The API here is:
- `&`, this means "The parent" or "The previous selector" (you can
think of it like if you are using nested selectors)
- `:merge(.group)`, this means insert a `.group` if it doesn't exist
yet, but if it does exist already, then merge the new value with the
old value. This allows us to merge group-focus, group-hover into a
single `.group:focus:hover ...`
* add new `format`, `withRule` and `wrap` API for addVariant
* implement backwards compatibility
This will ensure that the backwards compatibility for `modifySelectors`
and direct mutations to the `container` will still work.
We will try to capture the changes made to the `rule.selector`, we will
also "backup" the existing selector. This allows us to diff the old and
new selectors and determine what actually happened.
Once we know this, we can restore the selector to the "old" selector and
add the diffed string e.g.: `.foo &`, to the `collectedFormats` as if
you called `format()` directly. This is a bunch of extra work, but it
allows us to be backwards compatible.
In the future we could also warn if you are using `modifySelectors`, but
it is going to be a little bit tricky, because usually that's
implemented by plugin authors and therefore you don't have direct
control over this. Maybe we can figure out the plugin this is used in
and change the warning somehow?
* fix incorrect test
This was clearly a bug, keyframes should not include escaped variants at
all. The reason this is here in the first place is because the nodes in
a keyframe are also "rule" nodes.
* swap the order of pseudo states
The current implementation had a strange side effect, that resulted in
incorrect class definitions. When you are combining the `:hover` and
`:focus` event, then there is no difference between `:hover:focus` and
`:focus:hover`.
However, when you use `:hover::file-selector-button` or `::file-selector-button:hover`,
then there is a big difference. In the first place, you can hover over the full file input
to apply changes to the `File selector button`.
In the second scenario you have to hover over the `File selector button` itself to apply changes.
You can think of it as function calls:
- focus(hover(text-center))
What you would expect is something like this:
`.focus\:hover\:text-center:hover:focus`, where `hover` is on the
inside, and `focus` is on the outside. However in the current
implementation this is implemented as
`.focus\:hover\:text-cener:focus:hover`
* add more variant tests for the new API
* update parallel variants tests to make use of new API
* implement core variants with new API
* simplify/cleanup existing plugin utils
We can get rid of this because we drastically simplified the new
addVariant API.
* add addVariant shorthand signature
The current API looks like this:
```js
addVariant('name', ({ format, wrap }) => {
// Wrap in an atRule
wrap(postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' }))
// "Mutate" the selector, for example prepend `.dark`
format('.dark &')
})
```
It is also pretty common to have this:
```js
addVariant('name', ({ format }) => format('.dark &'))
```
So we simplified this to:
```js
addVariant('name', '.dark &')
```
It is also pretty common to have this:
```js
addVariant('name', ({ wrap }) => wrap(postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })))
```
So we simplified this to:
```js
addVariant('name', '@media (prefers-reduced-motion: reduce)')
```
* improve fontVariantNumeric implementation
We will use `@defaults`, so that only the resets are injected for the
utilities we actually use.
* fix typo
* allow for nested addVariant shorthand
This will allow to write something like:
```js
addVariant('name', `
@supports (hover: hover) {
@media (print) {
&:hover
}
}
`)
// Or as a one-liner
addVariant('name', '@supports (hover: hover) { @media (print) { &:hover } }')
```
* update changelog
973 lines
20 KiB
CSS
973 lines
20 KiB
CSS
.translate-x-5,
|
|
.-translate-x-4,
|
|
.translate-y-6,
|
|
.-translate-x-3,
|
|
.rotate-3,
|
|
.skew-y-12,
|
|
.skew-x-12,
|
|
.scale-95,
|
|
.transform {
|
|
--tw-translate-x: 0;
|
|
--tw-translate-y: 0;
|
|
--tw-rotate: 0;
|
|
--tw-skew-x: 0;
|
|
--tw-skew-y: 0;
|
|
--tw-scale-x: 1;
|
|
--tw-scale-y: 1;
|
|
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
|
|
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
|
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
}
|
|
|
|
.snap-x {
|
|
--tw-scroll-snap-strictness: proximity;
|
|
}
|
|
|
|
.divide-x-2 > *,
|
|
.divide-y-4 > *,
|
|
.divide-x-0 > *,
|
|
.divide-y-0 > *,
|
|
.border,
|
|
.border-2,
|
|
.border-x-4,
|
|
.border-y-4,
|
|
.border-t,
|
|
.border-b-4 {
|
|
--tw-border-opacity: 1;
|
|
border-color: rgb(229 231 235 / var(--tw-border-opacity));
|
|
}
|
|
|
|
.shadow,
|
|
.shadow-md,
|
|
.shadow-lg {
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-shadow: 0 0 #0000;
|
|
}
|
|
|
|
.ring,
|
|
.ring-4 {
|
|
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-ring-offset-width: 0px;
|
|
--tw-ring-offset-color: #fff;
|
|
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-shadow: 0 0 #0000;
|
|
}
|
|
|
|
.blur-md,
|
|
.brightness-150,
|
|
.contrast-50,
|
|
.drop-shadow-md,
|
|
.grayscale,
|
|
.hue-rotate-60,
|
|
.invert,
|
|
.saturate-200,
|
|
.sepia,
|
|
.filter {
|
|
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-invert: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-saturate: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-sepia: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
}
|
|
|
|
.backdrop-blur-lg,
|
|
.backdrop-brightness-50,
|
|
.backdrop-contrast-0,
|
|
.backdrop-grayscale,
|
|
.backdrop-hue-rotate-90,
|
|
.backdrop-invert,
|
|
.backdrop-opacity-75,
|
|
.backdrop-saturate-150,
|
|
.backdrop-sepia,
|
|
.backdrop-filter {
|
|
--tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
|
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
|
|
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
|
var(--tw-backdrop-sepia);
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.container {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
@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;
|
|
}
|
|
}
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
.pointer-events-none {
|
|
pointer-events: none;
|
|
}
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
.absolute {
|
|
position: absolute;
|
|
}
|
|
.inset-0 {
|
|
top: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
}
|
|
.inset-y-4 {
|
|
top: 1rem;
|
|
bottom: 1rem;
|
|
}
|
|
.inset-x-2 {
|
|
left: 0.5rem;
|
|
right: 0.5rem;
|
|
}
|
|
.top-6 {
|
|
top: 1.5rem;
|
|
}
|
|
.right-8 {
|
|
right: 2rem;
|
|
}
|
|
.bottom-12 {
|
|
bottom: 3rem;
|
|
}
|
|
.left-16 {
|
|
left: 4rem;
|
|
}
|
|
.isolate {
|
|
isolation: isolate;
|
|
}
|
|
.isolation-auto {
|
|
isolation: auto;
|
|
}
|
|
.z-30 {
|
|
z-index: 30;
|
|
}
|
|
.order-last {
|
|
order: 9999;
|
|
}
|
|
.order-2 {
|
|
order: 2;
|
|
}
|
|
.col-span-3 {
|
|
grid-column: span 3 / span 3;
|
|
}
|
|
.col-start-1 {
|
|
grid-column-start: 1;
|
|
}
|
|
.col-end-4 {
|
|
grid-column-end: 4;
|
|
}
|
|
.row-span-2 {
|
|
grid-row: span 2 / span 2;
|
|
}
|
|
.row-start-3 {
|
|
grid-row-start: 3;
|
|
}
|
|
.row-end-5 {
|
|
grid-row-end: 5;
|
|
}
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
.clear-left {
|
|
clear: left;
|
|
}
|
|
.m-4 {
|
|
margin: 1rem;
|
|
}
|
|
.my-2 {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.mx-auto {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.mt-0 {
|
|
margin-top: 0px;
|
|
}
|
|
.mr-1 {
|
|
margin-right: 0.25rem;
|
|
}
|
|
.mb-3 {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.ml-4 {
|
|
margin-left: 1rem;
|
|
}
|
|
.box-border {
|
|
box-sizing: border-box;
|
|
}
|
|
.inline-grid {
|
|
display: inline-grid;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.aspect-square {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
.aspect-video {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
.h-16 {
|
|
height: 4rem;
|
|
}
|
|
.max-h-screen {
|
|
max-height: 100vh;
|
|
}
|
|
.min-h-0 {
|
|
min-height: 0px;
|
|
}
|
|
.w-12 {
|
|
width: 3rem;
|
|
}
|
|
.min-w-min {
|
|
min-width: min-content;
|
|
}
|
|
.max-w-full {
|
|
max-width: 100%;
|
|
}
|
|
.flex-1 {
|
|
flex: 1 1 0%;
|
|
}
|
|
.flex-shrink {
|
|
flex-shrink: 1;
|
|
}
|
|
.flex-shrink-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
.shrink {
|
|
flex-shrink: 1;
|
|
}
|
|
.shrink-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
.flex-grow {
|
|
flex-grow: 1;
|
|
}
|
|
.flex-grow-0 {
|
|
flex-grow: 0;
|
|
}
|
|
.grow {
|
|
flex-grow: 1;
|
|
}
|
|
.grow-0 {
|
|
flex-grow: 0;
|
|
}
|
|
.basis-auto {
|
|
flex-basis: auto;
|
|
}
|
|
.basis-7 {
|
|
flex-basis: 1.75rem;
|
|
}
|
|
.table-fixed {
|
|
table-layout: fixed;
|
|
}
|
|
.border-collapse {
|
|
border-collapse: collapse;
|
|
}
|
|
.origin-top-right {
|
|
transform-origin: top right;
|
|
}
|
|
.translate-x-5 {
|
|
--tw-translate-x: 1.25rem;
|
|
transform: var(--tw-transform);
|
|
}
|
|
.-translate-x-4 {
|
|
--tw-translate-x: -1rem;
|
|
transform: var(--tw-transform);
|
|
}
|
|
.translate-y-6 {
|
|
--tw-translate-y: 1.5rem;
|
|
transform: var(--tw-transform);
|
|
}
|
|
.-translate-x-3 {
|
|
--tw-translate-x: -0.75rem;
|
|
transform: var(--tw-transform);
|
|
}
|
|
.rotate-3 {
|
|
--tw-rotate: 3deg;
|
|
transform: var(--tw-transform);
|
|
}
|
|
.skew-y-12 {
|
|
--tw-skew-y: 12deg;
|
|
transform: var(--tw-transform);
|
|
}
|
|
.skew-x-12 {
|
|
--tw-skew-x: 12deg;
|
|
transform: var(--tw-transform);
|
|
}
|
|
.scale-95 {
|
|
--tw-scale-x: 0.95;
|
|
--tw-scale-y: 0.95;
|
|
transform: var(--tw-transform);
|
|
}
|
|
.transform {
|
|
transform: var(--tw-transform);
|
|
}
|
|
.transform-gpu {
|
|
--tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
|
|
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
|
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
}
|
|
.transform-none {
|
|
transform: none;
|
|
}
|
|
.animate-none {
|
|
animation: none;
|
|
}
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
.touch-pan-y {
|
|
touch-action: pan-y;
|
|
}
|
|
.touch-manipulation {
|
|
touch-action: manipulation;
|
|
}
|
|
.select-none {
|
|
user-select: none;
|
|
}
|
|
.resize-none {
|
|
resize: none;
|
|
}
|
|
.snap-x {
|
|
scroll-snap-type: x var(--tw-scroll-snap-strictness);
|
|
}
|
|
.snap-mandatory {
|
|
--tw-scroll-snap-strictness: mandatory;
|
|
}
|
|
.snap-center {
|
|
scroll-snap-align: center;
|
|
}
|
|
.snap-always {
|
|
scroll-snap-stop: always;
|
|
}
|
|
.scroll-mt-6 {
|
|
scroll-margin-top: 1.5rem;
|
|
}
|
|
.scroll-p-6 {
|
|
scroll-padding: 1.5rem;
|
|
}
|
|
.list-inside {
|
|
list-style-position: inside;
|
|
}
|
|
.list-disc {
|
|
list-style-type: disc;
|
|
}
|
|
.appearance-none {
|
|
appearance: none;
|
|
}
|
|
.columns-1 {
|
|
columns: 1;
|
|
}
|
|
.columns-md {
|
|
columns: 28rem;
|
|
}
|
|
.break-before-page {
|
|
break-before: page;
|
|
}
|
|
.break-inside-avoid-column {
|
|
break-inside: avoid-column;
|
|
}
|
|
.break-after-auto {
|
|
break-after: auto;
|
|
}
|
|
.auto-cols-min {
|
|
grid-auto-columns: min-content;
|
|
}
|
|
.grid-flow-row {
|
|
grid-auto-flow: row;
|
|
}
|
|
.auto-rows-max {
|
|
grid-auto-rows: max-content;
|
|
}
|
|
.grid-cols-4 {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
.grid-rows-3 {
|
|
grid-template-rows: repeat(3, minmax(0, 1fr));
|
|
}
|
|
.flex-row-reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
.place-content-start {
|
|
place-content: start;
|
|
}
|
|
.place-items-end {
|
|
place-items: end;
|
|
}
|
|
.content-center {
|
|
align-content: center;
|
|
}
|
|
.items-start {
|
|
align-items: flex-start;
|
|
}
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
.justify-items-end {
|
|
justify-items: end;
|
|
}
|
|
.gap-4 {
|
|
gap: 1rem;
|
|
}
|
|
.gap-x-2 {
|
|
column-gap: 0.5rem;
|
|
}
|
|
.gap-y-3 {
|
|
row-gap: 0.75rem;
|
|
}
|
|
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-x-reverse: 0;
|
|
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
|
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
|
}
|
|
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-y-reverse: 0;
|
|
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
|
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
|
}
|
|
.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-y-reverse: 1;
|
|
}
|
|
.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-x-reverse: 1;
|
|
}
|
|
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-x-reverse: 0;
|
|
border-right-width: calc(2px * var(--tw-divide-x-reverse));
|
|
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
|
|
}
|
|
.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-y-reverse: 0;
|
|
border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
|
|
border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
|
|
}
|
|
.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-x-reverse: 0;
|
|
border-right-width: calc(0px * var(--tw-divide-x-reverse));
|
|
border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
|
|
}
|
|
.divide-y-0 > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-y-reverse: 0;
|
|
border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
|
|
border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
|
|
}
|
|
.divide-dotted > :not([hidden]) ~ :not([hidden]) {
|
|
border-style: dotted;
|
|
}
|
|
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-opacity: 1;
|
|
border-color: rgb(229 231 235 / var(--tw-divide-opacity));
|
|
}
|
|
.divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-opacity: 0.5;
|
|
}
|
|
.place-self-center {
|
|
place-self: center;
|
|
}
|
|
.self-end {
|
|
align-self: flex-end;
|
|
}
|
|
.justify-self-start {
|
|
justify-self: start;
|
|
}
|
|
.overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
.overscroll-contain {
|
|
overscroll-behavior: contain;
|
|
}
|
|
.truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.overflow-ellipsis {
|
|
text-overflow: ellipsis;
|
|
}
|
|
.whitespace-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
.break-words {
|
|
overflow-wrap: break-word;
|
|
}
|
|
.rounded-md {
|
|
border-radius: 0.375rem;
|
|
}
|
|
.border {
|
|
border-width: 1px;
|
|
}
|
|
.border-2 {
|
|
border-width: 2px;
|
|
}
|
|
.border-x-4 {
|
|
border-left-width: 4px;
|
|
border-right-width: 4px;
|
|
}
|
|
.border-y-4 {
|
|
border-top-width: 4px;
|
|
border-bottom-width: 4px;
|
|
}
|
|
.border-t {
|
|
border-top-width: 1px;
|
|
}
|
|
.border-b-4 {
|
|
border-bottom-width: 4px;
|
|
}
|
|
.border-solid {
|
|
border-style: solid;
|
|
}
|
|
.border-hidden {
|
|
border-style: hidden;
|
|
}
|
|
.border-black {
|
|
--tw-border-opacity: 1;
|
|
border-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
}
|
|
.border-x-black {
|
|
--tw-border-opacity: 1;
|
|
border-left-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
border-right-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
}
|
|
.border-y-black {
|
|
--tw-border-opacity: 1;
|
|
border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
}
|
|
.border-t-black {
|
|
--tw-border-opacity: 1;
|
|
border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
}
|
|
.border-r-black {
|
|
--tw-border-opacity: 1;
|
|
border-right-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
}
|
|
.border-b-black {
|
|
--tw-border-opacity: 1;
|
|
border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
}
|
|
.border-l-black {
|
|
--tw-border-opacity: 1;
|
|
border-left-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
}
|
|
.border-opacity-10 {
|
|
--tw-border-opacity: 0.1;
|
|
}
|
|
.bg-green-500 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
|
}
|
|
.bg-opacity-20 {
|
|
--tw-bg-opacity: 0.2;
|
|
}
|
|
.bg-gradient-to-r {
|
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
}
|
|
.from-red-300 {
|
|
--tw-gradient-from: #fca5a5;
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0));
|
|
}
|
|
.via-purple-200 {
|
|
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0));
|
|
}
|
|
.to-blue-400 {
|
|
--tw-gradient-to: #60a5fa;
|
|
}
|
|
.decoration-slice {
|
|
box-decoration-break: slice;
|
|
}
|
|
.decoration-clone {
|
|
box-decoration-break: clone;
|
|
}
|
|
.bg-cover {
|
|
background-size: cover;
|
|
}
|
|
.bg-local {
|
|
background-attachment: local;
|
|
}
|
|
.bg-clip-border {
|
|
background-clip: border-box;
|
|
}
|
|
.bg-top {
|
|
background-position: top;
|
|
}
|
|
.bg-no-repeat {
|
|
background-repeat: no-repeat;
|
|
}
|
|
.bg-origin-border {
|
|
background-origin: border-box;
|
|
}
|
|
.bg-origin-padding {
|
|
background-origin: padding-box;
|
|
}
|
|
.bg-origin-content {
|
|
background-origin: content-box;
|
|
}
|
|
.fill-current {
|
|
fill: currentColor;
|
|
}
|
|
.stroke-current {
|
|
stroke: currentColor;
|
|
}
|
|
.stroke-2 {
|
|
stroke-width: 2;
|
|
}
|
|
.object-cover {
|
|
object-fit: cover;
|
|
}
|
|
.object-bottom {
|
|
object-position: bottom;
|
|
}
|
|
.p-4 {
|
|
padding: 1rem;
|
|
}
|
|
.py-2 {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.px-3 {
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
}
|
|
.pt-1 {
|
|
padding-top: 0.25rem;
|
|
}
|
|
.pr-2 {
|
|
padding-right: 0.5rem;
|
|
}
|
|
.pb-3 {
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
.pl-4 {
|
|
padding-left: 1rem;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.indent-6 {
|
|
text-indent: 1.5rem;
|
|
}
|
|
.-indent-12 {
|
|
text-indent: -3rem;
|
|
}
|
|
.align-middle {
|
|
vertical-align: middle;
|
|
}
|
|
.font-sans {
|
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
}
|
|
.text-2xl {
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
}
|
|
.font-medium {
|
|
font-weight: 500;
|
|
}
|
|
.uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
.not-italic {
|
|
font-style: normal;
|
|
}
|
|
.ordinal,
|
|
.tabular-nums,
|
|
.diagonal-fractions {
|
|
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
|
|
--tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
|
}
|
|
.ordinal {
|
|
--tw-ordinal: ordinal;
|
|
font-variant-numeric: var(--tw-font-variant-numeric);
|
|
}
|
|
.tabular-nums {
|
|
--tw-numeric-spacing: tabular-nums;
|
|
font-variant-numeric: var(--tw-font-variant-numeric);
|
|
}
|
|
.diagonal-fractions {
|
|
--tw-numeric-fraction: diagonal-fractions;
|
|
font-variant-numeric: var(--tw-font-variant-numeric);
|
|
}
|
|
.leading-relaxed {
|
|
line-height: 1.625;
|
|
}
|
|
.leading-5 {
|
|
line-height: 1.25rem;
|
|
}
|
|
.tracking-tight {
|
|
letter-spacing: -0.025em;
|
|
}
|
|
.text-indigo-500 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(99 102 241 / var(--tw-text-opacity));
|
|
}
|
|
.text-opacity-10 {
|
|
--tw-text-opacity: 0.1;
|
|
}
|
|
.underline {
|
|
text-decoration: underline;
|
|
}
|
|
.decoration-red-600 {
|
|
text-decoration-color: #dc2626;
|
|
}
|
|
.antialiased {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.placeholder-green-300::placeholder {
|
|
--tw-placeholder-opacity: 1;
|
|
color: rgb(134 239 172 / var(--tw-placeholder-opacity));
|
|
}
|
|
.placeholder-opacity-60::placeholder {
|
|
--tw-placeholder-opacity: 0.6;
|
|
}
|
|
.caret-red-600 {
|
|
caret-color: #dc2626;
|
|
}
|
|
.accent-red-600 {
|
|
accent-color: #dc2626;
|
|
}
|
|
.opacity-90 {
|
|
opacity: 0.9;
|
|
}
|
|
.bg-blend-darken {
|
|
background-blend-mode: darken;
|
|
}
|
|
.bg-blend-difference {
|
|
background-blend-mode: difference;
|
|
}
|
|
.mix-blend-multiply {
|
|
mix-blend-mode: multiply;
|
|
}
|
|
.mix-blend-saturation {
|
|
mix-blend-mode: saturation;
|
|
}
|
|
.shadow {
|
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.shadow-md {
|
|
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.shadow-lg {
|
|
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.outline-none {
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
.outline-black {
|
|
outline: 2px dotted black;
|
|
outline-offset: 2px;
|
|
}
|
|
.ring {
|
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
|
|
var(--tw-ring-offset-color);
|
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
|
|
var(--tw-ring-color);
|
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
}
|
|
.ring-4 {
|
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
|
|
var(--tw-ring-offset-color);
|
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width))
|
|
var(--tw-ring-color);
|
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
}
|
|
.ring-white {
|
|
--tw-ring-opacity: 1;
|
|
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
|
|
}
|
|
.ring-opacity-40 {
|
|
--tw-ring-opacity: 0.4;
|
|
}
|
|
.ring-offset-2 {
|
|
--tw-ring-offset-width: 2px;
|
|
}
|
|
.ring-offset-blue-300 {
|
|
--tw-ring-offset-color: #93c5fd;
|
|
}
|
|
.blur-md {
|
|
--tw-blur: blur(12px);
|
|
filter: var(--tw-filter);
|
|
}
|
|
.brightness-150 {
|
|
--tw-brightness: brightness(1.5);
|
|
filter: var(--tw-filter);
|
|
}
|
|
.contrast-50 {
|
|
--tw-contrast: contrast(0.5);
|
|
filter: var(--tw-filter);
|
|
}
|
|
.drop-shadow-md {
|
|
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
|
|
drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
|
|
filter: var(--tw-filter);
|
|
}
|
|
.grayscale {
|
|
--tw-grayscale: grayscale(100%);
|
|
filter: var(--tw-filter);
|
|
}
|
|
.hue-rotate-60 {
|
|
--tw-hue-rotate: hue-rotate(60deg);
|
|
filter: var(--tw-filter);
|
|
}
|
|
.invert {
|
|
--tw-invert: invert(100%);
|
|
filter: var(--tw-filter);
|
|
}
|
|
.saturate-200 {
|
|
--tw-saturate: saturate(2);
|
|
filter: var(--tw-filter);
|
|
}
|
|
.sepia {
|
|
--tw-sepia: sepia(100%);
|
|
filter: var(--tw-filter);
|
|
}
|
|
.filter {
|
|
filter: var(--tw-filter);
|
|
}
|
|
.filter-none {
|
|
filter: none;
|
|
}
|
|
.backdrop-blur-lg {
|
|
--tw-backdrop-blur: blur(16px);
|
|
backdrop-filter: var(--tw-backdrop-filter);
|
|
}
|
|
.backdrop-brightness-50 {
|
|
--tw-backdrop-brightness: brightness(0.5);
|
|
backdrop-filter: var(--tw-backdrop-filter);
|
|
}
|
|
.backdrop-contrast-0 {
|
|
--tw-backdrop-contrast: contrast(0);
|
|
backdrop-filter: var(--tw-backdrop-filter);
|
|
}
|
|
.backdrop-grayscale {
|
|
--tw-backdrop-grayscale: grayscale(100%);
|
|
backdrop-filter: var(--tw-backdrop-filter);
|
|
}
|
|
.backdrop-hue-rotate-90 {
|
|
--tw-backdrop-hue-rotate: hue-rotate(90deg);
|
|
backdrop-filter: var(--tw-backdrop-filter);
|
|
}
|
|
.backdrop-invert {
|
|
--tw-backdrop-invert: invert(100%);
|
|
backdrop-filter: var(--tw-backdrop-filter);
|
|
}
|
|
.backdrop-opacity-75 {
|
|
--tw-backdrop-opacity: opacity(0.75);
|
|
backdrop-filter: var(--tw-backdrop-filter);
|
|
}
|
|
.backdrop-saturate-150 {
|
|
--tw-backdrop-saturate: saturate(1.5);
|
|
backdrop-filter: var(--tw-backdrop-filter);
|
|
}
|
|
.backdrop-sepia {
|
|
--tw-backdrop-sepia: sepia(100%);
|
|
backdrop-filter: var(--tw-backdrop-filter);
|
|
}
|
|
.backdrop-filter {
|
|
backdrop-filter: var(--tw-backdrop-filter);
|
|
}
|
|
.backdrop-filter-none {
|
|
backdrop-filter: none;
|
|
}
|
|
.transition {
|
|
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
|
|
transform, filter, backdrop-filter;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
.transition-all {
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
.delay-300 {
|
|
transition-delay: 300ms;
|
|
}
|
|
.duration-200 {
|
|
transition-duration: 200ms;
|
|
}
|
|
.ease-in-out {
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.will-change-scroll {
|
|
will-change: scroll-position;
|
|
}
|
|
.will-change-transform {
|
|
will-change: transform;
|
|
}
|
|
.content-none {
|
|
content: none;
|
|
}
|