diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 3e69e8540db1..e4aebfef0151 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -23,7 +23,7 @@ jobs: strategy: matrix: - node-version: [12, 14, 16, 18] + node-version: [16] steps: - uses: actions/checkout@v3 @@ -33,6 +33,10 @@ jobs: node-version: ${{ matrix.node-version }} # cache: 'npm' + - name: Install newer version of npm on older versions of Node.js + if: matrix.node-version < 16 + run: npm install -g npm@7 + - name: Cache node_modules uses: actions/cache@v3 with: @@ -57,12 +61,9 @@ jobs: - name: Build Tailwind CSS run: npx turbo run oxide:build --filter=// - - name: Test (default) + - name: Test run: npx turbo run test --filter=// - - name: Test (oxide) - run: OXIDE=1 npx turbo run test --filter=// - lint: runs-on: ubuntu-latest diff --git a/CHANGELOG.md b/CHANGELOG.md index 50ee9372c17f..f4e7fac0b71a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `--watch=always` option to prevent exit when stdin closes ([#9966](https://github.com/tailwindlabs/tailwindcss/pull/9966)) - Add standalone CLI build for 64-bit Windows on ARM (`node16-win-arm64`) ([#10001](https://github.com/tailwindlabs/tailwindcss/pull/10001)) - Add `delay-0` and `duration-0` by default ([#10294](https://github.com/tailwindlabs/tailwindcss/pull/10294)) +- Add logical properties support for inline direction ([#10166](https://github.com/tailwindlabs/tailwindcss/pull/10166)) ### Fixed diff --git a/package.json b/package.json index b6b0bae0dcb3..9c2b99111ed3 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "rebuild-fixtures": "npm run build && node -r @swc/register scripts/rebuildFixtures.js", "style": "eslint .", "pretest": "npm run generate", - "test": "jest", + "test": "jest && OXIDE=1 jest", "test:integrations": "npm run test --prefix ./integrations", "install:integrations": "node scripts/install-integrations.js", "generate:plugin-list": "node -r @swc/register scripts/create-plugin-list.js", diff --git a/src/corePlugins.js b/src/corePlugins.js index 47521e5eed10..0a6c49db27c1 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,6 +1,7 @@ import fs from 'fs' import * as path from 'path' import postcss from 'postcss' +import { env } from './lib/sharedState' import createUtilityPlugin from './util/createUtilityPlugin' import buildMediaQuery from './util/buildMediaQuery' import escapeClassName from './util/escapeClassName' @@ -623,6 +624,8 @@ export let corePlugins = { ['inset-y', ['top', 'bottom']], ], [ + ['start', ['inset-inline-start']], + ['end', ['inset-inline-end']], ['top', ['top']], ['right', ['right']], ['bottom', ['bottom']], @@ -674,6 +677,8 @@ export let corePlugins = { ['my', ['margin-top', 'margin-bottom']], ], [ + ['ms', ['margin-inline-start']], + ['me', ['margin-inline-end']], ['mt', ['margin-top']], ['mr', ['margin-right']], ['mb', ['margin-bottom']], @@ -1022,6 +1027,8 @@ export let corePlugins = { ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']], ], [ + ['scroll-ms', ['scroll-margin-inline-start']], + ['scroll-me', ['scroll-margin-inline-end']], ['scroll-mt', ['scroll-margin-top']], ['scroll-mr', ['scroll-margin-right']], ['scroll-mb', ['scroll-margin-bottom']], @@ -1038,6 +1045,8 @@ export let corePlugins = { ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']], ], [ + ['scroll-ps', ['scroll-padding-inline-start']], + ['scroll-pe', ['scroll-padding-inline-end']], ['scroll-pt', ['scroll-padding-top']], ['scroll-pr', ['scroll-padding-right']], ['scroll-pb', ['scroll-padding-bottom']], @@ -1211,6 +1220,16 @@ export let corePlugins = { 'space-x': (value) => { value = value === '0' ? '0px' : value + if (env.OXIDE) { + return { + '& > :not([hidden]) ~ :not([hidden])': { + '--tw-space-x-reverse': '0', + 'margin-inline-end': `calc(${value} * var(--tw-space-x-reverse))`, + 'margin-inline-start': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`, + }, + } + } + return { '& > :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', @@ -1246,6 +1265,17 @@ export let corePlugins = { 'divide-x': (value) => { value = value === '0' ? '0px' : value + if (env.OXIDE) { + return { + '& > :not([hidden]) ~ :not([hidden])': { + '@defaults border-width': {}, + '--tw-divide-x-reverse': '0', + 'border-inline-end-width': `calc(${value} * var(--tw-divide-x-reverse))`, + 'border-inline-start-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`, + }, + } + } + return { '& > :not([hidden]) ~ :not([hidden])': { '@defaults border-width': {}, @@ -1435,12 +1465,18 @@ export let corePlugins = { borderRadius: createUtilityPlugin('borderRadius', [ ['rounded', ['border-radius']], [ + ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']], + ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']], ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']], ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']], ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']], ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']], ], [ + ['rounded-ss', ['border-start-start-radius']], + ['rounded-se', ['border-start-end-radius']], + ['rounded-ee', ['border-end-end-radius']], + ['rounded-es', ['border-end-start-radius']], ['rounded-tl', ['border-top-left-radius']], ['rounded-tr', ['border-top-right-radius']], ['rounded-br', ['border-bottom-right-radius']], @@ -1457,6 +1493,8 @@ export let corePlugins = { ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']], ], [ + ['border-s', [['@defaults border-width', {}], 'border-inline-start-width']], + ['border-e', [['@defaults border-width', {}], 'border-inline-end-width']], ['border-t', [['@defaults border-width', {}], 'border-top-width']], ['border-r', [['@defaults border-width', {}], 'border-right-width']], ['border-b', [['@defaults border-width', {}], 'border-bottom-width']], @@ -1539,6 +1577,32 @@ export let corePlugins = { matchUtilities( { + 'border-s': (value) => { + if (!corePlugins('borderOpacity')) { + return { + 'border-inline-start-color': toColorValue(value), + } + } + + return withAlphaVariable({ + color: value, + property: 'border-inline-start-color', + variable: '--tw-border-opacity', + }) + }, + 'border-e': (value) => { + if (!corePlugins('borderOpacity')) { + return { + 'border-inline-end-color': toColorValue(value), + } + } + + return withAlphaVariable({ + color: value, + property: 'border-inline-end-color', + variable: '--tw-border-opacity', + }) + }, 'border-t': (value) => { if (!corePlugins('borderOpacity')) { return { @@ -1775,6 +1839,8 @@ export let corePlugins = { ['py', ['padding-top', 'padding-bottom']], ], [ + ['ps', ['padding-inline-start']], + ['pe', ['padding-inline-end']], ['pt', ['padding-top']], ['pr', ['padding-right']], ['pb', ['padding-bottom']], diff --git a/tests/any-type.test.js b/tests/any-type.test.js index ebfefd3c8b20..4f73edc2d838 100644 --- a/tests/any-type.test.js +++ b/tests/any-type.test.js @@ -1,4 +1,5 @@ import { run, html, css } from './util/run' +import { env } from '../src/lib/sharedState' // Hi there, so you are debugging this test because something failed... right? Well we can look into // the future and guessed that this would happen. So basically it means that we (it was probably @@ -184,578 +185,1154 @@ test('any types are set on correct plugins', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - .inset-\[var\(--any-value\)\] { - top: var(--any-value); - right: var(--any-value); - bottom: var(--any-value); - left: var(--any-value); - } - .inset-x-\[var\(--any-value\)\] { - left: var(--any-value); - right: var(--any-value); - } - .inset-y-\[var\(--any-value\)\] { - top: var(--any-value); - bottom: var(--any-value); - } - .bottom-\[var\(--any-value\)\] { - bottom: var(--any-value); - } - .left-\[var\(--any-value\)\] { - left: var(--any-value); - } - .right-\[var\(--any-value\)\] { - right: var(--any-value); - } - .top-\[var\(--any-value\)\] { - top: var(--any-value); - } - .z-\[var\(--any-value\)\] { - z-index: var(--any-value); - } - .order-\[var\(--any-value\)\] { - order: var(--any-value); - } - .col-\[var\(--any-value\)\] { - grid-column: var(--any-value); - } - .col-start-\[var\(--any-value\)\] { - grid-column-start: var(--any-value); - } - .col-end-\[var\(--any-value\)\] { - grid-column-end: var(--any-value); - } - .row-\[var\(--any-value\)\] { - grid-row: var(--any-value); - } - .row-start-\[var\(--any-value\)\] { - grid-row-start: var(--any-value); - } - .row-end-\[var\(--any-value\)\] { - grid-row-end: var(--any-value); - } - .m-\[var\(--any-value\)\] { - margin: var(--any-value); - } - .mx-\[var\(--any-value\)\] { - margin-left: var(--any-value); - margin-right: var(--any-value); - } - .my-\[var\(--any-value\)\] { - margin-top: var(--any-value); - margin-bottom: var(--any-value); - } - .mb-\[var\(--any-value\)\] { - margin-bottom: var(--any-value); - } - .ml-\[var\(--any-value\)\] { - margin-left: var(--any-value); - } - .mr-\[var\(--any-value\)\] { - margin-right: var(--any-value); - } - .mt-\[var\(--any-value\)\] { - margin-top: var(--any-value); - } - .aspect-\[var\(--any-value\)\] { - aspect-ratio: var(--any-value); - } - .h-\[var\(--any-value\)\] { - height: var(--any-value); - } - .max-h-\[var\(--any-value\)\] { - max-height: var(--any-value); - } - .min-h-\[var\(--any-value\)\] { - min-height: var(--any-value); - } - .w-\[var\(--any-value\)\] { - width: var(--any-value); - } - .min-w-\[var\(--any-value\)\] { - min-width: var(--any-value); - } - .max-w-\[var\(--any-value\)\] { - max-width: var(--any-value); - } - .flex-\[var\(--any-value\)\] { - flex: var(--any-value); - } - .flex-shrink-\[var\(--any-value\)\] { - flex-shrink: var(--any-value); - } - .shrink-\[var\(--any-value\)\] { - flex-shrink: var(--any-value); - } - .flex-grow-\[var\(--any-value\)\] { - flex-grow: var(--any-value); - } - .grow-\[var\(--any-value\)\] { - flex-grow: var(--any-value); - } - .basis-\[var\(--any-value\)\] { - flex-basis: var(--any-value); - } - .border-spacing-\[var\(--any-value\)\] { - --tw-border-spacing-x: var(--any-value); - --tw-border-spacing-y: var(--any-value); - border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); - } - .border-spacing-x-\[var\(--any-value\)\] { - --tw-border-spacing-x: var(--any-value); - border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); - } - .border-spacing-y-\[var\(--any-value\)\] { - --tw-border-spacing-y: var(--any-value); - border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); - } - .origin-\[var\(--any-value\)\] { - transform-origin: var(--any-value); - } - .translate-x-\[var\(--any-value\)\] { - --tw-translate-x: var(--any-value); - transform: translate(var(--tw-translate-x), 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)); - } - .translate-y-\[var\(--any-value\)\] { - --tw-translate-y: var(--any-value); - transform: translate(var(--tw-translate-x), 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)); - } - .rotate-\[var\(--any-value\)\] { - --tw-rotate: var(--any-value); - transform: translate(var(--tw-translate-x), 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)); - } - .scale-\[var\(--any-value\)\] { - --tw-scale-x: var(--any-value); - --tw-scale-y: var(--any-value); - transform: translate(var(--tw-translate-x), 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)); - } - .scale-x-\[var\(--any-value\)\] { - --tw-scale-x: var(--any-value); - transform: translate(var(--tw-translate-x), 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)); - } - .scale-y-\[var\(--any-value\)\] { - --tw-scale-y: var(--any-value); - transform: translate(var(--tw-translate-x), 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)); - } - .animate-\[var\(--any-value\)\] { - animation: var(--any-value); - } - .cursor-\[var\(--any-value\)\] { - cursor: var(--any-value); - } - .scroll-m-\[var\(--any-value\)\] { - scroll-margin: var(--any-value); - } - .scroll-mx-\[var\(--any-value\)\] { - scroll-margin-left: var(--any-value); - scroll-margin-right: var(--any-value); - } - .scroll-my-\[var\(--any-value\)\] { - scroll-margin-top: var(--any-value); - scroll-margin-bottom: var(--any-value); - } - .scroll-mb-\[var\(--any-value\)\] { - scroll-margin-bottom: var(--any-value); - } - .scroll-ml-\[var\(--any-value\)\] { - scroll-margin-left: var(--any-value); - } - .scroll-mr-\[var\(--any-value\)\] { - scroll-margin-right: var(--any-value); - } - .scroll-mt-\[var\(--any-value\)\] { - scroll-margin-top: var(--any-value); - } - .scroll-p-\[var\(--any-value\)\] { - scroll-padding: var(--any-value); - } - .scroll-px-\[var\(--any-value\)\] { - scroll-padding-left: var(--any-value); - scroll-padding-right: var(--any-value); - } - .scroll-py-\[var\(--any-value\)\] { - scroll-padding-top: var(--any-value); - scroll-padding-bottom: var(--any-value); - } - .scroll-pb-\[var\(--any-value\)\] { - scroll-padding-bottom: var(--any-value); - } - .scroll-pl-\[var\(--any-value\)\] { - scroll-padding-left: var(--any-value); - } - .scroll-pr-\[var\(--any-value\)\] { - scroll-padding-right: var(--any-value); - } - .scroll-pt-\[var\(--any-value\)\] { - scroll-padding-top: var(--any-value); - } - .list-\[var\(--any-value\)\] { - list-style-type: var(--any-value); - } - .columns-\[var\(--any-value\)\] { - columns: var(--any-value); - } - .auto-cols-\[var\(--any-value\)\] { - grid-auto-columns: var(--any-value); - } - .auto-rows-\[var\(--any-value\)\] { - grid-auto-rows: var(--any-value); - } - .grid-cols-\[var\(--any-value\)\] { - grid-template-columns: var(--any-value); - } - .grid-rows-\[var\(--any-value\)\] { - grid-template-rows: var(--any-value); - } - .gap-\[var\(--any-value\)\] { - gap: var(--any-value); - } - .gap-x-\[var\(--any-value\)\] { - column-gap: var(--any-value); - } - .gap-y-\[var\(--any-value\)\] { - row-gap: var(--any-value); - } - .space-x-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(var(--any-value) * var(--tw-space-x-reverse)); - margin-left: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse))); - } - .space-y-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(var(--any-value) * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(var(--any-value) * var(--tw-space-y-reverse)); - } - .divide-y-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { - --tw-divide-y-reverse: 0; - border-top-width: calc(var(--any-value) * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(var(--any-value) * var(--tw-divide-y-reverse)); - } - .divide-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { - border-color: var(--any-value); - } - .divide-opacity-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: var(--any-value); - } - .rounded-\[var\(--any-value\)\] { - border-radius: var(--any-value); - } - .rounded-b-\[var\(--any-value\)\] { - border-bottom-right-radius: var(--any-value); - border-bottom-left-radius: var(--any-value); - } - .rounded-l-\[var\(--any-value\)\] { - border-top-left-radius: var(--any-value); - border-bottom-left-radius: var(--any-value); - } - .rounded-r-\[var\(--any-value\)\] { - border-top-right-radius: var(--any-value); - border-bottom-right-radius: var(--any-value); - } - .rounded-t-\[var\(--any-value\)\] { - border-top-left-radius: var(--any-value); - border-top-right-radius: var(--any-value); - } - .rounded-bl-\[var\(--any-value\)\] { - border-bottom-left-radius: var(--any-value); - } - .rounded-br-\[var\(--any-value\)\] { - border-bottom-right-radius: var(--any-value); - } - .rounded-tl-\[var\(--any-value\)\] { - border-top-left-radius: var(--any-value); - } - .rounded-tr-\[var\(--any-value\)\] { - border-top-right-radius: var(--any-value); - } - .border-\[var\(--any-value\)\] { - border-color: var(--any-value); - } - .border-x-\[var\(--any-value\)\] { - border-left-color: var(--any-value); - border-right-color: var(--any-value); - } - .border-y-\[var\(--any-value\)\] { - border-top-color: var(--any-value); - border-bottom-color: var(--any-value); - } - .border-b-\[var\(--any-value\)\] { - border-bottom-color: var(--any-value); - } - .border-l-\[var\(--any-value\)\] { - border-left-color: var(--any-value); - } - .border-r-\[var\(--any-value\)\] { - border-right-color: var(--any-value); - } - .border-t-\[var\(--any-value\)\] { - border-top-color: var(--any-value); - } - .border-opacity-\[var\(--any-value\)\] { - --tw-border-opacity: var(--any-value); - } - .bg-\[var\(--any-value\)\] { - background-color: var(--any-value); - } - .bg-opacity-\[var\(--any-value\)\] { - --tw-bg-opacity: var(--any-value); - } - .from-\[var\(--any-value\)\] { - --tw-gradient-from: var(--any-value); - --tw-gradient-to: rgb(255 255 255 / 0); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); - } - .via-\[var\(--any-value\)\] { - --tw-gradient-to: rgb(255 255 255 / 0); - --tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to); - } - .to-\[var\(--any-value\)\] { - --tw-gradient-to: var(--any-value); - } - .fill-\[var\(--any-value\)\] { - fill: var(--any-value); - } - .stroke-\[var\(--any-value\)\] { - stroke: var(--any-value); - } - .object-\[var\(--any-value\)\] { - object-position: var(--any-value); - } - .p-\[var\(--any-value\)\] { - padding: var(--any-value); - } - .px-\[var\(--any-value\)\] { - padding-left: var(--any-value); - padding-right: var(--any-value); - } - .py-\[var\(--any-value\)\] { - padding-top: var(--any-value); - padding-bottom: var(--any-value); - } - .pb-\[var\(--any-value\)\] { - padding-bottom: var(--any-value); - } - .pl-\[var\(--any-value\)\] { - padding-left: var(--any-value); - } - .pr-\[var\(--any-value\)\] { - padding-right: var(--any-value); - } - .pt-\[var\(--any-value\)\] { - padding-top: var(--any-value); - } - .indent-\[var\(--any-value\)\] { - text-indent: var(--any-value); - } - .align-\[var\(--any-value\)\] { - vertical-align: var(--any-value); - } - .font-\[var\(--any-value\)\] { - font-weight: var(--any-value); - } - .leading-\[var\(--any-value\)\] { - line-height: var(--any-value); - } - .tracking-\[var\(--any-value\)\] { - letter-spacing: var(--any-value); - } - .text-\[var\(--any-value\)\] { - color: var(--any-value); - } - .text-opacity-\[var\(--any-value\)\] { - --tw-text-opacity: var(--any-value); - } - .decoration-\[var\(--any-value\)\] { - text-decoration-color: var(--any-value); - } - .underline-offset-\[var\(--any-value\)\] { - text-underline-offset: var(--any-value); - } - .placeholder-\[var\(--any-value\)\]::placeholder { - color: var(--any-value); - } - .placeholder-opacity-\[var\(--any-value\)\]::placeholder { - --tw-placeholder-opacity: var(--any-value); - } - .caret-\[var\(--any-value\)\] { - caret-color: var(--any-value); - } - .accent-\[var\(--any-value\)\] { - accent-color: var(--any-value); - } - .opacity-\[var\(--any-value\)\] { - opacity: var(--any-value); - } - .shadow-\[var\(--any-value\)\] { - --tw-shadow-color: var(--any-value); - --tw-shadow: var(--tw-shadow-colored); - } - .outline-offset-\[var\(--any-value\)\] { - outline-offset: var(--any-value); - } - .outline-\[var\(--any-value\)\] { - outline-color: var(--any-value); - } - .ring-\[var\(--any-value\)\] { - --tw-ring-color: var(--any-value); - } - .ring-opacity-\[var\(--any-value\)\] { - --tw-ring-opacity: var(--any-value); - } - .ring-offset-\[var\(--any-value\)\] { - --tw-ring-offset-color: var(--any-value); - } - .blur-\[var\(--any-value\)\] { - --tw-blur: blur(var(--any-value)); - 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); - } - .brightness-\[var\(--any-value\)\] { - --tw-brightness: brightness(var(--any-value)); - 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); - } - .contrast-\[var\(--any-value\)\] { - --tw-contrast: contrast(var(--any-value)); - 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); - } - .drop-shadow-\[var\(--any-value\)\] { - --tw-drop-shadow: drop-shadow(var(--any-value)); - 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); - } - .grayscale-\[var\(--any-value\)\] { - --tw-grayscale: grayscale(var(--any-value)); - 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); - } - .hue-rotate-\[var\(--any-value\)\] { - --tw-hue-rotate: hue-rotate(var(--any-value)); - 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); - } - .invert-\[var\(--any-value\)\] { - --tw-invert: invert(var(--any-value)); - 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); - } - .saturate-\[var\(--any-value\)\] { - --tw-saturate: saturate(var(--any-value)); - 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); - } - .sepia-\[var\(--any-value\)\] { - --tw-sepia: sepia(var(--any-value)); - 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-\[var\(--any-value\)\] { - --tw-backdrop-blur: blur(var(--any-value)); - 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); - } - .backdrop-brightness-\[var\(--any-value\)\] { - --tw-backdrop-brightness: brightness(var(--any-value)); - 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); - } - .backdrop-contrast-\[var\(--any-value\)\] { - --tw-backdrop-contrast: contrast(var(--any-value)); - 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); - } - .backdrop-grayscale-\[var\(--any-value\)\] { - --tw-backdrop-grayscale: grayscale(var(--any-value)); - 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); - } - .backdrop-hue-rotate-\[var\(--any-value\)\] { - --tw-backdrop-hue-rotate: hue-rotate(var(--any-value)); - 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); - } - .backdrop-invert-\[var\(--any-value\)\] { - --tw-backdrop-invert: invert(var(--any-value)); - 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); - } - .backdrop-opacity-\[var\(--any-value\)\] { - --tw-backdrop-opacity: opacity(var(--any-value)); - 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); - } - .backdrop-saturate-\[var\(--any-value\)\] { - --tw-backdrop-saturate: saturate(var(--any-value)); - 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); - } - .backdrop-sepia-\[var\(--any-value\)\] { - --tw-backdrop-sepia: sepia(var(--any-value)); - 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); - } - .transition-\[var\(--any-value\)\] { - transition-property: var(--any-value); - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } - .delay-\[var\(--any-value\)\] { - transition-delay: var(--any-value); - } - .duration-\[var\(--any-value\)\] { - transition-duration: var(--any-value); - } - .ease-\[var\(--any-value\)\] { - transition-timing-function: var(--any-value); - } - .will-change-\[var\(--any-value\)\] { - will-change: var(--any-value); - } - .content-\[var\(--any-value\)\] { - --tw-content: var(--any-value); - content: var(--tw-content); - } - `) + expect(result.css).toMatchFormattedCss( + env.OXIDE + ? css` + .inset-\[var\(--any-value\)\] { + top: var(--any-value); + right: var(--any-value); + bottom: var(--any-value); + left: var(--any-value); + } + .inset-x-\[var\(--any-value\)\] { + left: var(--any-value); + right: var(--any-value); + } + .inset-y-\[var\(--any-value\)\] { + top: var(--any-value); + bottom: var(--any-value); + } + .bottom-\[var\(--any-value\)\] { + bottom: var(--any-value); + } + .left-\[var\(--any-value\)\] { + left: var(--any-value); + } + .right-\[var\(--any-value\)\] { + right: var(--any-value); + } + .top-\[var\(--any-value\)\] { + top: var(--any-value); + } + .z-\[var\(--any-value\)\] { + z-index: var(--any-value); + } + .order-\[var\(--any-value\)\] { + order: var(--any-value); + } + .col-\[var\(--any-value\)\] { + grid-column: var(--any-value); + } + .col-start-\[var\(--any-value\)\] { + grid-column-start: var(--any-value); + } + .col-end-\[var\(--any-value\)\] { + grid-column-end: var(--any-value); + } + .row-\[var\(--any-value\)\] { + grid-row: var(--any-value); + } + .row-start-\[var\(--any-value\)\] { + grid-row-start: var(--any-value); + } + .row-end-\[var\(--any-value\)\] { + grid-row-end: var(--any-value); + } + .m-\[var\(--any-value\)\] { + margin: var(--any-value); + } + .mx-\[var\(--any-value\)\] { + margin-left: var(--any-value); + margin-right: var(--any-value); + } + .my-\[var\(--any-value\)\] { + margin-top: var(--any-value); + margin-bottom: var(--any-value); + } + .mb-\[var\(--any-value\)\] { + margin-bottom: var(--any-value); + } + .ml-\[var\(--any-value\)\] { + margin-left: var(--any-value); + } + .mr-\[var\(--any-value\)\] { + margin-right: var(--any-value); + } + .mt-\[var\(--any-value\)\] { + margin-top: var(--any-value); + } + .aspect-\[var\(--any-value\)\] { + aspect-ratio: var(--any-value); + } + .h-\[var\(--any-value\)\] { + height: var(--any-value); + } + .max-h-\[var\(--any-value\)\] { + max-height: var(--any-value); + } + .min-h-\[var\(--any-value\)\] { + min-height: var(--any-value); + } + .w-\[var\(--any-value\)\] { + width: var(--any-value); + } + .min-w-\[var\(--any-value\)\] { + min-width: var(--any-value); + } + .max-w-\[var\(--any-value\)\] { + max-width: var(--any-value); + } + .flex-\[var\(--any-value\)\] { + flex: var(--any-value); + } + .flex-shrink-\[var\(--any-value\)\] { + flex-shrink: var(--any-value); + } + .shrink-\[var\(--any-value\)\] { + flex-shrink: var(--any-value); + } + .flex-grow-\[var\(--any-value\)\] { + flex-grow: var(--any-value); + } + .grow-\[var\(--any-value\)\] { + flex-grow: var(--any-value); + } + .basis-\[var\(--any-value\)\] { + flex-basis: var(--any-value); + } + .border-spacing-\[var\(--any-value\)\] { + --tw-border-spacing-x: var(--any-value); + --tw-border-spacing-y: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .border-spacing-x-\[var\(--any-value\)\] { + --tw-border-spacing-x: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .border-spacing-y-\[var\(--any-value\)\] { + --tw-border-spacing-y: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .origin-\[var\(--any-value\)\] { + transform-origin: var(--any-value); + } + .translate-x-\[var\(--any-value\)\] { + --tw-translate-x: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .translate-y-\[var\(--any-value\)\] { + --tw-translate-y: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .rotate-\[var\(--any-value\)\] { + --tw-rotate: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .scale-\[var\(--any-value\)\] { + --tw-scale-x: var(--any-value); + --tw-scale-y: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .scale-x-\[var\(--any-value\)\] { + --tw-scale-x: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .scale-y-\[var\(--any-value\)\] { + --tw-scale-y: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .animate-\[var\(--any-value\)\] { + animation: var(--any-value); + } + .cursor-\[var\(--any-value\)\] { + cursor: var(--any-value); + } + .scroll-m-\[var\(--any-value\)\] { + scroll-margin: var(--any-value); + } + .scroll-mx-\[var\(--any-value\)\] { + scroll-margin-left: var(--any-value); + scroll-margin-right: var(--any-value); + } + .scroll-my-\[var\(--any-value\)\] { + scroll-margin-top: var(--any-value); + scroll-margin-bottom: var(--any-value); + } + .scroll-mb-\[var\(--any-value\)\] { + scroll-margin-bottom: var(--any-value); + } + .scroll-ml-\[var\(--any-value\)\] { + scroll-margin-left: var(--any-value); + } + .scroll-mr-\[var\(--any-value\)\] { + scroll-margin-right: var(--any-value); + } + .scroll-mt-\[var\(--any-value\)\] { + scroll-margin-top: var(--any-value); + } + .scroll-p-\[var\(--any-value\)\] { + scroll-padding: var(--any-value); + } + .scroll-px-\[var\(--any-value\)\] { + scroll-padding-left: var(--any-value); + scroll-padding-right: var(--any-value); + } + .scroll-py-\[var\(--any-value\)\] { + scroll-padding-top: var(--any-value); + scroll-padding-bottom: var(--any-value); + } + .scroll-pb-\[var\(--any-value\)\] { + scroll-padding-bottom: var(--any-value); + } + .scroll-pl-\[var\(--any-value\)\] { + scroll-padding-left: var(--any-value); + } + .scroll-pr-\[var\(--any-value\)\] { + scroll-padding-right: var(--any-value); + } + .scroll-pt-\[var\(--any-value\)\] { + scroll-padding-top: var(--any-value); + } + .list-\[var\(--any-value\)\] { + list-style-type: var(--any-value); + } + .columns-\[var\(--any-value\)\] { + columns: var(--any-value); + } + .auto-cols-\[var\(--any-value\)\] { + grid-auto-columns: var(--any-value); + } + .auto-rows-\[var\(--any-value\)\] { + grid-auto-rows: var(--any-value); + } + .grid-cols-\[var\(--any-value\)\] { + grid-template-columns: var(--any-value); + } + .grid-rows-\[var\(--any-value\)\] { + grid-template-rows: var(--any-value); + } + .gap-\[var\(--any-value\)\] { + gap: var(--any-value); + } + .gap-x-\[var\(--any-value\)\] { + column-gap: var(--any-value); + } + .gap-y-\[var\(--any-value\)\] { + row-gap: var(--any-value); + } + .space-x-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(var(--any-value) * var(--tw-space-x-reverse)); + margin-inline-start: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse))); + } + .space-y-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(var(--any-value) * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(var(--any-value) * var(--tw-space-y-reverse)); + } + .divide-y-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(var(--any-value) * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(var(--any-value) * var(--tw-divide-y-reverse)); + } + .divide-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { + border-color: var(--any-value); + } + .divide-opacity-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: var(--any-value); + } + .rounded-\[var\(--any-value\)\] { + border-radius: var(--any-value); + } + .rounded-b-\[var\(--any-value\)\] { + border-bottom-right-radius: var(--any-value); + border-bottom-left-radius: var(--any-value); + } + .rounded-l-\[var\(--any-value\)\] { + border-top-left-radius: var(--any-value); + border-bottom-left-radius: var(--any-value); + } + .rounded-r-\[var\(--any-value\)\] { + border-top-right-radius: var(--any-value); + border-bottom-right-radius: var(--any-value); + } + .rounded-t-\[var\(--any-value\)\] { + border-top-left-radius: var(--any-value); + border-top-right-radius: var(--any-value); + } + .rounded-bl-\[var\(--any-value\)\] { + border-bottom-left-radius: var(--any-value); + } + .rounded-br-\[var\(--any-value\)\] { + border-bottom-right-radius: var(--any-value); + } + .rounded-tl-\[var\(--any-value\)\] { + border-top-left-radius: var(--any-value); + } + .rounded-tr-\[var\(--any-value\)\] { + border-top-right-radius: var(--any-value); + } + .border-\[var\(--any-value\)\] { + border-color: var(--any-value); + } + .border-x-\[var\(--any-value\)\] { + border-left-color: var(--any-value); + border-right-color: var(--any-value); + } + .border-y-\[var\(--any-value\)\] { + border-top-color: var(--any-value); + border-bottom-color: var(--any-value); + } + .border-b-\[var\(--any-value\)\] { + border-bottom-color: var(--any-value); + } + .border-l-\[var\(--any-value\)\] { + border-left-color: var(--any-value); + } + .border-r-\[var\(--any-value\)\] { + border-right-color: var(--any-value); + } + .border-t-\[var\(--any-value\)\] { + border-top-color: var(--any-value); + } + .border-opacity-\[var\(--any-value\)\] { + --tw-border-opacity: var(--any-value); + } + .bg-\[var\(--any-value\)\] { + background-color: var(--any-value); + } + .bg-opacity-\[var\(--any-value\)\] { + --tw-bg-opacity: var(--any-value); + } + .from-\[var\(--any-value\)\] { + --tw-gradient-from: var(--any-value); + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + } + .via-\[var\(--any-value\)\] { + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to); + } + .to-\[var\(--any-value\)\] { + --tw-gradient-to: var(--any-value); + } + .fill-\[var\(--any-value\)\] { + fill: var(--any-value); + } + .stroke-\[var\(--any-value\)\] { + stroke: var(--any-value); + } + .object-\[var\(--any-value\)\] { + object-position: var(--any-value); + } + .p-\[var\(--any-value\)\] { + padding: var(--any-value); + } + .px-\[var\(--any-value\)\] { + padding-left: var(--any-value); + padding-right: var(--any-value); + } + .py-\[var\(--any-value\)\] { + padding-top: var(--any-value); + padding-bottom: var(--any-value); + } + .pb-\[var\(--any-value\)\] { + padding-bottom: var(--any-value); + } + .pl-\[var\(--any-value\)\] { + padding-left: var(--any-value); + } + .pr-\[var\(--any-value\)\] { + padding-right: var(--any-value); + } + .pt-\[var\(--any-value\)\] { + padding-top: var(--any-value); + } + .indent-\[var\(--any-value\)\] { + text-indent: var(--any-value); + } + .align-\[var\(--any-value\)\] { + vertical-align: var(--any-value); + } + .font-\[var\(--any-value\)\] { + font-weight: var(--any-value); + } + .leading-\[var\(--any-value\)\] { + line-height: var(--any-value); + } + .tracking-\[var\(--any-value\)\] { + letter-spacing: var(--any-value); + } + .text-\[var\(--any-value\)\] { + color: var(--any-value); + } + .text-opacity-\[var\(--any-value\)\] { + --tw-text-opacity: var(--any-value); + } + .decoration-\[var\(--any-value\)\] { + text-decoration-color: var(--any-value); + } + .underline-offset-\[var\(--any-value\)\] { + text-underline-offset: var(--any-value); + } + .placeholder-\[var\(--any-value\)\]::placeholder { + color: var(--any-value); + } + .placeholder-opacity-\[var\(--any-value\)\]::placeholder { + --tw-placeholder-opacity: var(--any-value); + } + .caret-\[var\(--any-value\)\] { + caret-color: var(--any-value); + } + .accent-\[var\(--any-value\)\] { + accent-color: var(--any-value); + } + .opacity-\[var\(--any-value\)\] { + opacity: var(--any-value); + } + .shadow-\[var\(--any-value\)\] { + --tw-shadow-color: var(--any-value); + --tw-shadow: var(--tw-shadow-colored); + } + .outline-offset-\[var\(--any-value\)\] { + outline-offset: var(--any-value); + } + .outline-\[var\(--any-value\)\] { + outline-color: var(--any-value); + } + .ring-\[var\(--any-value\)\] { + --tw-ring-color: var(--any-value); + } + .ring-opacity-\[var\(--any-value\)\] { + --tw-ring-opacity: var(--any-value); + } + .ring-offset-\[var\(--any-value\)\] { + --tw-ring-offset-color: var(--any-value); + } + .blur-\[var\(--any-value\)\] { + --tw-blur: blur(var(--any-value)); + 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); + } + .brightness-\[var\(--any-value\)\] { + --tw-brightness: brightness(var(--any-value)); + 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); + } + .contrast-\[var\(--any-value\)\] { + --tw-contrast: contrast(var(--any-value)); + 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); + } + .drop-shadow-\[var\(--any-value\)\] { + --tw-drop-shadow: drop-shadow(var(--any-value)); + 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); + } + .grayscale-\[var\(--any-value\)\] { + --tw-grayscale: grayscale(var(--any-value)); + 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); + } + .hue-rotate-\[var\(--any-value\)\] { + --tw-hue-rotate: hue-rotate(var(--any-value)); + 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); + } + .invert-\[var\(--any-value\)\] { + --tw-invert: invert(var(--any-value)); + 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); + } + .saturate-\[var\(--any-value\)\] { + --tw-saturate: saturate(var(--any-value)); + 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); + } + .sepia-\[var\(--any-value\)\] { + --tw-sepia: sepia(var(--any-value)); + 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-\[var\(--any-value\)\] { + --tw-backdrop-blur: blur(var(--any-value)); + 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); + } + .backdrop-brightness-\[var\(--any-value\)\] { + --tw-backdrop-brightness: brightness(var(--any-value)); + 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); + } + .backdrop-contrast-\[var\(--any-value\)\] { + --tw-backdrop-contrast: contrast(var(--any-value)); + 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); + } + .backdrop-grayscale-\[var\(--any-value\)\] { + --tw-backdrop-grayscale: grayscale(var(--any-value)); + 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); + } + .backdrop-hue-rotate-\[var\(--any-value\)\] { + --tw-backdrop-hue-rotate: hue-rotate(var(--any-value)); + 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); + } + .backdrop-invert-\[var\(--any-value\)\] { + --tw-backdrop-invert: invert(var(--any-value)); + 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); + } + .backdrop-opacity-\[var\(--any-value\)\] { + --tw-backdrop-opacity: opacity(var(--any-value)); + 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); + } + .backdrop-saturate-\[var\(--any-value\)\] { + --tw-backdrop-saturate: saturate(var(--any-value)); + 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); + } + .backdrop-sepia-\[var\(--any-value\)\] { + --tw-backdrop-sepia: sepia(var(--any-value)); + 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); + } + .transition-\[var\(--any-value\)\] { + transition-property: var(--any-value); + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + .delay-\[var\(--any-value\)\] { + transition-delay: var(--any-value); + } + .duration-\[var\(--any-value\)\] { + transition-duration: var(--any-value); + } + .ease-\[var\(--any-value\)\] { + transition-timing-function: var(--any-value); + } + .will-change-\[var\(--any-value\)\] { + will-change: var(--any-value); + } + .content-\[var\(--any-value\)\] { + --tw-content: var(--any-value); + content: var(--tw-content); + } + ` + : css` + .inset-\[var\(--any-value\)\] { + top: var(--any-value); + right: var(--any-value); + bottom: var(--any-value); + left: var(--any-value); + } + .inset-x-\[var\(--any-value\)\] { + left: var(--any-value); + right: var(--any-value); + } + .inset-y-\[var\(--any-value\)\] { + top: var(--any-value); + bottom: var(--any-value); + } + .bottom-\[var\(--any-value\)\] { + bottom: var(--any-value); + } + .left-\[var\(--any-value\)\] { + left: var(--any-value); + } + .right-\[var\(--any-value\)\] { + right: var(--any-value); + } + .top-\[var\(--any-value\)\] { + top: var(--any-value); + } + .z-\[var\(--any-value\)\] { + z-index: var(--any-value); + } + .order-\[var\(--any-value\)\] { + order: var(--any-value); + } + .col-\[var\(--any-value\)\] { + grid-column: var(--any-value); + } + .col-start-\[var\(--any-value\)\] { + grid-column-start: var(--any-value); + } + .col-end-\[var\(--any-value\)\] { + grid-column-end: var(--any-value); + } + .row-\[var\(--any-value\)\] { + grid-row: var(--any-value); + } + .row-start-\[var\(--any-value\)\] { + grid-row-start: var(--any-value); + } + .row-end-\[var\(--any-value\)\] { + grid-row-end: var(--any-value); + } + .m-\[var\(--any-value\)\] { + margin: var(--any-value); + } + .mx-\[var\(--any-value\)\] { + margin-left: var(--any-value); + margin-right: var(--any-value); + } + .my-\[var\(--any-value\)\] { + margin-top: var(--any-value); + margin-bottom: var(--any-value); + } + .mb-\[var\(--any-value\)\] { + margin-bottom: var(--any-value); + } + .ml-\[var\(--any-value\)\] { + margin-left: var(--any-value); + } + .mr-\[var\(--any-value\)\] { + margin-right: var(--any-value); + } + .mt-\[var\(--any-value\)\] { + margin-top: var(--any-value); + } + .aspect-\[var\(--any-value\)\] { + aspect-ratio: var(--any-value); + } + .h-\[var\(--any-value\)\] { + height: var(--any-value); + } + .max-h-\[var\(--any-value\)\] { + max-height: var(--any-value); + } + .min-h-\[var\(--any-value\)\] { + min-height: var(--any-value); + } + .w-\[var\(--any-value\)\] { + width: var(--any-value); + } + .min-w-\[var\(--any-value\)\] { + min-width: var(--any-value); + } + .max-w-\[var\(--any-value\)\] { + max-width: var(--any-value); + } + .flex-\[var\(--any-value\)\] { + flex: var(--any-value); + } + .flex-shrink-\[var\(--any-value\)\] { + flex-shrink: var(--any-value); + } + .shrink-\[var\(--any-value\)\] { + flex-shrink: var(--any-value); + } + .flex-grow-\[var\(--any-value\)\] { + flex-grow: var(--any-value); + } + .grow-\[var\(--any-value\)\] { + flex-grow: var(--any-value); + } + .basis-\[var\(--any-value\)\] { + flex-basis: var(--any-value); + } + .border-spacing-\[var\(--any-value\)\] { + --tw-border-spacing-x: var(--any-value); + --tw-border-spacing-y: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .border-spacing-x-\[var\(--any-value\)\] { + --tw-border-spacing-x: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .border-spacing-y-\[var\(--any-value\)\] { + --tw-border-spacing-y: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .origin-\[var\(--any-value\)\] { + transform-origin: var(--any-value); + } + .translate-x-\[var\(--any-value\)\] { + --tw-translate-x: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .translate-y-\[var\(--any-value\)\] { + --tw-translate-y: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .rotate-\[var\(--any-value\)\] { + --tw-rotate: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .scale-\[var\(--any-value\)\] { + --tw-scale-x: var(--any-value); + --tw-scale-y: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .scale-x-\[var\(--any-value\)\] { + --tw-scale-x: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .scale-y-\[var\(--any-value\)\] { + --tw-scale-y: var(--any-value); + transform: translate(var(--tw-translate-x), 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)); + } + .animate-\[var\(--any-value\)\] { + animation: var(--any-value); + } + .cursor-\[var\(--any-value\)\] { + cursor: var(--any-value); + } + .scroll-m-\[var\(--any-value\)\] { + scroll-margin: var(--any-value); + } + .scroll-mx-\[var\(--any-value\)\] { + scroll-margin-left: var(--any-value); + scroll-margin-right: var(--any-value); + } + .scroll-my-\[var\(--any-value\)\] { + scroll-margin-top: var(--any-value); + scroll-margin-bottom: var(--any-value); + } + .scroll-mb-\[var\(--any-value\)\] { + scroll-margin-bottom: var(--any-value); + } + .scroll-ml-\[var\(--any-value\)\] { + scroll-margin-left: var(--any-value); + } + .scroll-mr-\[var\(--any-value\)\] { + scroll-margin-right: var(--any-value); + } + .scroll-mt-\[var\(--any-value\)\] { + scroll-margin-top: var(--any-value); + } + .scroll-p-\[var\(--any-value\)\] { + scroll-padding: var(--any-value); + } + .scroll-px-\[var\(--any-value\)\] { + scroll-padding-left: var(--any-value); + scroll-padding-right: var(--any-value); + } + .scroll-py-\[var\(--any-value\)\] { + scroll-padding-top: var(--any-value); + scroll-padding-bottom: var(--any-value); + } + .scroll-pb-\[var\(--any-value\)\] { + scroll-padding-bottom: var(--any-value); + } + .scroll-pl-\[var\(--any-value\)\] { + scroll-padding-left: var(--any-value); + } + .scroll-pr-\[var\(--any-value\)\] { + scroll-padding-right: var(--any-value); + } + .scroll-pt-\[var\(--any-value\)\] { + scroll-padding-top: var(--any-value); + } + .list-\[var\(--any-value\)\] { + list-style-type: var(--any-value); + } + .columns-\[var\(--any-value\)\] { + columns: var(--any-value); + } + .auto-cols-\[var\(--any-value\)\] { + grid-auto-columns: var(--any-value); + } + .auto-rows-\[var\(--any-value\)\] { + grid-auto-rows: var(--any-value); + } + .grid-cols-\[var\(--any-value\)\] { + grid-template-columns: var(--any-value); + } + .grid-rows-\[var\(--any-value\)\] { + grid-template-rows: var(--any-value); + } + .gap-\[var\(--any-value\)\] { + gap: var(--any-value); + } + .gap-x-\[var\(--any-value\)\] { + column-gap: var(--any-value); + } + .gap-y-\[var\(--any-value\)\] { + row-gap: var(--any-value); + } + .space-x-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(var(--any-value) * var(--tw-space-x-reverse)); + margin-left: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse))); + } + .space-y-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(var(--any-value) * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(var(--any-value) * var(--tw-space-y-reverse)); + } + .divide-y-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(var(--any-value) * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(var(--any-value) * var(--tw-divide-y-reverse)); + } + .divide-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { + border-color: var(--any-value); + } + .divide-opacity-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: var(--any-value); + } + .rounded-\[var\(--any-value\)\] { + border-radius: var(--any-value); + } + .rounded-b-\[var\(--any-value\)\] { + border-bottom-right-radius: var(--any-value); + border-bottom-left-radius: var(--any-value); + } + .rounded-l-\[var\(--any-value\)\] { + border-top-left-radius: var(--any-value); + border-bottom-left-radius: var(--any-value); + } + .rounded-r-\[var\(--any-value\)\] { + border-top-right-radius: var(--any-value); + border-bottom-right-radius: var(--any-value); + } + .rounded-t-\[var\(--any-value\)\] { + border-top-left-radius: var(--any-value); + border-top-right-radius: var(--any-value); + } + .rounded-bl-\[var\(--any-value\)\] { + border-bottom-left-radius: var(--any-value); + } + .rounded-br-\[var\(--any-value\)\] { + border-bottom-right-radius: var(--any-value); + } + .rounded-tl-\[var\(--any-value\)\] { + border-top-left-radius: var(--any-value); + } + .rounded-tr-\[var\(--any-value\)\] { + border-top-right-radius: var(--any-value); + } + .border-\[var\(--any-value\)\] { + border-color: var(--any-value); + } + .border-x-\[var\(--any-value\)\] { + border-left-color: var(--any-value); + border-right-color: var(--any-value); + } + .border-y-\[var\(--any-value\)\] { + border-top-color: var(--any-value); + border-bottom-color: var(--any-value); + } + .border-b-\[var\(--any-value\)\] { + border-bottom-color: var(--any-value); + } + .border-l-\[var\(--any-value\)\] { + border-left-color: var(--any-value); + } + .border-r-\[var\(--any-value\)\] { + border-right-color: var(--any-value); + } + .border-t-\[var\(--any-value\)\] { + border-top-color: var(--any-value); + } + .border-opacity-\[var\(--any-value\)\] { + --tw-border-opacity: var(--any-value); + } + .bg-\[var\(--any-value\)\] { + background-color: var(--any-value); + } + .bg-opacity-\[var\(--any-value\)\] { + --tw-bg-opacity: var(--any-value); + } + .from-\[var\(--any-value\)\] { + --tw-gradient-from: var(--any-value); + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + } + .via-\[var\(--any-value\)\] { + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to); + } + .to-\[var\(--any-value\)\] { + --tw-gradient-to: var(--any-value); + } + .fill-\[var\(--any-value\)\] { + fill: var(--any-value); + } + .stroke-\[var\(--any-value\)\] { + stroke: var(--any-value); + } + .object-\[var\(--any-value\)\] { + object-position: var(--any-value); + } + .p-\[var\(--any-value\)\] { + padding: var(--any-value); + } + .px-\[var\(--any-value\)\] { + padding-left: var(--any-value); + padding-right: var(--any-value); + } + .py-\[var\(--any-value\)\] { + padding-top: var(--any-value); + padding-bottom: var(--any-value); + } + .pb-\[var\(--any-value\)\] { + padding-bottom: var(--any-value); + } + .pl-\[var\(--any-value\)\] { + padding-left: var(--any-value); + } + .pr-\[var\(--any-value\)\] { + padding-right: var(--any-value); + } + .pt-\[var\(--any-value\)\] { + padding-top: var(--any-value); + } + .indent-\[var\(--any-value\)\] { + text-indent: var(--any-value); + } + .align-\[var\(--any-value\)\] { + vertical-align: var(--any-value); + } + .font-\[var\(--any-value\)\] { + font-weight: var(--any-value); + } + .leading-\[var\(--any-value\)\] { + line-height: var(--any-value); + } + .tracking-\[var\(--any-value\)\] { + letter-spacing: var(--any-value); + } + .text-\[var\(--any-value\)\] { + color: var(--any-value); + } + .text-opacity-\[var\(--any-value\)\] { + --tw-text-opacity: var(--any-value); + } + .decoration-\[var\(--any-value\)\] { + text-decoration-color: var(--any-value); + } + .underline-offset-\[var\(--any-value\)\] { + text-underline-offset: var(--any-value); + } + .placeholder-\[var\(--any-value\)\]::placeholder { + color: var(--any-value); + } + .placeholder-opacity-\[var\(--any-value\)\]::placeholder { + --tw-placeholder-opacity: var(--any-value); + } + .caret-\[var\(--any-value\)\] { + caret-color: var(--any-value); + } + .accent-\[var\(--any-value\)\] { + accent-color: var(--any-value); + } + .opacity-\[var\(--any-value\)\] { + opacity: var(--any-value); + } + .shadow-\[var\(--any-value\)\] { + --tw-shadow-color: var(--any-value); + --tw-shadow: var(--tw-shadow-colored); + } + .outline-offset-\[var\(--any-value\)\] { + outline-offset: var(--any-value); + } + .outline-\[var\(--any-value\)\] { + outline-color: var(--any-value); + } + .ring-\[var\(--any-value\)\] { + --tw-ring-color: var(--any-value); + } + .ring-opacity-\[var\(--any-value\)\] { + --tw-ring-opacity: var(--any-value); + } + .ring-offset-\[var\(--any-value\)\] { + --tw-ring-offset-color: var(--any-value); + } + .blur-\[var\(--any-value\)\] { + --tw-blur: blur(var(--any-value)); + 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); + } + .brightness-\[var\(--any-value\)\] { + --tw-brightness: brightness(var(--any-value)); + 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); + } + .contrast-\[var\(--any-value\)\] { + --tw-contrast: contrast(var(--any-value)); + 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); + } + .drop-shadow-\[var\(--any-value\)\] { + --tw-drop-shadow: drop-shadow(var(--any-value)); + 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); + } + .grayscale-\[var\(--any-value\)\] { + --tw-grayscale: grayscale(var(--any-value)); + 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); + } + .hue-rotate-\[var\(--any-value\)\] { + --tw-hue-rotate: hue-rotate(var(--any-value)); + 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); + } + .invert-\[var\(--any-value\)\] { + --tw-invert: invert(var(--any-value)); + 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); + } + .saturate-\[var\(--any-value\)\] { + --tw-saturate: saturate(var(--any-value)); + 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); + } + .sepia-\[var\(--any-value\)\] { + --tw-sepia: sepia(var(--any-value)); + 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-\[var\(--any-value\)\] { + --tw-backdrop-blur: blur(var(--any-value)); + 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); + } + .backdrop-brightness-\[var\(--any-value\)\] { + --tw-backdrop-brightness: brightness(var(--any-value)); + 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); + } + .backdrop-contrast-\[var\(--any-value\)\] { + --tw-backdrop-contrast: contrast(var(--any-value)); + 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); + } + .backdrop-grayscale-\[var\(--any-value\)\] { + --tw-backdrop-grayscale: grayscale(var(--any-value)); + 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); + } + .backdrop-hue-rotate-\[var\(--any-value\)\] { + --tw-backdrop-hue-rotate: hue-rotate(var(--any-value)); + 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); + } + .backdrop-invert-\[var\(--any-value\)\] { + --tw-backdrop-invert: invert(var(--any-value)); + 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); + } + .backdrop-opacity-\[var\(--any-value\)\] { + --tw-backdrop-opacity: opacity(var(--any-value)); + 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); + } + .backdrop-saturate-\[var\(--any-value\)\] { + --tw-backdrop-saturate: saturate(var(--any-value)); + 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); + } + .backdrop-sepia-\[var\(--any-value\)\] { + --tw-backdrop-sepia: sepia(var(--any-value)); + 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); + } + .transition-\[var\(--any-value\)\] { + transition-property: var(--any-value); + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + .delay-\[var\(--any-value\)\] { + transition-delay: var(--any-value); + } + .duration-\[var\(--any-value\)\] { + transition-duration: var(--any-value); + } + .ease-\[var\(--any-value\)\] { + transition-timing-function: var(--any-value); + } + .will-change-\[var\(--any-value\)\] { + will-change: var(--any-value); + } + .content-\[var\(--any-value\)\] { + --tw-content: var(--any-value); + content: var(--tw-content); + } + ` + ) }) }) diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css new file mode 100644 index 000000000000..34bb93bc686b --- /dev/null +++ b/tests/arbitrary-values.oxide.test.css @@ -0,0 +1,1141 @@ +.inset-\[11px\] { + top: 11px; + right: 11px; + bottom: 11px; + left: 11px; +} +.inset-\[var\(--value\)\] { + top: var(--value); + right: var(--value); + bottom: var(--value); + left: var(--value); +} +.inset-x-\[11px\] { + left: 11px; + right: 11px; +} +.inset-x-\[var\(--value\)\] { + left: var(--value); + right: var(--value); +} +.inset-y-\[11px\] { + top: 11px; + bottom: 11px; +} +.inset-y-\[var\(--value\)\] { + top: var(--value); + bottom: var(--value); +} +.bottom-\[11px\] { + bottom: 11px; +} +.bottom-\[var\(--value\)\] { + bottom: var(--value); +} +.left-\[11px\] { + left: 11px; +} +.left-\[var\(--value\)\] { + left: var(--value); +} +.right-\[11px\] { + right: 11px; +} +.right-\[var\(--value\)\] { + right: var(--value); +} +.top-\[11px\] { + top: 11px; +} +.top-\[var\(--value\)\] { + top: var(--value); +} +.z-\[123\] { + z-index: 123; +} +.z-\[var\(--value\)\] { + z-index: var(--value); +} +.order-\[4\] { + order: 4; +} +.order-\[var\(--value\)\] { + order: var(--value); +} +.col-\[7\] { + grid-column: 7; +} +.col-start-\[7\] { + grid-column-start: 7; +} +.col-end-\[7\] { + grid-column-end: 7; +} +.row-\[7\] { + grid-row: 7; +} +.row-start-\[7\] { + grid-row-start: 7; +} +.row-end-\[7\] { + grid-row-end: 7; +} +.m-\[7px\] { + margin: 7px; +} +.mx-\[7px\] { + margin-left: 7px; + margin-right: 7px; +} +.my-\[7px\] { + margin-top: 7px; + margin-bottom: 7px; +} +.mb-\[7px\] { + margin-bottom: 7px; +} +.ml-\[7px\] { + margin-left: 7px; +} +.mr-\[7px\] { + margin-right: 7px; +} +.mt-\[7px\] { + margin-top: 7px; +} +.mt-\[clamp\(30px\2c 100px\)\] { + margin-top: clamp(30px, 100px); +} +.aspect-\[16\/9\] { + aspect-ratio: 16/9; +} +.aspect-\[var\(--aspect\)\] { + aspect-ratio: var(--aspect); +} +.h-\[3\.23rem\] { + height: 3.23rem; +} +.h-\[calc\(100\%\+1rem\)\] { + height: calc(100% + 1rem); +} +.h-\[var\(--height\)\] { + height: var(--height); +} +.max-h-\[3\.23rem\] { + max-height: 3.23rem; +} +.max-h-\[calc\(100\%\+1rem\)\] { + max-height: calc(100% + 1rem); +} +.max-h-\[var\(--height\)\] { + max-height: var(--height); +} +.min-h-\[3\.23rem\] { + min-height: 3.23rem; +} +.min-h-\[calc\(100\%\+1rem\)\] { + min-height: calc(100% + 1rem); +} +.min-h-\[var\(--height\)\] { + min-height: var(--height); +} +.w-\[\'\)\(\)\'\] { + width: ')()'; +} +.w-\[\'\]\[\]\'\] { + width: '][]'; +} +.w-\[\'\}\{\}\'\] { + width: '}{}'; +} +.w-\[\(\(\)\)\] { + width: (()); +} +.w-\[\(\)\] { + width: (); +} +.w-\[0\] { + width: 0; +} +.w-\[3\.23rem\] { + width: 3.23rem; +} +.w-\[\[\[\]\]\] { + width: [[]]; +} +.w-\[\[\]\] { + width: []; +} +.w-\[calc\(100\%\+1rem\)\] { + width: calc(100% + 1rem); +} +.w-\[calc\(100\%\/3-1rem\*2\)\] { + width: calc(100% / 3 - 1rem * 2); +} +.w-\[calc\(var\(--10-10px\2c calc\(-20px-\(-30px--40px\)\)\)-50px\)\] { + width: calc(var(--10-10px, calc(-20px - (-30px - -40px))) - 50px); +} +.w-\[var\(--width\)\] { + width: var(--width); +} +.w-\[var\(--width\2c calc\(100\%\+1rem\)\)\] { + width: var(--width, calc(100% + 1rem)); +} +.w-\[\{\{\}\}\] { + width: { + { + } + } +} +.w-\[\{\}\] { + width: { + } +} +.min-w-\[3\.23rem\] { + min-width: 3.23rem; +} +.min-w-\[calc\(1-\(\(12-3\)\*0\.5\)\)\] { + min-width: calc(1 - ((12 - 3) * 0.5)); +} +.min-w-\[calc\(1-\(var\(--something\)\*0\.5\)\)\] { + min-width: calc(1 - (var(--something) * 0.5)); +} +.min-w-\[calc\(1-var\(--something\)\*0\.5\)\] { + min-width: calc(1 - var(--something) * 0.5); +} +.min-w-\[calc\(100\%\+1rem\)\] { + min-width: calc(100% + 1rem); +} +.min-w-\[var\(--width\)\] { + min-width: var(--width); +} +.max-w-\[3\.23rem\] { + max-width: 3.23rem; +} +.max-w-\[calc\(100\%\+1rem\)\] { + max-width: calc(100% + 1rem); +} +.max-w-\[var\(--width\)\] { + max-width: var(--width); +} +.flex-\[var\(--flex\)\] { + flex: var(--flex); +} +.flex-shrink-\[var\(--shrink\)\] { + flex-shrink: var(--shrink); +} +.shrink-\[var\(--shrink\)\] { + flex-shrink: var(--shrink); +} +.flex-grow-\[var\(--grow\)\] { + flex-grow: var(--grow); +} +.grow-\[var\(--grow\)\] { + flex-grow: var(--grow); +} +.basis-\[var\(--basis\)\] { + flex-basis: var(--basis); +} +.origin-\[50px_50px\] { + transform-origin: 50px 50px; +} +.translate-x-\[12\%\] { + --tw-translate-x: 12%; + transform: translate(var(--tw-translate-x), 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)); +} +.translate-x-\[var\(--value\)\] { + --tw-translate-x: var(--value); + transform: translate(var(--tw-translate-x), 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)); +} +.translate-y-\[12\%\] { + --tw-translate-y: 12%; + transform: translate(var(--tw-translate-x), 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)); +} +.translate-y-\[var\(--value\)\] { + --tw-translate-y: var(--value); + transform: translate(var(--tw-translate-x), 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)); +} +.rotate-\[1\.5turn\] { + --tw-rotate: 1.5turn; + transform: translate(var(--tw-translate-x), 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)); +} +.rotate-\[2\.3rad\] { + --tw-rotate: 2.3rad; + transform: translate(var(--tw-translate-x), 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)); +} +.rotate-\[23deg\] { + --tw-rotate: 23deg; + transform: translate(var(--tw-translate-x), 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)); +} +.rotate-\[401grad\] { + --tw-rotate: 401grad; + transform: translate(var(--tw-translate-x), 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)); +} +.skew-x-\[3px\] { + --tw-skew-x: 3px; + transform: translate(var(--tw-translate-x), 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)); +} +.skew-x-\[var\(--value\)\] { + --tw-skew-x: var(--value); + transform: translate(var(--tw-translate-x), 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)); +} +.skew-y-\[3px\] { + --tw-skew-y: 3px; + transform: translate(var(--tw-translate-x), 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)); +} +.skew-y-\[var\(--value\)\] { + --tw-skew-y: var(--value); + transform: translate(var(--tw-translate-x), 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)); +} +.scale-\[0\.7\] { + --tw-scale-x: 0.7; + --tw-scale-y: 0.7; + transform: translate(var(--tw-translate-x), 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)); +} +.scale-\[var\(--value\)\] { + --tw-scale-x: var(--value); + --tw-scale-y: var(--value); + transform: translate(var(--tw-translate-x), 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)); +} +.scale-x-\[0\.7\] { + --tw-scale-x: 0.7; + transform: translate(var(--tw-translate-x), 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)); +} +.scale-x-\[var\(--value\)\] { + --tw-scale-x: var(--value); + transform: translate(var(--tw-translate-x), 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)); +} +.scale-y-\[0\.7\] { + --tw-scale-y: 0.7; + transform: translate(var(--tw-translate-x), 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)); +} +.scale-y-\[var\(--value\)\] { + --tw-scale-y: var(--value); + transform: translate(var(--tw-translate-x), 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)); +} +.animate-\[pong_1s_cubic-bezier\(0\2c 0\2c 0\.2\2c 1\)_infinite\] { + animation: pong 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} +.animate-\[var\(--value\)\] { + animation: var(--value); +} +.cursor-\[pointer\] { + cursor: pointer; +} +.cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\2c pointer\] { + cursor: url('./path_to_hand.cur') 2 2, pointer; +} +.cursor-\[url\(hand\.cur\)_2_2\2c pointer\] { + cursor: url(hand.cur) 2 2, pointer; +} +.cursor-\[var\(--value\)\] { + cursor: var(--value); +} +.scroll-m-\[7px\] { + scroll-margin: 7px; +} +.scroll-mx-\[7px\] { + scroll-margin-left: 7px; + scroll-margin-right: 7px; +} +.scroll-my-\[7px\] { + scroll-margin-top: 7px; + scroll-margin-bottom: 7px; +} +.scroll-mb-\[7px\] { + scroll-margin-bottom: 7px; +} +.scroll-ml-\[7px\] { + scroll-margin-left: 7px; +} +.scroll-mr-\[7px\] { + scroll-margin-right: 7px; +} +.scroll-mt-\[7px\] { + scroll-margin-top: 7px; +} +.scroll-mt-\[var\(--scroll-margin\)\] { + scroll-margin-top: var(--scroll-margin); +} +.scroll-p-\[7px\] { + scroll-padding: 7px; +} +.scroll-px-\[7px\] { + scroll-padding-left: 7px; + scroll-padding-right: 7px; +} +.scroll-py-\[7px\] { + scroll-padding-top: 7px; + scroll-padding-bottom: 7px; +} +.scroll-pb-\[7px\] { + scroll-padding-bottom: 7px; +} +.scroll-pl-\[7px\] { + scroll-padding-left: 7px; +} +.scroll-pr-\[7px\] { + scroll-padding-right: 7px; +} +.scroll-pt-\[7px\] { + scroll-padding-top: 7px; +} +.scroll-pt-\[var\(--scroll-padding\)\] { + scroll-padding-top: var(--scroll-padding); +} +.list-\[\'\\1f44d\'\] { + list-style-type: '\1F44D'; +} +.list-\[var\(--value\)\] { + list-style-type: var(--value); +} +.columns-\[20\] { + columns: 20; +} +.columns-\[var\(--columns\)\] { + columns: var(--columns); +} +.auto-cols-\[minmax\(10px\2c auto\)\] { + grid-auto-columns: minmax(10px, auto); +} +.auto-rows-\[minmax\(10px\2c auto\)\] { + grid-auto-rows: minmax(10px, auto); +} +.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] { + grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; +} +.grid-cols-\[\[linename\]\2c 1fr\2c auto\] { + grid-template-columns: [linename] 1fr auto; +} +.grid-rows-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] { + grid-template-rows: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; +} +.gap-\[20px\] { + gap: 20px; +} +.gap-\[var\(--value\)\] { + gap: var(--value); +} +.gap-x-\[20px\] { + column-gap: 20px; +} +.gap-x-\[var\(--value\)\] { + column-gap: var(--value); +} +.gap-y-\[20px\] { + row-gap: 20px; +} +.gap-y-\[var\(--value\)\] { + row-gap: var(--value); +} +.space-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(20cm * var(--tw-space-x-reverse)); + margin-inline-start: calc(20cm * calc(1 - var(--tw-space-x-reverse))); +} +.space-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(calc(20% - 1cm) * var(--tw-space-x-reverse)); + margin-inline-start: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse))); +} +.space-y-\[20cm\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(20cm * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(20cm * var(--tw-space-y-reverse)); +} +.space-y-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(calc(20% - 1cm) * var(--tw-space-y-reverse)); +} +.divide-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(20cm * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(20cm * calc(1 - var(--tw-divide-x-reverse))); +} +.divide-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(calc(20% - 1cm) * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(calc(20% - 1cm) * calc(1 - var(--tw-divide-x-reverse))); +} +.divide-y-\[20cm\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(20cm * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(20cm * var(--tw-divide-y-reverse)); +} +.divide-y-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(calc(20% - 1cm) * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(calc(20% - 1cm) * var(--tw-divide-y-reverse)); +} +.divide-\[black\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-divide-opacity)); +} +.divide-\[var\(--value\)\] > :not([hidden]) ~ :not([hidden]) { + border-color: var(--value); +} +.divide-opacity-\[0\.8\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 0.8; +} +.divide-opacity-\[var\(--value\)\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: var(--value); +} +.rounded-\[11px\] { + border-radius: 11px; +} +.rounded-b-\[var\(--radius\)\] { + border-bottom-right-radius: var(--radius); + border-bottom-left-radius: var(--radius); +} +.rounded-l-\[var\(--radius\)\] { + border-top-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); +} +.rounded-r-\[var\(--radius\)\] { + border-top-right-radius: var(--radius); + border-bottom-right-radius: var(--radius); +} +.rounded-t-\[var\(--radius\)\] { + border-top-left-radius: var(--radius); + border-top-right-radius: var(--radius); +} +.rounded-bl-\[var\(--radius\)\] { + border-bottom-left-radius: var(--radius); +} +.rounded-br-\[var\(--radius\)\] { + border-bottom-right-radius: var(--radius); +} +.rounded-tl-\[var\(--radius\)\] { + border-top-left-radius: var(--radius); +} +.rounded-tr-\[var\(--radius\)\] { + border-top-right-radius: var(--radius); +} +.border-\[2\.5px\] { + border-width: 2.5px; +} +.border-\[length\:var\(--value\)\] { + border-width: var(--value); +} +.border-b-\[2\.5px\] { + border-bottom-width: 2.5px; +} +.border-b-\[length\:var\(--value\)\] { + border-bottom-width: var(--value); +} +.border-l-\[2\.5px\] { + border-left-width: 2.5px; +} +.border-l-\[length\:var\(--value\)\] { + border-left-width: var(--value); +} +.border-r-\[2\.5px\] { + border-right-width: 2.5px; +} +.border-r-\[length\:var\(--value\)\] { + border-right-width: var(--value); +} +.border-t-\[2\.5px\] { + border-top-width: 2.5px; +} +.border-t-\[length\:var\(--value\)\] { + border-top-width: var(--value); +} +.border-\[\#f00\] { + --tw-border-opacity: 1; + border-color: rgb(255 0 0 / var(--tw-border-opacity)); +} +.border-\[color\:var\(--value\)\] { + border-color: var(--value); +} +.border-\[red_black\] { + border-color: red black; +} +.border-b-\[\#f00\] { + --tw-border-opacity: 1; + border-bottom-color: rgb(255 0 0 / var(--tw-border-opacity)); +} +.border-b-\[color\:var\(--value\)\] { + border-bottom-color: var(--value); +} +.border-l-\[\#f00\] { + --tw-border-opacity: 1; + border-left-color: rgb(255 0 0 / var(--tw-border-opacity)); +} +.border-l-\[color\:var\(--value\)\] { + border-left-color: var(--value); +} +.border-r-\[\#f00\] { + --tw-border-opacity: 1; + border-right-color: rgb(255 0 0 / var(--tw-border-opacity)); +} +.border-r-\[color\:var\(--value\)\] { + border-right-color: var(--value); +} +.border-t-\[\#f00\] { + --tw-border-opacity: 1; + border-top-color: rgb(255 0 0 / var(--tw-border-opacity)); +} +.border-t-\[color\:var\(--value\)\] { + border-top-color: var(--value); +} +.border-opacity-\[0\.8\] { + --tw-border-opacity: 0.8; +} +.border-opacity-\[var\(--value\)\] { + --tw-border-opacity: var(--value); +} +.bg-\[\#0000ffcc\] { + background-color: #0000ffcc; +} +.bg-\[\#0f0\] { + --tw-bg-opacity: 1; + background-color: rgb(0 255 0 / var(--tw-bg-opacity)); +} +.bg-\[\#0f0_var\(--value\)\] { + background-color: #0f0 var(--value); +} +.bg-\[\#ff0000\] { + --tw-bg-opacity: 1; + background-color: rgb(255 0 0 / var(--tw-bg-opacity)); +} +.bg-\[color\:var\(--value1\)_var\(--value2\)\] { + background-color: var(--value1) var(--value2); +} +.bg-\[hsl\(0\2c 100\%\2c 50\%\)\] { + --tw-bg-opacity: 1; + background-color: hsl(0 100% 50% / var(--tw-bg-opacity)); +} +.bg-\[hsl\(0rad\2c 100\%\2c 50\%\)\] { + --tw-bg-opacity: 1; + background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity)); +} +.bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] { + background-color: hsla(0, 100%, 50%, 0.3); +} +.bg-\[hsla\(0turn\2c 100\%\2c 50\%\2c 0\.3\)\] { + background-color: hsla(0turn, 100%, 50%, 0.3); +} +.bg-\[rgb\(123\2c 123\2c 123\)\] { + --tw-bg-opacity: 1; + background-color: rgb(123 123 123 / var(--tw-bg-opacity)); +} +.bg-\[rgb\(123\2c _456\2c _123\)_black\] { + background-color: rgb(123, 456, 123) black; +} +.bg-\[rgb\(123_456_789\)\] { + --tw-bg-opacity: 1; + background-color: rgb(123 456 789 / var(--tw-bg-opacity)); +} +.bg-\[rgba\(123\2c 123\2c 123\2c 0\.5\)\] { + background-color: rgba(123, 123, 123, 0.5); +} +.bg-\[var\(--value\)\2c var\(--value\)\] { + background-color: var(--value), var(--value); +} +.bg-\[var\(--value1\)_var\(--value2\)\] { + background-color: var(--value1) var(--value2); +} +.bg-opacity-\[0\.11\] { + --tw-bg-opacity: 0.11; +} +.bg-opacity-\[var\(--value\)\] { + --tw-bg-opacity: var(--value); +} +.bg-\[image\(\)\2c var\(--value\)\] { + background-image: image(), var(--value); +} +.bg-\[image\:var\(--value\)\2c var\(--value\)\] { + background-image: var(--value), var(--value); +} +.bg-\[linear-gradient\(\#eee\2c + \#fff\)\2c + conic-gradient\(red\2c + orange\2c + yellow\2c + green\2c + blue\)\] { + background-image: linear-gradient(#eee, #fff), conic-gradient(red, orange, yellow, green, blue); +} +.bg-\[linear-gradient\(\#eee\2c \#fff\)\] { + background-image: linear-gradient(#eee, #fff); +} +.bg-\[linear-gradient\(to_left\2c rgb\(var\(--green\)\)\2c blue\)\] { + background-image: linear-gradient(to left, rgb(var(--green)), blue); +} +.bg-\[url\(\'\/path-to-image\.png\'\)\] { + background-image: url('/path-to-image.png'); +} +.bg-\[url\:var\(--url\)\] { + background-image: var(--url); +} +.from-\[\#da5b66\] { + --tw-gradient-from: #da5b66; + --tw-gradient-to: rgb(218 91 102 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.from-\[var\(--color\)\] { + --tw-gradient-from: var(--color); + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.via-\[\#da5b66\] { + --tw-gradient-to: rgb(218 91 102 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to); +} +.via-\[var\(--color\)\] { + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--color), var(--tw-gradient-to); +} +.to-\[\#da5b66\] { + --tw-gradient-to: #da5b66; +} +.to-\[var\(--color\)\] { + --tw-gradient-to: var(--color); +} +.bg-\[length\:200px_100px\] { + background-size: 200px 100px; +} +.bg-\[length\:var\(--value\)\] { + background-size: var(--value); +} +.bg-\[center_top_1rem\] { + background-position: center top 1rem; +} +.bg-\[position\:200px_100px\] { + background-position: 200px 100px; +} +.bg-\[position\:var\(--value\)\] { + background-position: var(--value); +} +.fill-\[\#da5b66\] { + fill: #da5b66; +} +.fill-\[url\(\#icon-gradient\)\] { + fill: url(#icon-gradient); +} +.fill-\[var\(--value\)\] { + fill: var(--value); +} +.stroke-\[\#da5b66\] { + stroke: #da5b66; +} +.stroke-\[color\:var\(--value\)\] { + stroke: var(--value); +} +.stroke-\[url\(\#icon-gradient\)\] { + stroke: url(#icon-gradient); +} +.stroke-\[20px\] { + stroke-width: 20px; +} +.stroke-\[length\:var\(--value\)\] { + stroke-width: var(--value); +} +.object-\[50\%\2c 50\%\] { + object-position: 50% 50%; +} +.object-\[top\2c right\] { + object-position: top right; +} +.object-\[var\(--position\)\] { + object-position: var(--position); +} +.p-\[7px\] { + padding: 7px; +} +.px-\[7px\] { + padding-left: 7px; + padding-right: 7px; +} +.py-\[7px\] { + padding-top: 7px; + padding-bottom: 7px; +} +.pb-\[7px\] { + padding-bottom: 7px; +} +.pl-\[7px\] { + padding-left: 7px; +} +.pr-\[7px\] { + padding-right: 7px; +} +.pt-\[7px\] { + padding-top: 7px; +} +.pt-\[clamp\(30px\2c 100px\)\] { + padding-top: clamp(30px, 100px); +} +.indent-\[50\%\] { + text-indent: 50%; +} +.indent-\[var\(--indent\)\] { + text-indent: var(--indent); +} +.align-\[10em\] { + vertical-align: 10em; +} +.font-\[\'Gill_Sans\'\] { + font-family: 'Gill Sans'; +} +.font-\[\'Some_Font\'\2c \'Some_Other_Font\'\] { + font-family: 'Some Font', 'Some Other Font'; +} +.font-\[\'Some_Font\'\2c sans-serif\] { + font-family: 'Some Font', sans-serif; +} +.font-\[\'Some_Font\'\2c var\(--other-font\)\] { + font-family: 'Some Font', var(--other-font); +} +.font-\[Georgia\2c serif\] { + font-family: Georgia, serif; +} +.font-\[family-name\:var\(--value\)\] { + font-family: var(--value); +} +.font-\[sans-serif\2c serif\] { + font-family: sans-serif, serif; +} +.font-\[serif\2c var\(--value\)\] { + font-family: serif, var(--value); +} +.text-\[0\] { + font-size: 0; +} +.text-\[2\.23rem\] { + font-size: 2.23rem; +} +.text-\[4cqw\] { + font-size: 4cqw; +} +.text-\[length\:var\(--font-size\)\] { + font-size: var(--font-size); +} +.text-\[min\(10vh\2c 100px\)\] { + font-size: min(10vh, 100px); +} +.font-\[300\] { + font-weight: 300; +} +.font-\[number\:lighter\] { + font-weight: lighter; +} +.font-\[number\:var\(--value\)\] { + font-weight: var(--value); +} +.leading-\[var\(--leading\)\] { + line-height: var(--leading); +} +.tracking-\[var\(--tracking\)\] { + letter-spacing: var(--tracking); +} +.text-\[black\] { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} +.text-\[color\:var\(--color\)\] { + color: var(--color); +} +.text-\[rgb\(123\2c 123\2c 123\)\] { + --tw-text-opacity: 1; + color: rgb(123 123 123 / var(--tw-text-opacity)); +} +.text-\[rgb\(123\2c _123\2c _123\)\] { + --tw-text-opacity: 1; + color: rgb(123 123 123 / var(--tw-text-opacity)); +} +.text-\[rgb\(123_123_123\)\] { + --tw-text-opacity: 1; + color: rgb(123 123 123 / var(--tw-text-opacity)); +} +.text-opacity-\[0\.8\] { + --tw-text-opacity: 0.8; +} +.text-opacity-\[var\(--value\)\] { + --tw-text-opacity: var(--value); +} +.decoration-\[black\] { + text-decoration-color: black; +} +.decoration-\[color\:var\(--color\)\] { + text-decoration-color: var(--color); +} +.decoration-\[rgb\(123\2c 123\2c 123\)\] { + text-decoration-color: rgb(123, 123, 123); +} +.decoration-\[rgb\(123\2c _123\2c _123\)\] { + text-decoration-color: rgb(123, 123, 123); +} +.decoration-\[rgb\(123_123_123\)\] { + text-decoration-color: rgb(123 123 123); +} +.decoration-\[length\:10px\] { + text-decoration-thickness: 10px; +} +.underline-offset-\[10px\] { + text-underline-offset: 10px; +} +.placeholder-\[var\(--placeholder\)\]::placeholder { + color: var(--placeholder); +} +.placeholder-opacity-\[var\(--placeholder-opacity\)\]::placeholder { + --tw-placeholder-opacity: var(--placeholder-opacity); +} +.caret-\[black\] { + caret-color: black; +} +.caret-\[var\(--value\)\] { + caret-color: var(--value); +} +.accent-\[\#bada55\] { + accent-color: #bada55; +} +.accent-\[var\(--accent-color\)\] { + accent-color: var(--accent-color); +} +.opacity-\[0\.8\] { + opacity: 0.8; +} +.opacity-\[var\(--opacity\)\] { + opacity: var(--opacity); +} +.shadow-\[0px_1px_2px_black\] { + --tw-shadow: 0px 1px 2px black; + --tw-shadow-colored: 0px 1px 2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.shadow-\[shadow\:var\(--value\)\] { + --tw-shadow: var(--value); + --tw-shadow-colored: var(--value); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.outline-\[10px\] { + outline-width: 10px; +} +.outline-\[length\:var\(--outline\)\] { + outline-width: var(--outline); +} +.outline-offset-\[10px\] { + outline-offset: 10px; +} +.outline-\[black\] { + outline-color: black; +} +.outline-\[color\:var\(--outline\)\] { + outline-color: var(--outline); +} +.ring-\[10px\] { + --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(10px + 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-\[length\:\(var\(--value\)\)\] { + --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((var(--value)) + 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-\[\#76ad65\] { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(118 173 101 / var(--tw-ring-opacity)); +} +.ring-\[color\:var\(--value\)\] { + --tw-ring-color: var(--value); +} +.ring-opacity-\[var\(--ring-opacity\)\] { + --tw-ring-opacity: var(--ring-opacity); +} +.ring-offset-\[19rem\] { + --tw-ring-offset-width: 19rem; +} +.ring-offset-\[length\:var\(--value\)\] { + --tw-ring-offset-width: var(--value); +} +.ring-offset-\[\#76ad65\] { + --tw-ring-offset-color: #76ad65; +} +.ring-offset-\[\#ad672f\] { + --tw-ring-offset-color: #ad672f; +} +.ring-offset-\[color\:var\(--value\)\] { + --tw-ring-offset-color: var(--value); +} +.blur-\[15px\] { + --tw-blur: blur(15px); + 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); +} +.brightness-\[300\%\] { + --tw-brightness: brightness(300%); + 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); +} +.contrast-\[2\.4\] { + --tw-contrast: contrast(2.4); + 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); +} +.drop-shadow-\[0px_1px_2px_black\] { + --tw-drop-shadow: drop-shadow(0px 1px 2px black); + 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); +} +.grayscale-\[0\.55\] { + --tw-grayscale: grayscale(0.55); + 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); +} +.hue-rotate-\[0\.8turn\] { + --tw-hue-rotate: hue-rotate(0.8turn); + 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); +} +.invert-\[0\.75\] { + --tw-invert: invert(0.75); + 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); +} +.saturate-\[180\%\] { + --tw-saturate: saturate(180%); + 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); +} +.sepia-\[0\.2\] { + --tw-sepia: sepia(0.2); + 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-\[11px\] { + --tw-backdrop-blur: blur(11px); + 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); +} +.backdrop-brightness-\[1\.23\] { + --tw-backdrop-brightness: brightness(1.23); + 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); +} +.backdrop-contrast-\[0\.87\] { + --tw-backdrop-contrast: contrast(0.87); + 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); +} +.backdrop-grayscale-\[0\.42\] { + --tw-backdrop-grayscale: grayscale(0.42); + 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); +} +.backdrop-hue-rotate-\[1\.57rad\] { + --tw-backdrop-hue-rotate: hue-rotate(1.57rad); + 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); +} +.backdrop-invert-\[0\.66\] { + --tw-backdrop-invert: invert(0.66); + 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); +} +.backdrop-opacity-\[22\%\] { + --tw-backdrop-opacity: opacity(22%); + 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); +} +.backdrop-saturate-\[144\%\] { + --tw-backdrop-saturate: saturate(144%); + 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); +} +.backdrop-sepia-\[0\.38\] { + --tw-backdrop-sepia: sepia(0.38); + 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); +} +.transition-\[opacity\2c width\] { + transition-property: opacity, width; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.delay-\[var\(--delay\)\] { + transition-delay: var(--delay); +} +.duration-\[2s\] { + transition-duration: 2s; +} +.duration-\[var\(--app-duration\)\] { + transition-duration: var(--app-duration); +} +.will-change-\[top\2c left\] { + will-change: top, left; +} +.will-change-\[var\(--will-change\)\] { + will-change: var(--will-change); +} +.content-\[\'\>\'\] { + --tw-content: '>'; + content: var(--tw-content); +} +.content-\[\'hello\'\] { + --tw-content: 'hello'; + content: var(--tw-content); +} +.content-\[attr\(content-before\)\] { + --tw-content: attr(content-before); + content: var(--tw-content); +} +@media (min-width: 1024px) { + .lg\:grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] { + grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; + } +} diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index 70ed3a661a4d..d4a143ecb4b1 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -12,7 +12,9 @@ test('arbitrary values', () => { } return run('@tailwind utilities', config).then((result) => { - let expectedPath = path.resolve(__dirname, './arbitrary-values.test.css') + let expectedPath = env.OXIDE + ? path.resolve(__dirname, './arbitrary-values.oxide.test.css') + : path.resolve(__dirname, './arbitrary-values.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') expect(result.css).toMatchFormattedCss(expected) diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css new file mode 100644 index 000000000000..a968af8aba86 --- /dev/null +++ b/tests/basic-usage.oxide.test.css @@ -0,0 +1,1090 @@ +*, +::before, +::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --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; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --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; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --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; +} +.collapse { + visibility: collapse; +} +.absolute { + position: absolute; +} +.inset-0 { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} +.inset-x-2 { + left: 0.5rem; + right: 0.5rem; +} +.inset-y-4 { + top: 1rem; + bottom: 1rem; +} +.bottom-12 { + bottom: 3rem; +} +.left-16 { + left: 4rem; +} +.right-8 { + right: 2rem; +} +.top-6 { + top: 1.5rem; +} +.isolate { + isolation: isolate; +} +.isolation-auto { + isolation: auto; +} +.z-30 { + z-index: 30; +} +.order-2 { + order: 2; +} +.order-last { + order: 9999; +} +.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; +} +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.mb-3 { + margin-bottom: 0.75rem; +} +.ml-4 { + margin-left: 1rem; +} +.mr-1 { + margin-right: 0.25rem; +} +.mt-0 { + margin-top: 0px; +} +.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-7 { + flex-basis: 1.75rem; +} +.basis-auto { + flex-basis: auto; +} +.table-fixed { + table-layout: fixed; +} +.border-collapse { + border-collapse: collapse; +} +.border-spacing-4 { + --tw-border-spacing-x: 1rem; + --tw-border-spacing-y: 1rem; + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); +} +.border-spacing-x-6 { + --tw-border-spacing-x: 1.5rem; + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); +} +.border-spacing-y-8 { + --tw-border-spacing-y: 2rem; + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); +} +.origin-top-right { + transform-origin: top right; +} +.-translate-x-3 { + --tw-translate-x: -0.75rem; + transform: translate(var(--tw-translate-x), 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)); +} +.-translate-x-4 { + --tw-translate-x: -1rem; + transform: translate(var(--tw-translate-x), 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)); +} +.translate-x-5 { + --tw-translate-x: 1.25rem; + transform: translate(var(--tw-translate-x), 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)); +} +.translate-y-6 { + --tw-translate-y: 1.5rem; + transform: translate(var(--tw-translate-x), 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)); +} +.rotate-3 { + --tw-rotate: 3deg; + transform: translate(var(--tw-translate-x), 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)); +} +.skew-x-12 { + --tw-skew-x: 12deg; + transform: translate(var(--tw-translate-x), 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)); +} +.skew-y-12 { + --tw-skew-y: 12deg; + transform: translate(var(--tw-translate-x), 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)); +} +.scale-95 { + --tw-scale-x: 0.95; + --tw-scale-y: 0.95; + transform: translate(var(--tw-translate-x), 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)); +} +.-scale-x-100 { + --tw-scale-x: -1; + transform: translate(var(--tw-translate-x), 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)); +} +.transform { + transform: translate(var(--tw-translate-x), 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)); +} +.transform-gpu { + 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-x { + --tw-pan-x: pan-x; + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); +} +.touch-pan-y { + --tw-pan-y: pan-y; + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); +} +.touch-pan-up { + --tw-pan-y: pan-up; + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); +} +.touch-pinch-zoom { + --tw-pinch-zoom: pinch-zoom; + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); +} +.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-inline-end: calc(1rem * var(--tw-space-x-reverse)); + margin-inline-start: 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-0 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(0px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); +} +.divide-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(2px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(2px * 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-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-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-b-4 { + border-bottom-width: 4px; +} +.border-t { + border-top-width: 1px; +} +.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-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-r-black { + --tw-border-opacity: 1; + border-right-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-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-to: rgb(252 165 165 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.via-purple-200 { + --tw-gradient-to: rgb(233 213 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to); +} +.to-blue-400 { + --tw-gradient-to: #60a5fa; +} +.decoration-slice { + box-decoration-break: slice; +} +.decoration-clone { + box-decoration-break: clone; +} +.box-decoration-slice { + box-decoration-break: slice; +} +.box-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; +} +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.pb-3 { + padding-bottom: 0.75rem; +} +.pl-4 { + padding-left: 1rem; +} +.pr-2 { + padding-right: 0.5rem; +} +.pt-1 { + padding-top: 0.25rem; +} +.text-center { + text-align: center; +} +.-indent-12 { + text-indent: -3rem; +} +.indent-6 { + text-indent: 1.5rem; +} +.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 { + --tw-ordinal: ordinal; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.tabular-nums { + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.diagonal-fractions { + --tw-numeric-fraction: diagonal-fractions; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.leading-5 { + line-height: 1.25rem; +} +.leading-relaxed { + line-height: 1.625; +} +.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-line: underline; +} +.decoration-red-600 { + text-decoration-color: #dc2626; +} +.decoration-solid { + text-decoration-style: solid; +} +.decoration-1 { + text-decoration-thickness: 1px; +} +.decoration-2 { + text-decoration-thickness: 2px; +} +.underline-offset-1 { + text-underline-offset: 1px; +} +.underline-offset-2 { + text-underline-offset: 2px; +} +.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 -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + 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 -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), + 0 4px 6px -4px var(--tw-shadow-color); + 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 -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.shadow-black { + --tw-shadow-color: #000; + --tw-shadow: var(--tw-shadow-colored); +} +.shadow-blue-100\/10 { + --tw-shadow-color: rgb(219 234 254 / 0.1); + --tw-shadow: var(--tw-shadow-colored); +} +.shadow-red-500\/25 { + --tw-shadow-color: rgb(239 68 68 / 0.25); + --tw-shadow: var(--tw-shadow-colored); +} +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} +.outline { + outline-style: solid; +} +.outline-dashed { + outline-style: dashed; +} +.outline-4 { + outline-width: 4px; +} +.-outline-offset-2 { + outline-offset: -2px; +} +.outline-offset-2 { + outline-offset: 2px; +} +.outline-black { + outline-color: #000; +} +.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-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); +} +.brightness-150 { + --tw-brightness: brightness(1.5); + 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); +} +.contrast-50 { + --tw-contrast: contrast(0.5); + 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); +} +.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-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); +} +.grayscale { + --tw-grayscale: grayscale(100%); + 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); +} +.hue-rotate-60 { + --tw-hue-rotate: hue-rotate(60deg); + 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); +} +.invert { + --tw-invert: invert(100%); + 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); +} +.saturate-200 { + --tw-saturate: saturate(2); + 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); +} +.sepia { + --tw-sepia: sepia(100%); + 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); +} +.filter { + 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); +} +.filter-none { + filter: none; +} +.backdrop-blur-lg { + --tw-backdrop-blur: blur(16px); + 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); +} +.backdrop-brightness-50 { + --tw-backdrop-brightness: brightness(0.5); + 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); +} +.backdrop-contrast-0 { + --tw-backdrop-contrast: contrast(0); + 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); +} +.backdrop-grayscale { + --tw-backdrop-grayscale: grayscale(100%); + 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); +} +.backdrop-hue-rotate-90 { + --tw-backdrop-hue-rotate: hue-rotate(90deg); + 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); +} +.backdrop-invert { + --tw-backdrop-invert: invert(100%); + 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); +} +.backdrop-opacity-75 { + --tw-backdrop-opacity: opacity(0.75); + 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); +} +.backdrop-saturate-150 { + --tw-backdrop-saturate: saturate(1.5); + 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); +} +.backdrop-sepia { + --tw-backdrop-sepia: sepia(100%); + 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); +} +.backdrop-filter { + 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); +} +.backdrop-filter-none { + backdrop-filter: none; +} +.transition { + transition-property: color, background-color, border-color, text-decoration-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 { + --tw-content: none; + content: var(--tw-content); +} diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index 986838c7b9f0..452753bdb868 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -19,7 +19,9 @@ test('basic usage', () => { ` return run(input, config).then((result) => { - let expectedPath = path.resolve(__dirname, './basic-usage.test.css') + let expectedPath = env.OXIDE + ? path.resolve(__dirname, './basic-usage.oxide.test.css') + : path.resolve(__dirname, './basic-usage.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') expect(result.css).toMatchFormattedCss(expected) diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index e1b2a1b3a174..9f5ad33cf2ae 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -95,9 +95,9 @@ font-weight: 400; } .list > :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))); + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .nested { .example { @@ -276,6 +276,32 @@ div { .foo .bg-black { appearance: none; } +.inset-6 { + top: 1.5rem; + right: 1.5rem; + bottom: 1.5rem; + left: 1.5rem; +} +.inset-x-1 { + left: 0.25rem; + right: 0.25rem; +} +.end-8 { + inset-inline-end: 2rem; +} +.start-4 { + inset-inline-start: 1rem; +} +.mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; +} +.me-8 { + margin-inline-end: 2rem; +} +.ms-4 { + margin-inline-start: 1rem; +} .mt-6 { margin-top: 1.5rem; } @@ -294,6 +320,41 @@ div { .grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] { grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; } +.rounded-e { + border-start-end-radius: 0.25rem; + border-end-end-radius: 0.25rem; +} +.rounded-s { + border-start-start-radius: 0.25rem; + border-end-start-radius: 0.25rem; +} +.rounded-es { + border-end-start-radius: 0.25rem; +} +.rounded-ss { + border-start-start-radius: 0.25rem; +} +.border-2 { + border-width: 2px; +} +.border-e-4 { + border-inline-end-width: 4px; +} +.border-s-0 { + border-inline-start-width: 0px; +} +.border-black { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} +.border-e-red-400 { + --tw-border-opacity: 1; + border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity)); +} +.border-s-green-500 { + --tw-border-opacity: 1; + border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity)); +} .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); @@ -316,6 +377,19 @@ div { --tw-gradient-to: rgb(186 218 85 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} +.pe-8 { + padding-inline-end: 2rem; +} +.ps-4 { + padding-inline-start: 1rem; +} +.pt-6 { + padding-top: 1.5rem; +} .text-center { text-align: center; } diff --git a/tests/kitchen-sink.test.html b/tests/kitchen-sink.test.html index 5215db2ad388..042fa6f38625 100644 --- a/tests/kitchen-sink.test.html +++ b/tests/kitchen-sink.test.html @@ -14,7 +14,12 @@ >
-
+
+
+
+
+
+
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index 9314475b20ee..ca5a5278d332 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -141,7 +141,7 @@ test.each([[true], [false]])('it works (using Rust: %p)', (useOxide) => { @apply font-bold group-hover:font-normal; } .list { - @apply space-x-4; + @apply space-y-4; } .nested { .example { diff --git a/tests/oxide.test.css b/tests/oxide.test.css deleted file mode 100644 index e1b2a1b3a174..000000000000 --- a/tests/oxide.test.css +++ /dev/null @@ -1,579 +0,0 @@ -.theme-test { - 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'; - color: #3b82f6; -} -@media (min-width: 1024px) { - .screen-test { - color: purple; - } -} -.apply-1 { - margin-top: 1.5rem; -} -.apply-2 { - margin-top: 1.5rem; -} -.apply-test { - margin-top: 1.5rem; - --tw-bg-opacity: 1; - background-color: rgb(236 72 153 / var(--tw-bg-opacity)); -} -.apply-test:hover { - font-weight: 700; -} -.apply-test:hover:focus { - font-weight: 700; -} -@media (min-width: 640px) { - .apply-test { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); - } - .apply-test:nth-child(even):focus { - --tw-bg-opacity: 1; - background-color: rgb(251 207 232 / var(--tw-bg-opacity)); - } -} -.apply-components { - width: 100%; -} -@media (min-width: 640px) { - .apply-components { - max-width: 640px; - } -} -@media (min-width: 768px) { - .apply-components { - max-width: 768px; - } -} -@media (min-width: 1024px) { - .apply-components { - max-width: 1024px; - } -} -@media (min-width: 1280px) { - .apply-components { - max-width: 1280px; - } -} -@media (min-width: 1536px) { - .apply-components { - max-width: 1536px; - } -} -.apply-components { - margin-left: auto; - margin-right: auto; -} -.drop-empty-rules:hover { - font-weight: 700; -} -.group:hover .apply-group { - font-weight: 700; -} -.dark .apply-dark-mode { - font-weight: 700; -} -.apply-with-existing:hover { - font-weight: 400; -} -@media (min-width: 640px) { - .apply-with-existing:hover { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); - } -} -.multiple, -.selectors { - font-weight: 700; -} -.group:hover .multiple, -.group:hover .selectors { - font-weight: 400; -} -.list > :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))); -} -.nested { - .example { - font-weight: 700; - } - .example:hover { - font-weight: 400; - } -} -.apply-order-a { - margin: 1.25rem; - margin-top: 1.5rem; -} -.apply-order-b { - margin: 1.25rem; - margin-top: 1.5rem; -} -.dark .group:hover .apply-dark-group-example-a { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); -} -@media (min-width: 640px) { - @media (prefers-reduced-motion: no-preference) { - .group:active .crazy-example:focus { - opacity: 0.1; - } - } -} -h1 { - font-size: 1.5rem; - font-weight: 700; -} -h1:first-child { - margin-top: 0px; -} -div { - background: #654321; -} -*, -::before, -::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --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-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --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; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --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-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --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; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --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; - } -} -.test-apply-font-variant { - --tw-ordinal: ordinal; - --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) - var(--tw-numeric-spacing) var(--tw-numeric-fraction); -} -.custom-component { - background: #123456; -} -*, -::before, -::after, -::backdrop { - padding: 5px; -} -.foo .bg-black { - appearance: none; -} -.mt-6 { - margin-top: 1.5rem; -} -.scale-50 { - --tw-scale-x: 0.5; - --tw-scale-y: 0.5; - transform: translate(var(--tw-translate-x), 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)); -} -.transform { - transform: translate(var(--tw-translate-x), 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)); -} -.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] { - grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; -} -.bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); -} -.bg-green-500 { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); -} -.bg-opacity-50 { - --tw-bg-opacity: 0.5; -} -.bg-gradient-to-r { - background-image: linear-gradient(to right, var(--tw-gradient-stops)); -} -.bg-hero--home-1 { - background-image: url('/images/homepage-1.jpg'); -} -.from-foo { - --tw-gradient-from: #bada55; - --tw-gradient-to: rgb(186 218 85 / 0); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} -.text-center { - text-align: center; -} -.font-medium { - font-weight: 500; -} -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); -} -.shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); -} -.magic-none { - magic: none; -} -.magic-tons { - magic: tons; -} -.custom-util { - background: #abcdef; -} -*, -::before, -::after, -::backdrop { - margin: 10px; -} -.first\:pt-0:first-child { - padding-top: 0px; -} -.hover\:container:hover { - width: 100%; -} -@media (min-width: 640px) { - .hover\:container:hover { - max-width: 640px; - } -} -@media (min-width: 768px) { - .hover\:container:hover { - max-width: 768px; - } -} -@media (min-width: 1024px) { - .hover\:container:hover { - max-width: 1024px; - } -} -@media (min-width: 1280px) { - .hover\:container:hover { - max-width: 1280px; - } -} -@media (min-width: 1536px) { - .hover\:container:hover { - max-width: 1536px; - } -} -.hover\:scale-75:hover { - --tw-scale-x: 0.75; - --tw-scale-y: 0.75; - transform: translate(var(--tw-translate-x), 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)); -} -.hover\:font-bold:hover { - font-weight: 700; -} -.hover\:shadow-lg:hover { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), - 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); -} -.hover\:custom-util:hover { - background: #abcdef; -} -.focus\:font-normal:focus { - font-weight: 400; -} -.focus\:ring-2:focus { - --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(2px + 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); -} -.focus\:ring-blue-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); -} -.focus\:hover\:font-light:hover:focus { - font-weight: 300; -} -.disabled\:font-bold:disabled { - font-weight: 700; -} -.group:hover .group-hover\:opacity-100 { - opacity: 1; -} -.group:hover .group-hover\:custom-util { - background: #abcdef; -} -.group:active .group-active\:opacity-10 { - opacity: 0.1; -} -.foo\:custom-util { - background: #abcdef !important; -} -.foo\:hover\:custom-util:hover { - background: #abcdef !important; -} -@media (prefers-reduced-motion: no-preference) { - .motion-safe\:transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } - .motion-safe\:custom-util { - background: #abcdef; - } -} -@media (prefers-reduced-motion: reduce) { - .motion-reduce\:transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } -} -.dark .dark\:custom-util { - background: #abcdef; -} -@media (min-width: 640px) { - .sm\:container { - width: 100%; - } - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - @media (min-width: 1536px) { - .sm\:container { - max-width: 1536px; - } - } - .sm\:text-center { - text-align: center; - } - .sm\:tabular-nums { - --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) - var(--tw-numeric-spacing) var(--tw-numeric-fraction); - } - .sm\:custom-util { - background: #abcdef; - } - @media (prefers-reduced-motion: no-preference) { - .group:active .sm\:motion-safe\:group-active\:focus\:opacity-10:focus { - opacity: 0.1; - } - } -} -@media (min-width: 768px) { - .md\:container { - width: 100%; - } - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - @media (min-width: 1536px) { - .md\:container { - max-width: 1536px; - } - } - .md\:text-center { - text-align: center; - } - .md\:opacity-50 { - opacity: 0.5; - } - .md\:shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); - } - .md\:hover\:border-r-blue-500\/30:hover { - border-right-color: rgb(59 130 246 / 0.3); - } - .md\:hover\:opacity-20:hover { - opacity: 0.2; - } - @media (prefers-reduced-motion: no-preference) { - .md\:motion-safe\:hover\:transition:hover { - transition-property: color, background-color, border-color, text-decoration-color, fill, - stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } - .dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active { - background: #abcdef !important; - } - } - @media (min-width: 640px) { - .md\:sm\:text-center { - text-align: center; - } - } -} -@media (min-width: 1280px) and (max-width: 1535px) { - .range\:text-right { - text-align: right; - } -} -@media (min-width: 640px) and (max-width: 767px), (max-width: 868px) { - .multi\:text-left { - text-align: left; - } -} diff --git a/tests/oxide.test.html b/tests/oxide.test.html deleted file mode 100644 index 5215db2ad388..000000000000 --- a/tests/oxide.test.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - Title - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - diff --git a/tests/oxide.test.js b/tests/oxide.test.js index 75fa4b2c9467..9e96c225b655 100644 --- a/tests/oxide.test.js +++ b/tests/oxide.test.js @@ -1,202 +1,29 @@ -import fs from 'fs' -import path from 'path' - +import { run, html, css, defaults } from './util/run' import { env } from '../src/lib/sharedState' -import { run, css } from './util/run' + +beforeEach(() => { + env.OXIDE = true +}) afterEach(() => { env.OXIDE = false }) -test.each([[true], [false]])('it works (using Rust: %p)', (useOxide) => { - env.OXIDE = useOxide - +test('space-x uses logical properties', () => { let config = { - darkMode: 'class', - content: [path.resolve(__dirname, './oxide.test.html')], + content: [{ raw: html`
` }], corePlugins: { preflight: false }, - theme: { - extend: { - screens: { - range: { min: '1280px', max: '1535px' }, - multi: [{ min: '640px', max: '767px' }, { max: '868px' }], - }, - gradientColorStops: { - foo: '#bada55', - }, - backgroundImage: { - 'hero--home-1': "url('/images/homepage-1.jpg')", - }, - }, - }, - plugins: [ - function ({ addVariant }) { - addVariant( - 'foo', - ({ container }) => { - container.walkRules((rule) => { - rule.selector = `.foo\\:${rule.selector.slice(1)}` - rule.walkDecls((decl) => { - decl.important = true - }) - }) - }, - { before: 'sm' } - ) - }, - function ({ addUtilities, addBase, theme }) { - addBase({ - h1: { - fontSize: theme('fontSize.2xl'), - fontWeight: theme('fontWeight.bold'), - '&:first-child': { - marginTop: '0px', - }, - }, - }) - addUtilities( - { - '.magic-none': { - magic: 'none', - }, - '.magic-tons': { - magic: 'tons', - }, - }, - ['responsive', 'hover'] - ) - }, - ], } - let input = css` - @layer utilities { - .custom-util { - background: #abcdef; - } - *, - ::before, - ::after, - ::backdrop { - margin: 10px; - } - } - @layer components { - .test-apply-font-variant { - @apply ordinal tabular-nums; - } - .custom-component { - background: #123456; - } - *, - ::before, - ::after, - ::backdrop { - padding: 5px; - } - .foo .bg-black { - appearance: none; - } - } - @layer base { - div { - background: #654321; - } - } - .theme-test { - font-family: theme('fontFamily.sans'); - color: theme('colors.blue.500'); - } - @screen lg { - .screen-test { - color: purple; - } - } - .apply-1 { - @apply mt-6; - } - .apply-2 { - @apply mt-6; - } - .apply-test { - @apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200; - } - .apply-components { - @apply container mx-auto; - } - .drop-empty-rules { - @apply hover:font-bold; - } - .apply-group { - @apply group-hover:font-bold; - } - .apply-dark-mode { - @apply dark:font-bold; - } - .apply-with-existing:hover { - @apply font-normal sm:bg-green-500; - } - .multiple, - .selectors { - @apply font-bold group-hover:font-normal; - } - .list { - @apply space-x-4; - } - .nested { - .example { - @apply font-bold hover:font-normal; - } - } - .apply-order-a { - @apply m-5 mt-6; - } - .apply-order-b { - @apply m-5 mt-6; - } - .apply-dark-group-example-a { - @apply dark:group-hover:bg-green-500; - } - .crazy-example { - @apply sm:motion-safe:group-active:focus:opacity-10; - } - @tailwind base; - @tailwind components; - @tailwind utilities; - ` - - return run(input, config).then((result) => { - let expectedPath = path.resolve(__dirname, './oxide.test.css') - let expected = fs.readFileSync(expectedPath, 'utf8') + return run('@tailwind base; @tailwind utilities;', config).then((result) => { + expect(result.css).toMatchCss(css` + ${defaults} - expect(result.css).toMatchFormattedCss(expected) + .space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(1rem * var(--tw-space-x-reverse)); + margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + } + `) }) }) - -xit.each([[true], [false]])( - 'should use the transformer for svelte files (using Rust: %p)', - (useOxide) => { - env.OXIDE = useOxide - - let config = { - darkMode: 'class', - content: [path.resolve(__dirname, './oxide.test.svelte')], - corePlugins: { preflight: false }, - theme: {}, - plugins: [], - } - - let input = css` - @tailwind base; - @tailwind components; - @tailwind utilities; - ` - - return run(input, config).then((result) => { - let expectedPath = path.resolve(__dirname, './oxide-svelte.test.css') - let expected = fs.readFileSync(expectedPath, 'utf8') - - expect(result.css).toMatchFormattedCss(expected) - }) - } -) diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index e50ea4e4fc33..0fce96e9bec4 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -1,4 +1,5 @@ import { run, html, css, defaults } from '../util/run' +import { env } from '../../src/lib/sharedState' it('should add the divide styles for divide-y and a default border color', () => { let config = { @@ -25,16 +26,28 @@ it('should add the divide styles for divide-x and a default border color', () => corePlugins: { preflight: false }, } - return run('@tailwind base; @tailwind utilities;', config).then((result) => { - expect(result.css).toMatchCss(css` - ${defaults} + let expected = env.OXIDE + ? css` + ${defaults} + + .divide-x > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(1px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); + } + ` + : css` + ${defaults} + + .divide-x > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); + } + ` - .divide-x > :not([hidden]) ~ :not([hidden]) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); - } - `) + return run('@tailwind base; @tailwind utilities;', config).then((result) => { + expect(result.css).toMatchCss(expected) }) }) diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css new file mode 100644 index 000000000000..b97386be61b1 --- /dev/null +++ b/tests/raw-content.oxide.test.css @@ -0,0 +1,778 @@ +.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; +} +.collapse { + visibility: collapse; +} +.absolute { + position: absolute; +} +.inset-0 { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} +.inset-x-2 { + left: 0.5rem; + right: 0.5rem; +} +.inset-y-4 { + top: 1rem; + bottom: 1rem; +} +.bottom-12 { + bottom: 3rem; +} +.left-16 { + left: 4rem; +} +.right-8 { + right: 2rem; +} +.top-6 { + top: 1.5rem; +} +.isolate { + isolation: isolate; +} +.isolation-auto { + isolation: auto; +} +.z-30 { + z-index: 30; +} +.order-2 { + order: 2; +} +.order-last { + order: 9999; +} +.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; +} +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.mb-3 { + margin-bottom: 0.75rem; +} +.ml-4 { + margin-left: 1rem; +} +.mr-1 { + margin-right: 0.25rem; +} +.mt-0 { + margin-top: 0px; +} +.box-border { + box-sizing: border-box; +} +.inline-grid { + display: inline-grid; +} +.hidden { + display: none; +} +.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; +} +.flex-grow { + flex-grow: 1; +} +.flex-grow-0 { + flex-grow: 0; +} +.table-fixed { + table-layout: fixed; +} +.border-collapse { + border-collapse: collapse; +} +.origin-top-right { + transform-origin: top right; +} +.-translate-x-3 { + --tw-translate-x: -0.75rem; + transform: translate(var(--tw-translate-x), 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)); +} +.-translate-x-4 { + --tw-translate-x: -1rem; + transform: translate(var(--tw-translate-x), 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)); +} +.translate-x-5 { + --tw-translate-x: 1.25rem; + transform: translate(var(--tw-translate-x), 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)); +} +.translate-y-6 { + --tw-translate-y: 1.5rem; + transform: translate(var(--tw-translate-x), 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)); +} +.rotate-3 { + --tw-rotate: 3deg; + transform: translate(var(--tw-translate-x), 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)); +} +.skew-x-12 { + --tw-skew-x: 12deg; + transform: translate(var(--tw-translate-x), 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)); +} +.skew-y-12 { + --tw-skew-y: 12deg; + transform: translate(var(--tw-translate-x), 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)); +} +.scale-95 { + --tw-scale-x: 0.95; + --tw-scale-y: 0.95; + transform: translate(var(--tw-translate-x), 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)); +} +.transform { + transform: translate(var(--tw-translate-x), 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)); +} +.transform-gpu { + 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)); +} +.animate-none { + animation: none; +} +@keyframes spin { + to { + transform: rotate(360deg); + } +} +.animate-spin { + animation: spin 1s linear infinite; +} +.cursor-pointer { + cursor: pointer; +} +.select-none { + user-select: none; +} +.resize-none { + resize: none; +} +.list-inside { + list-style-position: inside; +} +.list-disc { + list-style-type: disc; +} +.appearance-none { + appearance: none; +} +.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-inline-end: calc(1rem * var(--tw-space-x-reverse)); + margin-inline-start: 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-0 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(0px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); +} +.divide-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(2px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(2px * 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-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-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; +} +.scroll-smooth { + scroll-behavior: smooth; +} +.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-solid { + border-style: solid; +} +.border-black { + --tw-border-opacity: 1; + border-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-to: rgb(252 165 165 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.via-purple-200 { + --tw-gradient-to: rgb(233 213 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to); +} +.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; +} +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.pb-3 { + padding-bottom: 0.75rem; +} +.pl-4 { + padding-left: 1rem; +} +.pr-2 { + padding-right: 0.5rem; +} +.pt-1 { + padding-top: 0.25rem; +} +.text-center { + text-align: center; +} +.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 { + --tw-ordinal: ordinal; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.tabular-nums { + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.diagonal-fractions { + --tw-numeric-fraction: diagonal-fractions; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.leading-5 { + line-height: 1.25rem; +} +.leading-relaxed { + line-height: 1.625; +} +.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-line: underline; +} +.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; +} +.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 -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + 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 -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), + 0 4px 6px -4px var(--tw-shadow-color); + 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 -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.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-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); +} +.brightness-150 { + --tw-brightness: brightness(1.5); + 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); +} +.contrast-50 { + --tw-contrast: contrast(0.5); + 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); +} +.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-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); +} +.grayscale { + --tw-grayscale: grayscale(100%); + 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); +} +.hue-rotate-60 { + --tw-hue-rotate: hue-rotate(60deg); + 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); +} +.invert { + --tw-invert: invert(100%); + 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); +} +.saturate-200 { + --tw-saturate: saturate(2); + 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); +} +.sepia { + --tw-sepia: sepia(100%); + 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); +} +.filter { + 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); +} +.filter-none { + filter: none; +} +.backdrop-blur-lg { + --tw-backdrop-blur: blur(16px); + 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); +} +.backdrop-brightness-50 { + --tw-backdrop-brightness: brightness(0.5); + 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); +} +.backdrop-contrast-0 { + --tw-backdrop-contrast: contrast(0); + 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); +} +.backdrop-grayscale { + --tw-backdrop-grayscale: grayscale(100%); + 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); +} +.backdrop-hue-rotate-90 { + --tw-backdrop-hue-rotate: hue-rotate(90deg); + 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); +} +.backdrop-invert { + --tw-backdrop-invert: invert(100%); + 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); +} +.backdrop-opacity-75 { + --tw-backdrop-opacity: opacity(0.75); + 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); +} +.backdrop-saturate-150 { + --tw-backdrop-saturate: saturate(1.5); + 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); +} +.backdrop-sepia { + --tw-backdrop-sepia: sepia(100%); + 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); +} +.backdrop-filter { + 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); +} +.backdrop-filter-none { + backdrop-filter: none; +} +.transition { + transition-property: color, background-color, border-color, text-decoration-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); +} diff --git a/tests/raw-content.test.js b/tests/raw-content.test.js index 199acc1206cc..c863bbb0c3bd 100644 --- a/tests/raw-content.test.js +++ b/tests/raw-content.test.js @@ -2,6 +2,7 @@ import fs from 'fs' import path from 'path' import { run, css } from './util/run' +import { env } from '../src/lib/sharedState' it('raw content', () => { let config = { @@ -15,7 +16,9 @@ it('raw content', () => { ` return run(input, config).then((result) => { - let expectedPath = path.resolve(__dirname, './raw-content.test.css') + let expectedPath = env.OXIDE + ? path.resolve(__dirname, './raw-content.oxide.test.css') + : path.resolve(__dirname, './raw-content.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') expect(result.css).toMatchFormattedCss(expected) diff --git a/tests/variants.oxide.test.css b/tests/variants.oxide.test.css new file mode 100644 index 000000000000..3b6387342faa --- /dev/null +++ b/tests/variants.oxide.test.css @@ -0,0 +1,954 @@ +*, +::before, +::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --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; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --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; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} +.first-letter\:text-2xl::first-letter { + font-size: 1.5rem; + line-height: 2rem; +} +.first-letter\:text-red-500::first-letter { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity)); +} +.first-line\:bg-yellow-300::first-line { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); +} +.first-line\:underline::first-line { + text-decoration-line: underline; +} +.marker\:text-lg *::marker { + font-size: 1.125rem; + line-height: 1.75rem; +} +.marker\:text-red-500 *::marker { + color: rgb(239 68 68); +} +.marker\:text-lg::marker { + font-size: 1.125rem; + line-height: 1.75rem; +} +.marker\:text-red-500::marker { + color: rgb(239 68 68); +} +.selection\:bg-blue-500 *::selection { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} +.selection\:text-white *::selection { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.selection\:bg-blue-500::selection { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} +.selection\:text-white::selection { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.file\:bg-blue-500::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} +.file\:text-white::file-selector-button { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.placeholder\:font-bold::placeholder { + font-weight: 700; +} +.placeholder\:text-red-500::placeholder { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity)); +} +.backdrop\:shadow-md::backdrop { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.before\:block::before { + content: var(--tw-content); + display: block; +} +.before\:bg-red-500::before { + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); +} +.after\:flex::after { + content: var(--tw-content); + display: flex; +} +.after\:uppercase::after { + content: var(--tw-content); + text-transform: uppercase; +} +.first\:shadow-md:first-child { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.last\:shadow-md:last-child { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.only\:shadow-md:only-child { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.odd\:shadow-md:nth-child(odd) { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.even\:shadow-md:nth-child(even) { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.first-of-type\:shadow-md:first-of-type { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.last-of-type\:shadow-md:last-of-type { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.only-of-type\:shadow-md:only-of-type { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.visited\:shadow-md:visited { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.target\:shadow-md:target { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.open\:bg-red-200[open] { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} +.default\:shadow-md:default { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.checked\:shadow-md:checked { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.indeterminate\:shadow-md:indeterminate { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.placeholder-shown\:shadow-md:placeholder-shown { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.autofill\:shadow-md:autofill { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.optional\:shadow-md:optional { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.required\:shadow-md:required { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.valid\:shadow-md:valid { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.invalid\:shadow-md:invalid { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.in-range\:shadow-md:in-range { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.out-of-range\:shadow-md:out-of-range { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.read-only\:shadow-md:read-only { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.empty\:shadow-md:empty { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.focus-within\:shadow-md:focus-within { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +@keyframes spin { + to { + transform: rotate(360deg); + } +} +.hover\:animate-spin:hover { + animation: spin 1s linear infinite; +} +.hover\:shadow-md:hover { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.file\:hover\:bg-blue-600:hover::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} +.open\:hover\:bg-red-200:hover[open] { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} +.focus\:shadow-md:focus { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.focus\:hover\:shadow-md:hover:focus { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.focus-visible\:shadow-md:focus-visible { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.active\:shadow-md:active { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.enabled\:shadow-md:enabled { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.disabled\:shadow-md:disabled { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:first-child .group-first\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:last-child .group-last\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:only-child .group-only\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:nth-child(odd) .group-odd\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:nth-child(even) .group-even\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:first-of-type .group-first-of-type\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:last-of-type .group-last-of-type\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:only-of-type .group-only-of-type\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:visited .group-visited\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:target .group-target\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group[open] .group-open\:bg-red-200 { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} +.group:default .group-default\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:checked .group-checked\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:indeterminate .group-indeterminate\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:placeholder-shown .group-placeholder-shown\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:autofill .group-autofill\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:optional .group-optional\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:required .group-required\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:valid .group-valid\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:invalid .group-invalid\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:in-range .group-in-range\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:out-of-range .group-out-of-range\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:read-only .group-read-only\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:empty .group-empty\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:focus-within .group-focus-within\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:hover .group-hover\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group[open]:hover .group-open\:group-hover\:space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(0.5rem * var(--tw-space-x-reverse)); + margin-inline-start: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} +.group:focus .group-focus\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group[open]:focus .group-open\:group-focus\:bg-red-200 { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} +.group:focus:hover .group-focus\:group-hover\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:focus-visible .group-focus-visible\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:active .group-active\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:enabled .group-enabled\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:disabled .group-disabled\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:disabled:focus:hover + .group-disabled\:group-focus\:group-hover\:first\:shadow-md:first-child { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:first-child ~ .peer-first\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:last-child ~ .peer-last\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:only-child ~ .peer-only\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:nth-child(odd) ~ .peer-odd\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:nth-child(even) ~ .peer-even\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:first-of-type ~ .peer-first-of-type\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:last-of-type ~ .peer-last-of-type\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:only-of-type ~ .peer-only-of-type\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:visited ~ .peer-visited\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:target ~ .peer-target\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:default ~ .peer-default\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:checked ~ .peer-checked\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:indeterminate ~ .peer-indeterminate\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:placeholder-shown ~ .peer-placeholder-shown\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:autofill ~ .peer-autofill\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:optional ~ .peer-optional\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:required ~ .peer-required\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:valid ~ .peer-valid\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:invalid ~ .peer-invalid\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:in-range ~ .peer-in-range\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:out-of-range ~ .peer-out-of-range\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:read-only ~ .peer-read-only\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:empty ~ .peer-empty\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:focus-within ~ .peer-focus-within\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:hover ~ .peer-hover\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:focus ~ .peer-focus\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:focus:hover ~ .peer-focus\:peer-hover\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:focus-visible ~ .peer-focus-visible\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:active ~ .peer-active\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:enabled ~ .peer-enabled\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:disabled ~ .peer-disabled\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +[dir='ltr'] .ltr\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +[dir='rtl'] .rtl\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +@media (prefers-reduced-motion: no-preference) { + .motion-safe\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (prefers-reduced-motion: reduce) { + .motion-reduce\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (prefers-contrast: more) { + .contrast-more\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} +@media (prefers-contrast: less) { + .contrast-less\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} +.dark .dark\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.dark .peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +@media print { + .print\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} +@media (min-width: 640px) { + .sm\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + .sm\:active\:shadow-md:active { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (min-width: 768px) { + .md\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + .group:focus .md\:group-focus\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (min-width: 1024px) { + @keyframes spin { + to { + transform: rotate(360deg); + } + } + .lg\:animate-spin { + animation: spin 1s linear infinite; + } + .lg\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + .dark .lg\:dark\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (min-width: 1280px) { + .xl\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (min-width: 1536px) { + .\32xl\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + @media (prefers-reduced-motion: no-preference) { + .dark .\32xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + } +} +@media (orientation: portrait) { + .portrait\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} +@media (orientation: landscape) { + .landscape\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} diff --git a/tests/variants.test.js b/tests/variants.test.js index 7ed5dc5c2f20..6490d9a461ad 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -3,6 +3,7 @@ import path from 'path' import postcss from 'postcss' import { run, css, html, defaults } from './util/run' +import { env } from '../src/lib/sharedState' test('variants', () => { let config = { @@ -18,7 +19,9 @@ test('variants', () => { ` return run(input, config).then((result) => { - let expectedPath = path.resolve(__dirname, './variants.test.css') + let expectedPath = env.OXIDE + ? path.resolve(__dirname, './variants.oxide.test.css') + : path.resolve(__dirname, './variants.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') expect(result.css).toMatchFormattedCss(expected)