diff --git a/CHANGELOG.md b/CHANGELOG.md
index a99588d39..3c95f8eaf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
-- Nothing yet!
+### Added
+
+- Add `line-height` modifier support to `font-size` utilities ([#9875](https://github.com/tailwindlabs/tailwindcss/pull/9875))
+- Support using variables as arbitrary values without `var(...)` ([#9880](https://github.com/tailwindlabs/tailwindcss/pull/9880), [#9962](https://github.com/tailwindlabs/tailwindcss/pull/9962))
+- 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))
+- Add `hyphens` utilities ([#10071](https://github.com/tailwindlabs/tailwindcss/pull/10071))
+- [Oxide] Use `lightningcss` for nesting and vendor prefixes in PostCSS plugin ([#10399](https://github.com/tailwindlabs/tailwindcss/pull/10399))
+- Add support for configuring default `font-variation-settings` for a `font-family` ([#10034](https://github.com/tailwindlabs/tailwindcss/pull/10034), [#10515](https://github.com/tailwindlabs/tailwindcss/pull/10515))
+- Add `caption-side` utilities ([#10470](https://github.com/tailwindlabs/tailwindcss/pull/10470))
## [3.2.5] - 2023-02-08
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 18c06eb08..e440eff8e 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'
@@ -646,6 +647,8 @@ export let corePlugins = {
['inset-y', ['top', 'bottom']],
],
[
+ ['start', ['inset-inline-start']],
+ ['end', ['inset-inline-end']],
['top', ['top']],
['right', ['right']],
['bottom', ['bottom']],
@@ -697,6 +700,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']],
@@ -767,6 +772,13 @@ export let corePlugins = {
})
},
+ captionSide: ({ addUtilities }) => {
+ addUtilities({
+ '.caption-top': { 'caption-side': 'top' },
+ '.caption-bottom': { 'caption-side': 'bottom' },
+ })
+ },
+
borderCollapse: ({ addUtilities }) => {
addUtilities({
'.border-collapse': { 'border-collapse': 'collapse' },
@@ -1045,6 +1057,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']],
@@ -1061,6 +1075,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']],
@@ -1234,6 +1250,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',
@@ -1269,6 +1295,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': {},
@@ -1436,6 +1473,14 @@ export let corePlugins = {
})
},
+ hyphens: ({ addUtilities }) => {
+ addUtilities({
+ '.hyphens-none': { hyphens: 'none' },
+ '.hyphens-manual': { hyphens: 'manual' },
+ '.hyphens-auto': { hyphens: 'auto' },
+ })
+ },
+
whitespace: ({ addUtilities }) => {
addUtilities({
'.whitespace-normal': { 'white-space': 'normal' },
@@ -1458,12 +1503,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']],
@@ -1480,6 +1531,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']],
@@ -1562,6 +1615,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 {
@@ -1798,6 +1877,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']],
@@ -1841,13 +1922,16 @@ export let corePlugins = {
font: (value) => {
let [families, options = {}] =
Array.isArray(value) && isPlainObject(value[1]) ? value : [value]
- let { fontFeatureSettings } = options
+ let { fontFeatureSettings, fontVariationSettings } = options
return {
'font-family': Array.isArray(families) ? families.join(', ') : families,
...(fontFeatureSettings === undefined
? {}
: { 'font-feature-settings': fontFeatureSettings }),
+ ...(fontVariationSettings === undefined
+ ? {}
+ : { 'font-variation-settings': fontVariationSettings }),
}
},
},
@@ -1861,9 +1945,16 @@ export let corePlugins = {
fontSize: ({ matchUtilities, theme }) => {
matchUtilities(
{
- text: (value) => {
+ text: (value, { modifier }) => {
let [fontSize, options] = Array.isArray(value) ? value : [value]
+ if (modifier) {
+ return {
+ 'font-size': fontSize,
+ 'line-height': modifier,
+ }
+ }
+
let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
? options
: { lineHeight: options }
@@ -1878,6 +1969,7 @@ export let corePlugins = {
},
{
values: theme('fontSize'),
+ modifiers: theme('lineHeight'),
type: ['absolute-size', 'relative-size', 'length', 'percentage'],
}
)
diff --git a/src/css/preflight.css b/src/css/preflight.css
index 302904429..fab875d95 100644
--- a/src/css/preflight.css
+++ b/src/css/preflight.css
@@ -23,6 +23,7 @@
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
@@ -32,6 +33,7 @@ html {
tab-size: 4; /* 3 */
font-family: theme('fontFamily.sans', 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"); /* 4 */
font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
+ font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
}
/*
diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
index 5005f5fe0..55cc00579 100644
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -16,6 +16,10 @@ const placeholderRe = new RegExp(placeholder, 'g')
// This is not a data type, but rather a function that can normalize the
// correct values.
export function normalize(value, isRoot = true) {
+ if (value.startsWith('--')) {
+ return `var(${value})`
+ }
+
// Keep raw strings if it starts with `url(`
if (value.includes('url(')) {
return value
diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
index 5c4821d3c..e347f404b 100644
--- a/src/util/pluginUtils.js
+++ b/src/util/pluginUtils.js
@@ -133,6 +133,14 @@ export function parseColorFormat(value) {
return value
}
+function unwrapArbitraryModifier(modifier) {
+ modifier = modifier.slice(1, -1)
+ if (modifier.startsWith('--')) {
+ modifier = `var(${modifier})`
+ }
+ return modifier
+}
+
export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
if (options.values?.[modifier] !== undefined) {
return parseColorFormat(options.values?.[modifier])
@@ -153,7 +161,7 @@ export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
normalizedColor = parseColorFormat(normalizedColor)
if (isArbitraryValue(alpha)) {
- return withAlphaValue(normalizedColor, alpha.slice(1, -1))
+ return withAlphaValue(normalizedColor, unwrapArbitraryModifier(alpha))
}
if (tailwindConfig.theme?.opacity?.[alpha] === undefined) {
@@ -287,7 +295,7 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
if (configValue !== null) {
utilityModifier = configValue
} else if (isArbitraryValue(utilityModifier)) {
- utilityModifier = utilityModifier.slice(1, -1)
+ utilityModifier = unwrapArbitraryModifier(utilityModifier)
}
}
}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 21a82cd48..8a3fac7a3 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -853,6 +853,7 @@ module.exports = {
'top-left': 'top left',
},
transitionDelay: {
+ 0: '0s',
75: '75ms',
100: '100ms',
150: '150ms',
@@ -864,6 +865,7 @@ module.exports = {
},
transitionDuration: {
DEFAULT: '150ms',
+ 0: '0s',
75: '75ms',
100: '100ms',
150: '150ms',
diff --git a/tests/any-type.test.js b/tests/any-type.test.js
index 8593362aa..add8a1795 100644
--- a/tests/any-type.test.js
+++ b/tests/any-type.test.js
@@ -428,8 +428,8 @@ crosscheck(({ stable, oxide }) => {
}
.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)));
+ margin-inline-start: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-end: calc(var(--any-value) * var(--tw-space-x-reverse));
}
.space-y-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css
index e19212d74..acd68ee33 100644
--- a/tests/arbitrary-values.oxide.test.css
+++ b/tests/arbitrary-values.oxide.test.css
@@ -455,13 +455,13 @@
}
.space-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(20cm * var(--tw-space-x-reverse));
- margin-left: calc(20cm * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-start: calc(20cm * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-end: calc(20cm * var(--tw-space-x-reverse));
}
.space-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(calc(20% - 1cm) * var(--tw-space-x-reverse));
- margin-left: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-start: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-end: calc(calc(20% - 1cm) * var(--tw-space-x-reverse));
}
.space-y-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
@@ -475,13 +475,13 @@
}
.divide-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
- border-right-width: calc(20cm * var(--tw-divide-x-reverse));
- border-left-width: calc(20cm * calc(1 - var(--tw-divide-x-reverse)));
+ 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-right-width: calc(calc(20% - 1cm) * var(--tw-divide-x-reverse));
- border-left-width: calc(calc(20% - 1cm) * calc(1 - var(--tw-divide-x-reverse)));
+ 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;
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index 57686114d..183fcf57c 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -545,4 +545,70 @@ crosscheck(({ stable, oxide }) => {
`)
})
})
+
+ it('can use CSS variables as arbitrary values without `var()`', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .w-\[--width-var\] {
+ width: var(--width-var);
+ }
+ .bg-\[--color-var\,\#000\] {
+ background-color: var(--color-var, #000);
+ }
+ .bg-\[--color-var\] {
+ background-color: var(--color-var);
+ }
+ .bg-\[length\:--size-var\] {
+ background-size: var(--size-var);
+ }
+ .text-\[length\:--size-var\,12px\] {
+ font-size: var(--size-var, 12px);
+ }
+ `)
+ })
+ })
+
+ it('can use CSS variables as arbitrary modifiers without `var()`', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-red-500\/\[--opacity\] {
+ background-color: rgb(239 68 68 / var(--opacity));
+ }
+ .text-sm\/\[--line-height\] {
+ font-size: 0.875rem;
+ line-height: var(--line-height);
+ }
+ `)
+ })
+ })
})
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
index 9484dfdd6..5623fe79e 100644
--- a/tests/basic-usage.oxide.test.css
+++ b/tests/basic-usage.oxide.test.css
@@ -252,6 +252,12 @@
.table-fixed {
table-layout: fixed;
}
+.caption-top {
+ caption-side: top;
+}
+.caption-bottom {
+ caption-side: bottom;
+}
.border-collapse {
border-collapse: collapse;
}
@@ -470,8 +476,8 @@
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(1rem * var(--tw-space-x-reverse));
- margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-end: calc(1rem * var(--tw-space-x-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
@@ -486,13 +492,13 @@
}
.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
- border-right-width: calc(0px * var(--tw-divide-x-reverse));
- border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
+ 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-right-width: calc(2px * var(--tw-divide-x-reverse));
- border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
+ 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;
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 9484dfdd6..184ada947 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -252,6 +252,12 @@
.table-fixed {
table-layout: fixed;
}
+.caption-top {
+ caption-side: top;
+}
+.caption-bottom {
+ caption-side: bottom;
+}
.border-collapse {
border-collapse: collapse;
}
diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
index 9ec0e5917..4b39eb681 100644
--- a/tests/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -161,6 +161,8 @@ crosscheck(({ stable, oxide }) => {
+
+
diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js
index 82aa9b7da..5b41a7030 100644
--- a/tests/evaluateTailwindFunctions.test.js
+++ b/tests/evaluateTailwindFunctions.test.js
@@ -591,6 +591,72 @@ crosscheck(({ stable, oxide }) => {
})
})
+ test('font-family values are retrieved without font-variation-settings', () => {
+ let input = css`
+ .heading-1 {
+ font-family: theme('fontFamily.sans');
+ }
+ .heading-2 {
+ font-family: theme('fontFamily.serif');
+ }
+ .heading-3 {
+ font-family: theme('fontFamily.mono');
+ }
+ `
+
+ let output = css`
+ .heading-1 {
+ font-family: Inter;
+ }
+ .heading-2 {
+ font-family: Times, serif;
+ }
+ .heading-3 {
+ font-family: Menlo, monospace;
+ }
+ `
+
+ return run(input, {
+ theme: {
+ fontFamily: {
+ sans: ['Inter', { fontVariationSettings: '"opsz" 32' }],
+ serif: [['Times', 'serif'], { fontVariationSettings: '"opsz" 32' }],
+ mono: ['Menlo, monospace', { fontVariationSettings: '"opsz" 32' }],
+ },
+ },
+ }).then((result) => {
+ expect(result.css).toMatchCss(output)
+ expect(result.warnings().length).toBe(0)
+ })
+ })
+
+ test('font-variation-settings values can be retrieved', () => {
+ let input = css`
+ .heading {
+ font-family: theme('fontFamily.sans');
+ font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings');
+ }
+ `
+
+ let output = css`
+ .heading {
+ font-family: Inter;
+ font-variation-settings: 'opsz' 32;
+ }
+ `
+
+ return run(input, {
+ theme: {
+ fontFamily: {
+ sans: ['Inter', { fontVariationSettings: "'opsz' 32" }],
+ },
+ },
+ }).then((result) => {
+ expect(result.css).toMatchCss(output)
+ expect(result.warnings().length).toBe(0)
+ })
+ })
+
test('font-family values are joined when an array', () => {
let input = css`
.element {
diff --git a/tests/getClassList.test.js b/tests/getClassList.test.js
index 5fd9b00b0..671a767ec 100644
--- a/tests/getClassList.test.js
+++ b/tests/getClassList.test.js
@@ -88,6 +88,7 @@ crosscheck(() => {
let classes = context.getClassList({ includeMetadata: true })
expect(classes).not.toContain('bg-red-500')
+ expect(classes).not.toContain('text-2xl')
expect(classes).toContainEqual([
'bg-red-500',
@@ -111,6 +112,27 @@ crosscheck(() => {
],
},
])
+ expect(classes).toContainEqual([
+ 'text-2xl',
+ {
+ modifiers: [
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ 'none',
+ 'tight',
+ 'snug',
+ 'normal',
+ 'relaxed',
+ 'loose',
+ ],
+ },
+ ])
})
it('should generate plugin-defined utilities with modifier data when requested', () => {
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
index fbe4fc9df..976018cb0 100644
--- a/tests/kitchen-sink.test.js
+++ b/tests/kitchen-sink.test.js
@@ -13,7 +13,12 @@ crosscheck(() => {
>
-
+
+
+
+
+
+
@@ -204,7 +209,7 @@ crosscheck(() => {
@apply font-bold group-hover:font-normal;
}
.list {
- @apply space-x-4;
+ @apply space-y-4;
}
.nested {
.example {
@@ -319,9 +324,9 @@ crosscheck(() => {
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 {
font-weight: 700;
@@ -401,6 +406,29 @@ crosscheck(() => {
.foo .bg-black {
appearance: none;
}
+ .inset-6 {
+ inset: 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;
}
@@ -419,6 +447,41 @@ crosscheck(() => {
.grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,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: 0;
+ }
+ .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));
@@ -441,6 +504,19 @@ crosscheck(() => {
--tw-gradient-to: #bada5500;
--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/match-utilities.test.js b/tests/match-utilities.test.js
index 9f4d1df09..9b3cd4c56 100644
--- a/tests/match-utilities.test.js
+++ b/tests/match-utilities.test.js
@@ -6,8 +6,8 @@ crosscheck(() => {
content: [
{
raw: html``,
+ class="test test/foo test-1/foo test-2/foo test/[foo] test-1/[foo] test-[8]/[9]"
+ > `,
},
],
corePlugins: { preflight: false },
@@ -27,6 +27,7 @@ crosscheck(() => {
'1': 'one',
'2': 'two',
'1/foo': 'onefoo',
+ '[8]/[9]': 'eightnine',
},
modifiers: 'any',
}
@@ -54,6 +55,9 @@ crosscheck(() => {
.test-2\/foo {
color: two_foo;
}
+ .test-\[8\]\/\[9\] {
+ color: eightnine_null;
+ }
.test\/\[foo\] {
color: default_[foo];
}
diff --git a/tests/oxide.test.js b/tests/oxide.test.js
index ee7d68697..d2a697626 100644
--- a/tests/oxide.test.js
+++ b/tests/oxide.test.js
@@ -13,8 +13,8 @@ crosscheck(({ stable, oxide }) => {
${defaults}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(1rem * var(--tw-space-x-reverse));
- margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-end: calc(1rem * var(--tw-space-x-reverse));
}
`)
})
diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js
index fe63645db..314233bea 100644
--- a/tests/plugins/divide.test.js
+++ b/tests/plugins/divide.test.js
@@ -40,8 +40,8 @@ crosscheck(({ stable, oxide }) => {
${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)));
+ border-inline-end-width: calc(1px * var(--tw-divide-x-reverse));
+ border-inline-start-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
`)
})
diff --git a/tests/plugins/fontFamily.test.js b/tests/plugins/fontFamily.test.js
index fb025720a..1170dac8e 100644
--- a/tests/plugins/fontFamily.test.js
+++ b/tests/plugins/fontFamily.test.js
@@ -98,3 +98,43 @@ crosscheck(() => {
})
})
})
+
+test('font-variation-settings can be provided when families are defined as a string', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ fontFamily: {
+ sans: ['Inter, sans-serif', { fontVariationSettings: '"opsz" 32' }],
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(`
+ .font-sans {
+ font-family: Inter, sans-serif;
+ font-variation-settings: "opsz" 32;
+ }
+ `)
+ })
+})
+
+test('font-variation-settings can be provided when families are defined as an array', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ fontFamily: {
+ sans: [['Inter', 'sans-serif'], { fontVariationSettings: '"opsz" 32' }],
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(`
+ .font-sans {
+ font-family: Inter, sans-serif;
+ font-variation-settings: "opsz" 32;
+ }
+ `)
+ })
+})
diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js
index c3a1159eb..08e88bb76 100644
--- a/tests/plugins/fontSize.test.js
+++ b/tests/plugins/fontSize.test.js
@@ -120,4 +120,78 @@ crosscheck(() => {
`)
})
})
+
+ test('font-size utilities can include a line-height modifier', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ theme: {
+ fontSize: {
+ sm: ['12px', '20px'],
+ base: ['16px', '24px'],
+ },
+ lineHeight: {
+ 6: '24px',
+ 7: '28px',
+ 8: '32px',
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .text-\[13px\]\/6 {
+ font-size: 13px;
+ line-height: 24px;
+ }
+ .text-\[17px\]\/\[23px\] {
+ font-size: 17px;
+ line-height: 23px;
+ }
+ .text-sm {
+ font-size: 12px;
+ line-height: 20px;
+ }
+ .text-sm\/6 {
+ font-size: 12px;
+ line-height: 24px;
+ }
+ .text-sm\/\[21px\] {
+ font-size: 12px;
+ line-height: 21px;
+ }
+ @media (min-width: 768px) {
+ .md\:text-\[19px\]\/8 {
+ font-size: 19px;
+ line-height: 32px;
+ }
+ .md\:text-\[21px\]\/\[29px\] {
+ font-size: 21px;
+ line-height: 29px;
+ }
+ .md\:text-base {
+ font-size: 16px;
+ line-height: 24px;
+ }
+ .md\:text-base\/7 {
+ font-size: 16px;
+ line-height: 28px;
+ }
+ .md\:text-base\/\[33px\] {
+ font-size: 16px;
+ line-height: 33px;
+ }
+ }
+ `)
+ })
+ })
})
diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css
index 402f90a34..b4fa9b8cc 100644
--- a/tests/raw-content.oxide.test.css
+++ b/tests/raw-content.oxide.test.css
@@ -179,6 +179,12 @@
.table-fixed {
table-layout: fixed;
}
+.caption-top {
+ caption-side: top;
+}
+.caption-bottom {
+ caption-side: bottom;
+}
.border-collapse {
border-collapse: collapse;
}
@@ -323,8 +329,8 @@
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(1rem * var(--tw-space-x-reverse));
- margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-end: calc(1rem * var(--tw-space-x-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
@@ -339,13 +345,13 @@
}
.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
- border-right-width: calc(0px * var(--tw-divide-x-reverse));
- border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
+ 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-right-width: calc(2px * var(--tw-divide-x-reverse));
- border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
+ 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;
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
index 402f90a34..2867d4b2a 100644
--- a/tests/raw-content.test.css
+++ b/tests/raw-content.test.css
@@ -179,6 +179,12 @@
.table-fixed {
table-layout: fixed;
}
+.caption-top {
+ caption-side: top;
+}
+.caption-bottom {
+ caption-side: bottom;
+}
.border-collapse {
border-collapse: collapse;
}
diff --git a/tests/raw-content.test.js b/tests/raw-content.test.js
index 127a5d48a..417c37485 100644
--- a/tests/raw-content.test.js
+++ b/tests/raw-content.test.js
@@ -123,6 +123,8 @@ crosscheck(({ stable, oxide }) => {
+
+
diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js
index cb7d5f1af..4f6c522a1 100644
--- a/tests/source-maps.test.js
+++ b/tests/source-maps.test.js
@@ -98,293 +98,294 @@ crosscheck(({ stable, oxide }) => {
'2:6-20 -> 19:2-18',
'2:20 -> 20:0',
'2:6 -> 22:0',
- '2:20 -> 28:1',
- '2:6 -> 30:0',
- '2:6-20 -> 31:2-26',
- '2:6-20 -> 32:2-40',
- '2:6-20 -> 33:2-26',
- '2:6-20 -> 34:2-21',
- '2:6-20 -> 35:2-230',
- '2:6-20 -> 36:2-39',
- '2:20 -> 37:0',
- '2:6 -> 39:0',
- '2:20 -> 42:1',
- '2:6 -> 44:0',
- '2:6-20 -> 45:2-19',
- '2:6-20 -> 46:2-30',
- '2:20 -> 47:0',
- '2:6 -> 49:0',
- '2:20 -> 53:1',
- '2:6 -> 55:0',
- '2:6-20 -> 56:2-19',
- '2:6-20 -> 57:2-24',
- '2:6-20 -> 58:2-31',
- '2:20 -> 59:0',
- '2:6 -> 61:0',
- '2:20 -> 63:1',
- '2:6 -> 65:0',
- '2:6-20 -> 66:2-35',
- '2:20 -> 67:0',
- '2:6 -> 69:0',
- '2:20 -> 71:1',
- '2:6 -> 73:0',
- '2:6-20 -> 79:2-20',
- '2:6-20 -> 80:2-22',
- '2:20 -> 81:0',
- '2:6 -> 83:0',
- '2:20 -> 85:1',
- '2:6 -> 87:0',
- '2:6-20 -> 88:2-16',
- '2:6-20 -> 89:2-26',
- '2:20 -> 90:0',
- '2:6 -> 92:0',
- '2:20 -> 94:1',
- '2:6 -> 96:0',
- '2:6-20 -> 98:2-21',
- '2:20 -> 99:0',
- '2:6 -> 101:0',
- '2:20 -> 104:1',
- '2:6 -> 106:0',
- '2:6-20 -> 110:2-121',
- '2:6-20 -> 111:2-24',
- '2:20 -> 112:0',
- '2:6 -> 114:0',
- '2:20 -> 116:1',
- '2:6 -> 118:0',
- '2:6-20 -> 119:2-16',
- '2:20 -> 120:0',
- '2:6 -> 122:0',
- '2:20 -> 124:1',
- '2:6 -> 126:0',
- '2:6-20 -> 128:2-16',
- '2:6-20 -> 129:2-16',
- '2:6-20 -> 130:2-20',
- '2:6-20 -> 131:2-26',
- '2:20 -> 132:0',
- '2:6 -> 134:0',
- '2:6-20 -> 135:2-17',
- '2:20 -> 136:0',
- '2:6 -> 138:0',
- '2:6-20 -> 139:2-13',
- '2:20 -> 140:0',
- '2:6 -> 142:0',
- '2:20 -> 146:1',
- '2:6 -> 148:0',
- '2:6-20 -> 149:2-24',
- '2:6-20 -> 150:2-31',
- '2:6-20 -> 151:2-35',
- '2:20 -> 152:0',
- '2:6 -> 154:0',
- '2:20 -> 158:1',
- '2:6 -> 160:0',
- '2:6-20 -> 165:2-30',
- '2:6-20 -> 166:2-25',
+ '2:20 -> 29:1',
+ '2:6 -> 31:0',
+ '2:6-20 -> 32:2-26',
+ '2:6-20 -> 33:2-40',
+ '2:6-20 -> 34:2-26',
+ '2:6-20 -> 35:2-21',
+ '2:6-20 -> 36:2-230',
+ '2:6-20 -> 37:2-39',
+ '2:6-20 -> 38:2-41',
+ '2:20 -> 39:0',
+ '2:6 -> 41:0',
+ '2:20 -> 44:1',
+ '2:6 -> 46:0',
+ '2:6-20 -> 47:2-19',
+ '2:6-20 -> 48:2-30',
+ '2:20 -> 49:0',
+ '2:6 -> 51:0',
+ '2:20 -> 55:1',
+ '2:6 -> 57:0',
+ '2:6-20 -> 58:2-19',
+ '2:6-20 -> 59:2-24',
+ '2:6-20 -> 60:2-31',
+ '2:20 -> 61:0',
+ '2:6 -> 63:0',
+ '2:20 -> 65:1',
+ '2:6 -> 67:0',
+ '2:6-20 -> 68:2-35',
+ '2:20 -> 69:0',
+ '2:6 -> 71:0',
+ '2:20 -> 73:1',
+ '2:6 -> 75:0',
+ '2:6-20 -> 81:2-20',
+ '2:6-20 -> 82:2-22',
+ '2:20 -> 83:0',
+ '2:6 -> 85:0',
+ '2:20 -> 87:1',
+ '2:6 -> 89:0',
+ '2:6-20 -> 90:2-16',
+ '2:6-20 -> 91:2-26',
+ '2:20 -> 92:0',
+ '2:6 -> 94:0',
+ '2:20 -> 96:1',
+ '2:6 -> 98:0',
+ '2:6-20 -> 100:2-21',
+ '2:20 -> 101:0',
+ '2:6 -> 103:0',
+ '2:20 -> 106:1',
+ '2:6 -> 108:0',
+ '2:6-20 -> 112:2-121',
+ '2:6-20 -> 113:2-24',
+ '2:20 -> 114:0',
+ '2:6 -> 116:0',
+ '2:20 -> 118:1',
+ '2:6 -> 120:0',
+ '2:6-20 -> 121:2-16',
+ '2:20 -> 122:0',
+ '2:6 -> 124:0',
+ '2:20 -> 126:1',
+ '2:6 -> 128:0',
+ '2:6-20 -> 130:2-16',
+ '2:6-20 -> 131:2-16',
+ '2:6-20 -> 132:2-20',
+ '2:6-20 -> 133:2-26',
+ '2:20 -> 134:0',
+ '2:6 -> 136:0',
+ '2:6-20 -> 137:2-17',
+ '2:20 -> 138:0',
+ '2:6 -> 140:0',
+ '2:6-20 -> 141:2-13',
+ '2:20 -> 142:0',
+ '2:6 -> 144:0',
+ '2:20 -> 148:1',
+ '2:6 -> 150:0',
+ '2:6-20 -> 151:2-24',
+ '2:6-20 -> 152:2-31',
+ '2:6-20 -> 153:2-35',
+ '2:20 -> 154:0',
+ '2:6 -> 156:0',
+ '2:20 -> 160:1',
+ '2:6 -> 162:0',
'2:6-20 -> 167:2-30',
- '2:6-20 -> 168:2-30',
- '2:6-20 -> 169:2-24',
- '2:6-20 -> 170:2-19',
- '2:6-20 -> 171:2-20',
- '2:20 -> 172:0',
- '2:6 -> 174:0',
- '2:20 -> 176:1',
- '2:6 -> 178:0',
- '2:6-20 -> 180:2-22',
- '2:20 -> 181:0',
- '2:6 -> 183:0',
- '2:20 -> 186:1',
- '2:6 -> 188:0',
- '2:6-20 -> 192:2-36',
- '2:6-20 -> 193:2-39',
- '2:6-20 -> 194:2-32',
- '2:20 -> 195:0',
- '2:6 -> 197:0',
- '2:20 -> 199:1',
- '2:6 -> 201:0',
- '2:6-20 -> 202:2-15',
- '2:20 -> 203:0',
- '2:6 -> 205:0',
- '2:20 -> 207:1',
- '2:6 -> 209:0',
- '2:6-20 -> 210:2-18',
- '2:20 -> 211:0',
- '2:6 -> 213:0',
- '2:20 -> 215:1',
- '2:6 -> 217:0',
- '2:6-20 -> 218:2-26',
- '2:20 -> 219:0',
- '2:6 -> 221:0',
- '2:20 -> 223:1',
- '2:6 -> 225:0',
- '2:6-20 -> 227:2-14',
- '2:20 -> 228:0',
- '2:6 -> 230:0',
- '2:20 -> 233:1',
- '2:6 -> 235:0',
- '2:6-20 -> 236:2-39',
- '2:6-20 -> 237:2-30',
- '2:20 -> 238:0',
- '2:6 -> 240:0',
- '2:20 -> 242:1',
- '2:6 -> 244:0',
- '2:6-20 -> 245:2-26',
- '2:20 -> 246:0',
- '2:6 -> 248:0',
- '2:20 -> 251:1',
- '2:6 -> 253:0',
- '2:6-20 -> 254:2-36',
- '2:6-20 -> 255:2-23',
- '2:20 -> 256:0',
- '2:6 -> 258:0',
- '2:20 -> 260:1',
- '2:6 -> 262:0',
- '2:6-20 -> 263:2-20',
- '2:20 -> 264:0',
- '2:6 -> 266:0',
- '2:20 -> 268:1',
- '2:6 -> 270:0',
- '2:6-20 -> 283:2-11',
- '2:20 -> 284:0',
- '2:6 -> 286:0',
- '2:6-20 -> 287:2-11',
- '2:6-20 -> 288:2-12',
- '2:20 -> 289:0',
- '2:6 -> 291:0',
- '2:6-20 -> 292:2-12',
- '2:20 -> 293:0',
- '2:6 -> 295:0',
- '2:6-20 -> 298:2-18',
- '2:6-20 -> 299:2-11',
- '2:6-20 -> 300:2-12',
- '2:20 -> 301:0',
- '2:6 -> 303:0',
- '2:20 -> 305:1',
- '2:6 -> 307:0',
- '2:6-20 -> 308:2-18',
- '2:20 -> 309:0',
- '2:6 -> 311:0',
- '2:20 -> 314:1',
- '2:6 -> 316:0',
- '2:6-20 -> 318:2-20',
- '2:6-20 -> 319:2-24',
- '2:20 -> 320:0',
- '2:6 -> 322:0',
- '2:20 -> 324:1',
- '2:6 -> 326:0',
- '2:6-20 -> 328:2-17',
- '2:20 -> 329:0',
- '2:6 -> 331:0',
- '2:20 -> 333:1',
- '2:6 -> 334:0',
- '2:6-20 -> 335:2-17',
- '2:20 -> 336:0',
- '2:6 -> 338:0',
- '2:20 -> 342:1',
- '2:6 -> 344:0',
- '2:6-20 -> 352:2-24',
- '2:6-20 -> 353:2-32',
- '2:20 -> 354:0',
- '2:6 -> 356:0',
- '2:20 -> 358:1',
- '2:6 -> 360:0',
- '2:6-20 -> 362:2-17',
- '2:6-20 -> 363:2-14',
- '2:20 -> 364:0',
- '2:6-20 -> 366:0-72',
- '2:6 -> 367:0',
- '2:6-20 -> 368:2-15',
- '2:20 -> 369:0',
- '2:6 -> 371:0',
- '2:6-20 -> 372:2-26',
- '2:6-20 -> 373:2-26',
- '2:6-20 -> 374:2-21',
- '2:6-20 -> 375:2-21',
- '2:6-20 -> 376:2-16',
- '2:6-20 -> 377:2-16',
+ '2:6-20 -> 168:2-25',
+ '2:6-20 -> 169:2-30',
+ '2:6-20 -> 170:2-30',
+ '2:6-20 -> 171:2-24',
+ '2:6-20 -> 172:2-19',
+ '2:6-20 -> 173:2-20',
+ '2:20 -> 174:0',
+ '2:6 -> 176:0',
+ '2:20 -> 178:1',
+ '2:6 -> 180:0',
+ '2:6-20 -> 182:2-22',
+ '2:20 -> 183:0',
+ '2:6 -> 185:0',
+ '2:20 -> 188:1',
+ '2:6 -> 190:0',
+ '2:6-20 -> 194:2-36',
+ '2:6-20 -> 195:2-39',
+ '2:6-20 -> 196:2-32',
+ '2:20 -> 197:0',
+ '2:6 -> 199:0',
+ '2:20 -> 201:1',
+ '2:6 -> 203:0',
+ '2:6-20 -> 204:2-15',
+ '2:20 -> 205:0',
+ '2:6 -> 207:0',
+ '2:20 -> 209:1',
+ '2:6 -> 211:0',
+ '2:6-20 -> 212:2-18',
+ '2:20 -> 213:0',
+ '2:6 -> 215:0',
+ '2:20 -> 217:1',
+ '2:6 -> 219:0',
+ '2:6-20 -> 220:2-26',
+ '2:20 -> 221:0',
+ '2:6 -> 223:0',
+ '2:20 -> 225:1',
+ '2:6 -> 227:0',
+ '2:6-20 -> 229:2-14',
+ '2:20 -> 230:0',
+ '2:6 -> 232:0',
+ '2:20 -> 235:1',
+ '2:6 -> 237:0',
+ '2:6-20 -> 238:2-39',
+ '2:6-20 -> 239:2-30',
+ '2:20 -> 240:0',
+ '2:6 -> 242:0',
+ '2:20 -> 244:1',
+ '2:6 -> 246:0',
+ '2:6-20 -> 247:2-26',
+ '2:20 -> 248:0',
+ '2:6 -> 250:0',
+ '2:20 -> 253:1',
+ '2:6 -> 255:0',
+ '2:6-20 -> 256:2-36',
+ '2:6-20 -> 257:2-23',
+ '2:20 -> 258:0',
+ '2:6 -> 260:0',
+ '2:20 -> 262:1',
+ '2:6 -> 264:0',
+ '2:6-20 -> 265:2-20',
+ '2:20 -> 266:0',
+ '2:6 -> 268:0',
+ '2:20 -> 270:1',
+ '2:6 -> 272:0',
+ '2:6-20 -> 285:2-11',
+ '2:20 -> 286:0',
+ '2:6 -> 288:0',
+ '2:6-20 -> 289:2-11',
+ '2:6-20 -> 290:2-12',
+ '2:20 -> 291:0',
+ '2:6 -> 293:0',
+ '2:6-20 -> 294:2-12',
+ '2:20 -> 295:0',
+ '2:6 -> 297:0',
+ '2:6-20 -> 300:2-18',
+ '2:6-20 -> 301:2-11',
+ '2:6-20 -> 302:2-12',
+ '2:20 -> 303:0',
+ '2:6 -> 305:0',
+ '2:20 -> 307:1',
+ '2:6 -> 309:0',
+ '2:6-20 -> 310:2-18',
+ '2:20 -> 311:0',
+ '2:6 -> 313:0',
+ '2:20 -> 316:1',
+ '2:6 -> 318:0',
+ '2:6-20 -> 320:2-20',
+ '2:6-20 -> 321:2-24',
+ '2:20 -> 322:0',
+ '2:6 -> 324:0',
+ '2:20 -> 326:1',
+ '2:6 -> 328:0',
+ '2:6-20 -> 330:2-17',
+ '2:20 -> 331:0',
+ '2:6 -> 333:0',
+ '2:20 -> 335:1',
+ '2:6 -> 336:0',
+ '2:6-20 -> 337:2-17',
+ '2:20 -> 338:0',
+ '2:6 -> 340:0',
+ '2:20 -> 344:1',
+ '2:6 -> 346:0',
+ '2:6-20 -> 354:2-24',
+ '2:6-20 -> 355:2-32',
+ '2:20 -> 356:0',
+ '2:6 -> 358:0',
+ '2:20 -> 360:1',
+ '2:6 -> 362:0',
+ '2:6-20 -> 364:2-17',
+ '2:6-20 -> 365:2-14',
+ '2:20 -> 366:0',
+ '2:6-20 -> 368:0-72',
+ '2:6 -> 369:0',
+ '2:6-20 -> 370:2-15',
+ '2:20 -> 371:0',
+ '2:6 -> 373:0',
+ '2:6-20 -> 374:2-26',
+ '2:6-20 -> 375:2-26',
+ '2:6-20 -> 376:2-21',
+ '2:6-20 -> 377:2-21',
'2:6-20 -> 378:2-16',
- '2:6-20 -> 379:2-17',
- '2:6-20 -> 380:2-17',
- '2:6-20 -> 381:2-15',
- '2:6-20 -> 382:2-15',
- '2:6-20 -> 383:2-20',
- '2:6-20 -> 384:2-40',
- '2:6-20 -> 385:2-17',
- '2:6-20 -> 386:2-22',
- '2:6-20 -> 387:2-24',
- '2:6-20 -> 388:2-25',
- '2:6-20 -> 389:2-26',
- '2:6-20 -> 390:2-20',
- '2:6-20 -> 391:2-29',
- '2:6-20 -> 392:2-30',
- '2:6-20 -> 393:2-40',
- '2:6-20 -> 394:2-36',
- '2:6-20 -> 395:2-29',
- '2:6-20 -> 396:2-24',
- '2:6-20 -> 397:2-32',
- '2:6-20 -> 398:2-14',
- '2:6-20 -> 399:2-20',
- '2:6-20 -> 400:2-18',
- '2:6-20 -> 401:2-19',
- '2:6-20 -> 402:2-20',
- '2:6-20 -> 403:2-16',
- '2:6-20 -> 404:2-18',
- '2:6-20 -> 405:2-15',
- '2:6-20 -> 406:2-21',
- '2:6-20 -> 407:2-23',
- '2:6-20 -> 408:2-29',
- '2:6-20 -> 409:2-27',
- '2:6-20 -> 410:2-28',
- '2:6-20 -> 411:2-29',
- '2:6-20 -> 412:2-25',
- '2:6-20 -> 413:2-26',
- '2:6-20 -> 414:2-27',
- '2:6 -> 415:2',
- '2:20 -> 416:0',
- '2:6 -> 418:0',
- '2:6-20 -> 419:2-26',
- '2:6-20 -> 420:2-26',
- '2:6-20 -> 421:2-21',
- '2:6-20 -> 422:2-21',
- '2:6-20 -> 423:2-16',
- '2:6-20 -> 424:2-16',
+ '2:6-20 -> 379:2-16',
+ '2:6-20 -> 380:2-16',
+ '2:6-20 -> 381:2-17',
+ '2:6-20 -> 382:2-17',
+ '2:6-20 -> 383:2-15',
+ '2:6-20 -> 384:2-15',
+ '2:6-20 -> 385:2-20',
+ '2:6-20 -> 386:2-40',
+ '2:6-20 -> 387:2-17',
+ '2:6-20 -> 388:2-22',
+ '2:6-20 -> 389:2-24',
+ '2:6-20 -> 390:2-25',
+ '2:6-20 -> 391:2-26',
+ '2:6-20 -> 392:2-20',
+ '2:6-20 -> 393:2-29',
+ '2:6-20 -> 394:2-30',
+ '2:6-20 -> 395:2-40',
+ '2:6-20 -> 396:2-36',
+ '2:6-20 -> 397:2-29',
+ '2:6-20 -> 398:2-24',
+ '2:6-20 -> 399:2-32',
+ '2:6-20 -> 400:2-14',
+ '2:6-20 -> 401:2-20',
+ '2:6-20 -> 402:2-18',
+ '2:6-20 -> 403:2-19',
+ '2:6-20 -> 404:2-20',
+ '2:6-20 -> 405:2-16',
+ '2:6-20 -> 406:2-18',
+ '2:6-20 -> 407:2-15',
+ '2:6-20 -> 408:2-21',
+ '2:6-20 -> 409:2-23',
+ '2:6-20 -> 410:2-29',
+ '2:6-20 -> 411:2-27',
+ '2:6-20 -> 412:2-28',
+ '2:6-20 -> 413:2-29',
+ '2:6-20 -> 414:2-25',
+ '2:6-20 -> 415:2-26',
+ '2:6-20 -> 416:2-27',
+ '2:6 -> 417:2',
+ '2:20 -> 418:0',
+ '2:6 -> 420:0',
+ '2:6-20 -> 421:2-26',
+ '2:6-20 -> 422:2-26',
+ '2:6-20 -> 423:2-21',
+ '2:6-20 -> 424:2-21',
'2:6-20 -> 425:2-16',
- '2:6-20 -> 426:2-17',
- '2:6-20 -> 427:2-17',
- '2:6-20 -> 428:2-15',
- '2:6-20 -> 429:2-15',
- '2:6-20 -> 430:2-20',
- '2:6-20 -> 431:2-40',
- '2:6-20 -> 432:2-17',
- '2:6-20 -> 433:2-22',
- '2:6-20 -> 434:2-24',
- '2:6-20 -> 435:2-25',
- '2:6-20 -> 436:2-26',
- '2:6-20 -> 437:2-20',
- '2:6-20 -> 438:2-29',
- '2:6-20 -> 439:2-30',
- '2:6-20 -> 440:2-40',
- '2:6-20 -> 441:2-36',
- '2:6-20 -> 442:2-29',
- '2:6-20 -> 443:2-24',
- '2:6-20 -> 444:2-32',
- '2:6-20 -> 445:2-14',
- '2:6-20 -> 446:2-20',
- '2:6-20 -> 447:2-18',
- '2:6-20 -> 448:2-19',
- '2:6-20 -> 449:2-20',
- '2:6-20 -> 450:2-16',
- '2:6-20 -> 451:2-18',
- '2:6-20 -> 452:2-15',
- '2:6-20 -> 453:2-21',
- '2:6-20 -> 454:2-23',
- '2:6-20 -> 455:2-29',
- '2:6-20 -> 456:2-27',
- '2:6-20 -> 457:2-28',
- '2:6-20 -> 458:2-29',
- '2:6-20 -> 459:2-25',
- '2:6-20 -> 460:2-26',
- '2:6-20 -> 461:2-27',
- '2:6 -> 462:2',
- '2:20 -> 463:0',
+ '2:6-20 -> 426:2-16',
+ '2:6-20 -> 427:2-16',
+ '2:6-20 -> 428:2-17',
+ '2:6-20 -> 429:2-17',
+ '2:6-20 -> 430:2-15',
+ '2:6-20 -> 431:2-15',
+ '2:6-20 -> 432:2-20',
+ '2:6-20 -> 433:2-40',
+ '2:6-20 -> 434:2-17',
+ '2:6-20 -> 435:2-22',
+ '2:6-20 -> 436:2-24',
+ '2:6-20 -> 437:2-25',
+ '2:6-20 -> 438:2-26',
+ '2:6-20 -> 439:2-20',
+ '2:6-20 -> 440:2-29',
+ '2:6-20 -> 441:2-30',
+ '2:6-20 -> 442:2-40',
+ '2:6-20 -> 443:2-36',
+ '2:6-20 -> 444:2-29',
+ '2:6-20 -> 445:2-24',
+ '2:6-20 -> 446:2-32',
+ '2:6-20 -> 447:2-14',
+ '2:6-20 -> 448:2-20',
+ '2:6-20 -> 449:2-18',
+ '2:6-20 -> 450:2-19',
+ '2:6-20 -> 451:2-20',
+ '2:6-20 -> 452:2-16',
+ '2:6-20 -> 453:2-18',
+ '2:6-20 -> 454:2-15',
+ '2:6-20 -> 455:2-21',
+ '2:6-20 -> 456:2-23',
+ '2:6-20 -> 457:2-29',
+ '2:6-20 -> 458:2-27',
+ '2:6-20 -> 459:2-28',
+ '2:6-20 -> 460:2-29',
+ '2:6-20 -> 461:2-25',
+ '2:6-20 -> 462:2-26',
+ '2:6-20 -> 463:2-27',
+ '2:6 -> 464:2',
+ '2:20 -> 465:0',
])
})
diff --git a/tests/variants.oxide.test.css b/tests/variants.oxide.test.css
index 7d0120d12..a00e42f2f 100644
--- a/tests/variants.oxide.test.css
+++ b/tests/variants.oxide.test.css
@@ -237,8 +237,8 @@
}
.group[open]:hover .group-open\:group-hover\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-start: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+ margin-inline-end: calc(0.5rem * var(--tw-space-x-reverse));
}
.group:focus .group-focus\:shadow-md {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
diff --git a/types/config.d.ts b/types/config.d.ts
index 7b2a3eebc..81e3c342d 100644
--- a/types/config.d.ts
+++ b/types/config.d.ts
@@ -168,7 +168,13 @@ interface ThemeConfig {
string,
| string
| string[]
- | [fontFamily: string | string[], configuration: Partial<{ fontFeatureSettings: string }>]
+ | [
+ fontFamily: string | string[],
+ configuration: Partial<{
+ fontFeatureSettings: string
+ fontVariationSettings: string
+ }>
+ ]
>
>
fontSize: ResolvableTo<