tailwindcss 3.0.0-alpha.2 → 3.0.3

package/plugin.js

@@ -1 +1,2 @@
-module.exports = require('./lib/public/create-plugin').default
+let createPlugin = require('./lib/public/create-plugin')
+module.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default

package/resolveConfig.js

@@ -1 +1,2 @@
-module.exports = require('./lib/public/resolve-config').default
+let resolveConfig = require('./lib/public/resolve-config')
+module.exports = (resolveConfig.__esModule ? resolveConfig : { default: resolveConfig }).default

package/src/corePluginList.js

@@ -1 +1 @@
-export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","borderCollapse","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","appearance","columns","breakBefore","breakInside","breakAfter","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","whitespace","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","textDecorationColor","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","boxShadowColor","outlineStyle","outlineWidth","outlineOffset","outlineColor","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content"]
+export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","borderCollapse","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","appearance","columns","breakBefore","breakInside","breakAfter","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","whitespace","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","textDecorationColor","textDecorationStyle","textDecorationThickness","textUnderlineOffset","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","boxShadowColor","outlineStyle","outlineWidth","outlineOffset","outlineColor","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content"]

package/src/corePlugins.js

@@ -11,6 +11,7 @@ import isPlainObject from './util/isPlainObject'
 import transformThemeValue from './util/transformThemeValue'
 import { version as tailwindVersion } from '../package.json'
 import log from './util/log'
+import { normalizeScreens } from './util/normalizeScreens'
 import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
 
 export let variantPlugins = {
@@ -23,6 +24,8 @@ export let variantPlugins = {
 
     addVariant('file', '&::file-selector-button')
 
+    addVariant('placeholder', '&::placeholder')
+
     addVariant('before', ({ container }) => {
       container.walkRules((rule) => {
         let foundContent = false
@@ -156,13 +159,17 @@ export let variantPlugins = {
   },
 
   screenVariants: ({ theme, addVariant }) => {
-    for (let screen in theme('screens')) {
-      let size = theme('screens')[screen]
-      let query = buildMediaQuery(size)
+    for (let screen of normalizeScreens(theme('screens'))) {
+      let query = buildMediaQuery(screen)
 
-      addVariant(screen, `@media ${query}`)
+      addVariant(screen.name, `@media ${query}`)
     }
   },
+
+  orientationVariants: ({ addVariant }) => {
+    addVariant('portrait', '@media (orientation: portrait)')
+    addVariant('landscape', '@media (orientation: landscape)')
+  },
 }
 
 export let corePlugins = {
@@ -180,24 +187,10 @@ export let corePlugins = {
   },
 
   container: (() => {
-    function extractMinWidths(breakpoints) {
-      return Object.values(breakpoints ?? {}).flatMap((breakpoints) => {
-        if (typeof breakpoints === 'string') {
-          breakpoints = { min: breakpoints }
-        }
-
-        if (!Array.isArray(breakpoints)) {
-          breakpoints = [breakpoints]
-        }
-
-        return breakpoints
-          .filter((breakpoint) => {
-            return breakpoint?.hasOwnProperty?.('min') || breakpoint?.hasOwnProperty('min-width')
-          })
-          .map((breakpoint) => {
-            return breakpoint['min-width'] ?? breakpoint.min
-          })
-      })
+    function extractMinWidths(breakpoints = []) {
+      return breakpoints
+        .flatMap((breakpoint) => breakpoint.values.map((breakpoint) => breakpoint.min))
+        .filter((v) => v !== undefined)
     }
 
     function mapMinWidthsToPadding(minWidths, screens, paddings) {
@@ -226,16 +219,11 @@ export let corePlugins = {
       }
 
       for (let minWidth of minWidths) {
-        for (let [screen, value] of Object.entries(screens)) {
-          let screenMinWidth =
-            typeof value === 'object' && value !== null ? value.min || value['min-width'] : value
-
-          if (`${screenMinWidth}` === `${minWidth}`) {
-            mapping.push({
-              screen,
-              minWidth,
-              padding: paddings[screen],
-            })
+        for (let screen of screens) {
+          for (let { min } of screen.values) {
+            if (min === minWidth) {
+              mapping.push({ minWidth, padding: paddings[screen.name] })
+            }
           }
         }
       }
@@ -244,12 +232,12 @@ export let corePlugins = {
     }
 
     return function ({ addComponents, theme }) {
-      let screens = theme('container.screens', theme('screens'))
+      let screens = normalizeScreens(theme('container.screens', theme('screens')))
       let minWidths = extractMinWidths(screens)
       let paddings = mapMinWidthsToPadding(minWidths, screens, theme('container.padding'))
 
       let generatePaddingFor = (minWidth) => {
-        let paddingConfig = paddings.find((padding) => `${padding.minWidth}` === `${minWidth}`)
+        let paddingConfig = paddings.find((padding) => padding.minWidth === minWidth)
 
         if (!paddingConfig) {
           return {}
@@ -515,49 +503,52 @@ export let corePlugins = {
     ],
     { supportsNegativeValues: true }
   ),
-  scale: createUtilityPlugin('scale', [
-    [
-      'scale',
-      [
-        ['@defaults transform', {}],
-        '--tw-scale-x',
-        '--tw-scale-y',
-        ['transform', 'var(--tw-transform)'],
-      ],
-    ],
+  scale: createUtilityPlugin(
+    'scale',
     [
       [
-        'scale-x',
-        [['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']],
+        'scale',
+        [
+          ['@defaults transform', {}],
+          '--tw-scale-x',
+          '--tw-scale-y',
+          ['transform', 'var(--tw-transform)'],
+        ],
       ],
       [
-        'scale-y',
-        [['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']],
+        [
+          'scale-x',
+          [['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']],
+        ],
+        [
+          'scale-y',
+          [['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']],
+        ],
       ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
 
-  transform: ({ addBase, addUtilities }) => {
-    addBase({
-      '@defaults transform': {
-        '--tw-translate-x': '0',
-        '--tw-translate-y': '0',
-        '--tw-rotate': '0',
-        '--tw-skew-x': '0',
-        '--tw-skew-y': '0',
-        '--tw-scale-x': '1',
-        '--tw-scale-y': '1',
-        '--tw-transform': [
-          'translateX(var(--tw-translate-x))',
-          'translateY(var(--tw-translate-y))',
-          'rotate(var(--tw-rotate))',
-          'skewX(var(--tw-skew-x))',
-          'skewY(var(--tw-skew-y))',
-          'scaleX(var(--tw-scale-x))',
-          'scaleY(var(--tw-scale-y))',
-        ].join(' '),
-      },
+  transform: ({ addDefaults, addUtilities }) => {
+    addDefaults('transform', {
+      '--tw-translate-x': '0',
+      '--tw-translate-y': '0',
+      '--tw-rotate': '0',
+      '--tw-skew-x': '0',
+      '--tw-skew-y': '0',
+      '--tw-scale-x': '1',
+      '--tw-scale-y': '1',
+      '--tw-transform': [
+        'translateX(var(--tw-translate-x))',
+        'translateY(var(--tw-translate-y))',
+        'rotate(var(--tw-rotate))',
+        'skewX(var(--tw-skew-x))',
+        'skewY(var(--tw-skew-y))',
+        'scaleX(var(--tw-scale-x))',
+        'scaleY(var(--tw-scale-y))',
+      ].join(' '),
     })
+
     addUtilities({
       '.transform': { '@defaults transform': {}, transform: 'var(--tw-transform)' },
       '.transform-cpu': {
@@ -619,17 +610,52 @@ export let corePlugins = {
 
   cursor: createUtilityPlugin('cursor'),
 
-  touchAction: ({ addUtilities }) => {
+  touchAction: ({ addDefaults, addUtilities }) => {
+    addDefaults('touch-action', {
+      '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
+    })
+
     addUtilities({
       '.touch-auto': { 'touch-action': 'auto' },
       '.touch-none': { 'touch-action': 'none' },
-      '.touch-pan-x': { 'touch-action': 'pan-x' },
-      '.touch-pan-left': { 'touch-action': 'pan-left' },
-      '.touch-pan-right': { 'touch-action': 'pan-right' },
-      '.touch-pan-y': { 'touch-action': 'pan-y' },
-      '.touch-pan-up': { 'touch-action': 'pan-up' },
-      '.touch-pan-down': { 'touch-action': 'pan-down' },
-      '.touch-pinch-zoom': { 'touch-action': 'pinch-zoom' },
+      '.touch-pan-x': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-x',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-left': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-left',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-right': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-right',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-y': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-y',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-up': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-up',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-down': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-down',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pinch-zoom': {
+        '@defaults touch-action': {},
+        '--tw-pinch-zoom': 'pinch-zoom',
+        'touch-action': 'var(--tw-touch-action)',
+      },
       '.touch-manipulation': { 'touch-action': 'manipulation' },
     })
   },
@@ -652,11 +678,9 @@ export let corePlugins = {
     })
   },
 
-  scrollSnapType: ({ addUtilities, addBase }) => {
-    addBase({
-      '@defaults scroll-snap-type': {
-        '--tw-scroll-snap-strictness': 'proximity',
-      },
+  scrollSnapType: ({ addDefaults, addUtilities }) => {
+    addDefaults('scroll-snap-type', {
+      '--tw-scroll-snap-strictness': 'proximity',
     })
 
     addUtilities({
@@ -1153,22 +1177,21 @@ export let corePlugins = {
     })
   },
 
-  borderColor: ({ addBase, matchUtilities, theme, corePlugins }) => {
+  borderColor: ({ addDefaults, matchUtilities, theme, corePlugins }) => {
     if (!corePlugins('borderOpacity')) {
       let value = theme('borderColor.DEFAULT', 'currentColor')
-      addBase({
-        '@defaults border-width': {
-          'border-color': toColorValue(value),
-        },
+      addDefaults('border-width', {
+        'border-color': toColorValue(value),
       })
     } else {
-      addBase({
-        '@defaults border-width': withAlphaVariable({
+      addDefaults(
+        'border-width',
+        withAlphaVariable({
           color: theme('borderColor.DEFAULT', 'currentColor'),
           property: 'border-color',
           variable: '--tw-border-opacity',
-        }),
-      })
+        })
+      )
     }
 
     matchUtilities(
@@ -1371,8 +1394,10 @@ export let corePlugins = {
 
   boxDecorationBreak: ({ addUtilities }) => {
     addUtilities({
-      '.decoration-slice': { 'box-decoration-break': 'slice' },
-      '.decoration-clone': { 'box-decoration-break': 'clone' },
+      '.decoration-slice': { 'box-decoration-break': 'slice' }, // Deprecated
+      '.decoration-clone': { 'box-decoration-break': 'clone' }, // Deprecated
+      '.box-decoration-slice': { 'box-decoration-break': 'slice' },
+      '.box-decoration-clone': { 'box-decoration-break': 'clone' },
     })
   },
 
@@ -1629,9 +1654,10 @@ export let corePlugins = {
 
   textDecoration: ({ addUtilities }) => {
     addUtilities({
-      '.underline': { 'text-decoration': 'underline' },
-      '.line-through': { 'text-decoration': 'line-through' },
-      '.no-underline': { 'text-decoration': 'none' },
+      '.underline': { 'text-decoration-line': 'underline' },
+      '.overline': { 'text-decoration-line': 'overline' },
+      '.line-through': { 'text-decoration-line': 'line-through' },
+      '.no-underline': { 'text-decoration-line': 'none' },
     })
   },
 
@@ -1642,10 +1668,32 @@ export let corePlugins = {
           return { 'text-decoration-color': toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
+      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color'] }
     )
   },
 
+  textDecorationStyle: ({ addUtilities }) => {
+    addUtilities({
+      '.decoration-solid': { 'text-decoration-style': 'solid' },
+      '.decoration-double': { 'text-decoration-style': 'double' },
+      '.decoration-dotted': { 'text-decoration-style': 'dotted' },
+      '.decoration-dashed': { 'text-decoration-style': 'dashed' },
+      '.decoration-wavy': { 'text-decoration-style': 'wavy' },
+    })
+  },
+
+  textDecorationThickness: createUtilityPlugin(
+    'textDecorationThickness',
+    [['decoration', ['text-decoration-thickness']]],
+    { type: ['length', 'percentage'] }
+  ),
+
+  textUnderlineOffset: createUtilityPlugin(
+    'textUnderlineOffset',
+    [['underline-offset', ['text-underline-offset']]],
+    { type: ['length', 'percentage'] }
+  ),
+
   fontSmoothing: ({ addUtilities }) => {
     addUtilities({
       '.antialiased': {
@@ -1769,14 +1817,12 @@ export let corePlugins = {
       `var(--tw-shadow)`,
     ].join(', ')
 
-    return function ({ matchUtilities, addBase, theme }) {
-      addBase({
-        '@defaults box-shadow': {
-          '--tw-ring-offset-shadow': '0 0 #0000',
-          '--tw-ring-shadow': '0 0 #0000',
-          '--tw-shadow': '0 0 #0000',
-          '--tw-shadow-colored': '0 0 #0000',
-        },
+    return function ({ matchUtilities, addDefaults, theme }) {
+      addDefaults(' box-shadow', {
+        '--tw-ring-offset-shadow': '0 0 #0000',
+        '--tw-ring-shadow': '0 0 #0000',
+        '--tw-shadow': '0 0 #0000',
+        '--tw-shadow-colored': '0 0 #0000',
       })
 
       matchUtilities(
@@ -1854,7 +1900,7 @@ export let corePlugins = {
     )
   },
 
-  ringWidth: ({ matchUtilities, addBase, addUtilities, theme }) => {
+  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
     let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
     let ringColorDefault = withAlphaValue(
       theme('ringColor.DEFAULT'),
@@ -1862,17 +1908,15 @@ export let corePlugins = {
       `rgb(147 197 253 / ${ringOpacityDefault})`
     )
 
-    addBase({
-      '@defaults ring-width': {
-        '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
-        '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
-        '--tw-ring-color': ringColorDefault,
-        '--tw-ring-offset-shadow': '0 0 #0000',
-        '--tw-ring-shadow': '0 0 #0000',
-        '--tw-shadow': '0 0 #0000',
-        '--tw-shadow-colored': '0 0 #0000',
-      },
+    addDefaults('ring-width', {
+      '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
+      '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
+      '--tw-ring-color': ringColorDefault,
+      '--tw-ring-offset-shadow': '0 0 #0000',
+      '--tw-ring-shadow': '0 0 #0000',
+      '--tw-shadow': '0 0 #0000',
+      '--tw-shadow-colored': '0 0 #0000',
     })
 
     matchUtilities(
@@ -2079,30 +2123,28 @@ export let corePlugins = {
     )
   },
 
-  filter: ({ addBase, addUtilities }) => {
-    addBase({
-      '@defaults filter': {
-        '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-filter': [
-          'var(--tw-blur)',
-          'var(--tw-brightness)',
-          'var(--tw-contrast)',
-          'var(--tw-grayscale)',
-          'var(--tw-hue-rotate)',
-          'var(--tw-invert)',
-          'var(--tw-saturate)',
-          'var(--tw-sepia)',
-          'var(--tw-drop-shadow)',
-        ].join(' '),
-      },
+  filter: ({ addDefaults, addUtilities }) => {
+    addDefaults('filter', {
+      '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-filter': [
+        'var(--tw-blur)',
+        'var(--tw-brightness)',
+        'var(--tw-contrast)',
+        'var(--tw-grayscale)',
+        'var(--tw-hue-rotate)',
+        'var(--tw-invert)',
+        'var(--tw-saturate)',
+        'var(--tw-sepia)',
+        'var(--tw-drop-shadow)',
+      ].join(' '),
     })
     addUtilities({
       '.filter': { '@defaults filter': {}, filter: 'var(--tw-filter)' },
@@ -2245,30 +2287,28 @@ export let corePlugins = {
     )
   },
 
-  backdropFilter: ({ addBase, addUtilities }) => {
-    addBase({
-      '@defaults backdrop-filter': {
-        '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-filter': [
-          'var(--tw-backdrop-blur)',
-          'var(--tw-backdrop-brightness)',
-          'var(--tw-backdrop-contrast)',
-          'var(--tw-backdrop-grayscale)',
-          'var(--tw-backdrop-hue-rotate)',
-          'var(--tw-backdrop-invert)',
-          'var(--tw-backdrop-opacity)',
-          'var(--tw-backdrop-saturate)',
-          'var(--tw-backdrop-sepia)',
-        ].join(' '),
-      },
+  backdropFilter: ({ addDefaults, addUtilities }) => {
+    addDefaults('backdrop-filter', {
+      '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-filter': [
+        'var(--tw-backdrop-blur)',
+        'var(--tw-backdrop-brightness)',
+        'var(--tw-backdrop-contrast)',
+        'var(--tw-backdrop-grayscale)',
+        'var(--tw-backdrop-hue-rotate)',
+        'var(--tw-backdrop-invert)',
+        'var(--tw-backdrop-opacity)',
+        'var(--tw-backdrop-saturate)',
+        'var(--tw-backdrop-sepia)',
+      ].join(' '),
     })
     addUtilities({
       '.backdrop-filter': {

package/src/css/preflight.css

@@ -144,7 +144,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -288,7 +288,9 @@ legend {
 }
 
 ol,
-ul {
+ul,
+li,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -309,7 +311,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 

package/src/featureFlags.js

@@ -2,7 +2,11 @@ import chalk from 'chalk'
 import log from './util/log'
 
 let defaults = {
-  optimizeUniversalDefaults: true,
+  // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being
+  // the default.
+  optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false,
+
+  // optimizeUniversalDefaults: true
 }
 
 let featureFlags = {

package/src/lib/detectNesting.js

@@ -2,6 +2,23 @@ export default function (_context) {
   return (root, result) => {
     let found = false
 
+    root.walkAtRules('tailwind', (node) => {
+      if (found) return false
+
+      if (node.parent && node.parent.type !== 'root') {
+        found = true
+        node.warn(
+          result,
+          [
+            'Nested @tailwind rules were detected, but are not supported.',
+            "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
+            'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy',
+          ].join('\n')
+        )
+        return false
+      }
+    })
+
     root.walkRules((rule) => {
       if (found) return false
 
@@ -9,10 +26,12 @@ export default function (_context) {
         found = true
         nestedRule.warn(
           result,
-          // TODO: Improve this warning message
-          'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting'
+          [
+            'Nested CSS was detected, but CSS nesting has not been configured correctly.',
+            'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
+            'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting',
+          ].join('\n')
         )
-
         return false
       })
     })