tailwindcss 3.0.24 → 3.1.2

package/plugin.d.ts

@@ -0,0 +1,11 @@
+import type { Config, PluginCreator } from './types/config'
+type Plugin = {
+  withOptions<T>(
+    plugin: (options: T) => PluginCreator,
+    config?: (options: T) => Config
+  ): { (options: T): { handler: PluginCreator; config?: Config }; __isOptionsFunction: true }
+  (plugin: PluginCreator, config?: Config): { handler: PluginCreator; config?: Config }
+}
+
+declare const plugin: Plugin
+export = plugin

package/src/cli-peer-dependencies.js

@@ -1,4 +1,10 @@
-export let postcss = require('postcss')
+export function lazyPostcss() {
+  return require('postcss')
+}
+
+export function lazyPostcssImport() {
+  return require('postcss-import')
+}
 
 export function lazyAutoprefixer() {
   return require('autoprefixer')

package/src/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { postcss, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
+import { lazyPostcss, lazyPostcssImport, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
 
 import chokidar from 'chokidar'
 import path from 'path'
@@ -9,6 +9,7 @@ import fs from 'fs'
 import postcssrc from 'postcss-load-config'
 import { lilconfig } from 'lilconfig'
 import loadPlugins from 'postcss-load-config/src/plugins' // Little bit scary, looking at private/internal API
+import loadOptions from 'postcss-load-config/src/options' // Little bit scary, looking at private/internal API
 import tailwind from './processTailwindFeatures'
 import resolveConfigInternal from '../resolveConfig'
 import fastGlob from 'fast-glob'
@@ -16,11 +17,33 @@ import getModuleDependencies from './lib/getModuleDependencies'
 import log from './util/log'
 import packageJson from '../package.json'
 import normalizePath from 'normalize-path'
+import { validateConfig } from './util/validateConfig.js'
 
 let env = {
   DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0',
 }
 
+function isESM() {
+  const pkgPath = path.resolve('./package.json')
+
+  try {
+    let pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
+    return pkg.type && pkg.type === 'module'
+  } catch (err) {
+    return false
+  }
+}
+
+let configs = isESM()
+  ? {
+      tailwind: 'tailwind.config.cjs',
+      postcss: 'postcss.config.cjs',
+    }
+  : {
+      tailwind: 'tailwind.config.js',
+      postcss: 'postcss.config.js',
+    }
+
 // ---
 
 function indentRecursive(node, indent = 0) {
@@ -145,16 +168,21 @@ function oneOf(...options) {
   )
 }
 
+function loadPostcss() {
+  // Try to load a local `postcss` version first
+  try {
+    return require('postcss')
+  } catch {}
+
+  return lazyPostcss()
+}
+
 let commands = {
   init: {
     run: init,
     args: {
-      '--full': { type: Boolean, description: 'Initialize a full `tailwind.config.js` file' },
-      '--postcss': { type: Boolean, description: 'Initialize a `postcss.config.js` file' },
-      '--types': {
-        type: Boolean,
-        description: 'Add TypeScript types for the `tailwind.config.js` file',
-      },
+      '--full': { type: Boolean, description: `Initialize a full \`${configs.tailwind}\` file` },
+      '--postcss': { type: Boolean, description: `Initialize a \`${configs.postcss}\` file` },
       '-f': '--full',
       '-p': '--postcss',
     },
@@ -165,12 +193,10 @@ let commands = {
       '--input': { type: String, description: 'Input file' },
       '--output': { type: String, description: 'Output file' },
       '--watch': { type: Boolean, description: 'Watch for changes and rebuild as needed' },
-      /*
       '--poll': {
         type: Boolean,
         description: 'Use polling instead of filesystem events when watching',
       },
-      */
       '--content': {
         type: String,
         description: 'Content paths to use for removing unused classes',
@@ -197,9 +223,7 @@ let commands = {
       '-o': '--output',
       '-m': '--minify',
       '-w': '--watch',
-      /*
       '-p': '--poll',
-      */
     },
   },
 }
@@ -217,7 +241,7 @@ if (
   help({
     usage: [
       'tailwindcss [--input input.css] [--output output.css] [--watch] [options...]',
-      'tailwindcss init [--full] [--postcss] [--types] [options...]',
+      'tailwindcss init [--full] [--postcss] [options...]',
     ],
     commands: Object.keys(commands)
       .filter((command) => command !== 'build')
@@ -333,7 +357,7 @@ run()
 function init() {
   let messages = []
 
-  let tailwindConfigLocation = path.resolve(args['_'][1] ?? './tailwind.config.js')
+  let tailwindConfigLocation = path.resolve(args['_'][1] ?? `./${configs.tailwind}`)
   if (fs.existsSync(tailwindConfigLocation)) {
     messages.push(`${path.basename(tailwindConfigLocation)} already exists.`)
   } else {
@@ -344,13 +368,6 @@ function init() {
       'utf8'
     )
 
-    if (args['--types']) {
-      let typesHeading = "/** @type {import('tailwindcss/types').Config} */"
-      stubFile =
-        stubFile.replace(`module.exports = `, `${typesHeading}\nconst config = `) +
-        '\nmodule.exports = config'
-    }
-
     // Change colors import
     stubFile = stubFile.replace('../colors', 'tailwindcss/colors')
 
@@ -360,7 +377,7 @@ function init() {
   }
 
   if (args['--postcss']) {
-    let postcssConfigLocation = path.resolve('./postcss.config.js')
+    let postcssConfigLocation = path.resolve(`./${configs.postcss}`)
     if (fs.existsSync(postcssConfigLocation)) {
       messages.push(`${path.basename(postcssConfigLocation)} already exists.`)
     } else {
@@ -387,10 +404,7 @@ async function build() {
   let input = args['--input']
   let output = args['--output']
   let shouldWatch = args['--watch']
-  let shouldPoll = false
-  /*
   let shouldPoll = args['--poll']
-  */
   let shouldCoalesceWriteEvents = shouldPoll || process.platform === 'win32'
   let includePostCss = args['--postcss']
 
@@ -417,12 +431,12 @@ async function build() {
   let configPath = args['--config']
     ? args['--config']
     : ((defaultPath) => (fs.existsSync(defaultPath) ? defaultPath : null))(
-        path.resolve('./tailwind.config.js')
+        path.resolve(`./${configs.tailwind}`)
       )
 
   async function loadPostCssPlugins() {
     let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined
-    let { plugins: configPlugins } = customPostCssPath
+    let config = customPostCssPath
       ? await (async () => {
           let file = path.resolve(customPostCssPath)
 
@@ -438,10 +452,16 @@ async function build() {
             config.plugins = []
           }
 
-          return { plugins: loadPlugins(config, file) }
+          return {
+            file,
+            plugins: loadPlugins(config, file),
+            options: loadOptions(config, file),
+          }
         })()
       : await postcssrc()
 
+    let configPlugins = config.plugins
+
     let configPluginTailwindIdx = configPlugins.findIndex((plugin) => {
       if (typeof plugin === 'function' && plugin.name === 'tailwindcss') {
         return true
@@ -461,7 +481,46 @@ async function build() {
         ? configPlugins
         : configPlugins.slice(configPluginTailwindIdx + 1)
 
-    return [beforePlugins, afterPlugins]
+    return [beforePlugins, afterPlugins, config.options]
+  }
+
+  function loadBuiltinPostcssPlugins() {
+    let postcss = loadPostcss()
+    let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: '
+    return [
+      [
+        (root) => {
+          root.walkAtRules('import', (rule) => {
+            if (rule.params.slice(1).startsWith('tailwindcss/')) {
+              rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params }))
+              rule.remove()
+            }
+          })
+        },
+        (() => {
+          try {
+            return require('postcss-import')
+          } catch {}
+
+          return lazyPostcssImport()
+        })(),
+        (root) => {
+          root.walkComments((rule) => {
+            if (rule.text.startsWith(IMPORT_COMMENT)) {
+              rule.after(
+                postcss.atRule({
+                  name: 'import',
+                  params: rule.text.replace(IMPORT_COMMENT, ''),
+                })
+              )
+              rule.remove()
+            }
+          })
+        },
+      ],
+      [],
+      {},
+    ]
   }
 
   function resolveConfig() {
@@ -481,10 +540,13 @@ async function build() {
       let files = args['--content'].split(/(?<!{[^}]+),/)
       let resolvedConfig = resolveConfigInternal(config, { content: { files } })
       resolvedConfig.content.files = files
+      resolvedConfig = validateConfig(resolvedConfig)
       return resolvedConfig
     }
 
-    return resolveConfigInternal(config)
+    let resolvedConfig = resolveConfigInternal(config)
+    resolvedConfig = validateConfig(resolvedConfig)
+    return resolvedConfig
   }
 
   function extractFileGlobs(config) {
@@ -545,7 +607,9 @@ async function build() {
 
     tailwindPlugin.postcss = true
 
-    let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []]
+    let [beforePlugins, afterPlugins, postcssOptions] = includePostCss
+      ? await loadPostCssPlugins()
+      : loadBuiltinPostcssPlugins()
 
     let plugins = [
       ...beforePlugins,
@@ -574,13 +638,14 @@ async function build() {
         })(),
     ].filter(Boolean)
 
+    let postcss = loadPostcss()
     let processor = postcss(plugins)
 
     function processCSS(css) {
       let start = process.hrtime.bigint()
       return Promise.resolve()
         .then(() => (output ? fs.promises.mkdir(path.dirname(output), { recursive: true }) : null))
-        .then(() => processor.process(css, { from: input, to: output }))
+        .then(() => processor.process(css, { ...postcssOptions, from: input, to: output }))
         .then((result) => {
           if (!output) {
             return process.stdout.write(result.css)
@@ -644,7 +709,9 @@ async function build() {
       return resolveConfig()
     }
 
-    let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []]
+    let [beforePlugins, afterPlugins] = includePostCss
+      ? await loadPostCssPlugins()
+      : loadBuiltinPostcssPlugins()
 
     let plugins = [
       ...beforePlugins,
@@ -707,6 +774,7 @@ async function build() {
       let tailwindPluginIdx = plugins.indexOf('__TAILWIND_PLUGIN_POSITION__')
       let copy = plugins.slice()
       copy.splice(tailwindPluginIdx, 1, tailwindPlugin)
+      let postcss = loadPostcss()
       let processor = postcss(copy)
 
       function processCSS(css) {
@@ -836,8 +904,10 @@ async function build() {
 
   if (shouldWatch) {
     /* Abort the watcher if stdin is closed to avoid zombie processes */
-    process.stdin.on('end', () => process.exit(0))
-    process.stdin.resume()
+    if (process.stdin.isTTY) {
+      process.stdin.on('end', () => process.exit(0))
+      process.stdin.resume()
+    }
     startWatcher()
   } else {
     buildOnce()

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","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"]
+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","borderSpacing","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

@@ -14,6 +14,7 @@ import { version as tailwindVersion } from '../package.json'
 import log from './util/log'
 import { normalizeScreens } from './util/normalizeScreens'
 import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
+import { flagEnabled } from './featureFlags'
 
 export let variantPlugins = {
   pseudoElementVariants: ({ addVariant }) => {
@@ -27,9 +28,7 @@ export let variantPlugins = {
 
     addVariant('placeholder', '&::placeholder')
 
-    /*
     addVariant('backdrop', '&::backdrop')
-    */
 
     addVariant('before', ({ container }) => {
       container.walkRules((rule) => {
@@ -62,14 +61,14 @@ export let variantPlugins = {
     })
   },
 
-  pseudoClassVariants: ({ addVariant }) => {
+  pseudoClassVariants: ({ addVariant, config }) => {
     let pseudoVariants = [
       // Positional
-      ['first', ':first-child'],
-      ['last', ':last-child'],
-      ['only', ':only-child'],
-      ['odd', ':nth-child(odd)'],
-      ['even', ':nth-child(even)'],
+      ['first', '&:first-child'],
+      ['last', '&:last-child'],
+      ['only', '&:only-child'],
+      ['odd', '&:nth-child(odd)'],
+      ['even', '&:nth-child(even)'],
       'first-of-type',
       'last-of-type',
       'only-of-type',
@@ -94,11 +93,11 @@ export let variantPlugins = {
             }
           })
 
-          return ':visited'
+          return '&:visited'
         },
       ],
       'target',
-      ['open', '[open]'],
+      ['open', '&[open]'],
 
       // Forms
       'default',
@@ -106,6 +105,7 @@ export let variantPlugins = {
       'indeterminate',
       'placeholder-shown',
       'autofill',
+      'optional',
       'required',
       'valid',
       'invalid',
@@ -118,21 +118,24 @@ export let variantPlugins = {
 
       // Interactive
       'focus-within',
-      'hover',
+      [
+        'hover',
+        !flagEnabled(config(), 'hoverOnlyWhenSupported')
+          ? '&:hover'
+          : '@media (hover: hover) and (pointer: fine) { &:hover }',
+      ],
       'focus',
       'focus-visible',
       'active',
-      /*
       'enabled',
-      */
       'disabled',
-    ].map((variant) => (Array.isArray(variant) ? variant : [variant, `:${variant}`]))
+    ].map((variant) => (Array.isArray(variant) ? variant : [variant, `&:${variant}`]))
 
     for (let [variantName, state] of pseudoVariants) {
       addVariant(variantName, (ctx) => {
         let result = typeof state === 'function' ? state(ctx) : state
 
-        return `&${result}`
+        return result
       })
     }
 
@@ -140,7 +143,7 @@ export let variantPlugins = {
       addVariant(`group-${variantName}`, (ctx) => {
         let result = typeof state === 'function' ? state(ctx) : state
 
-        return `:merge(.group)${result} &`
+        return result.replace(/&(\S+)/, ':merge(.group)$1 &')
       })
     }
 
@@ -148,7 +151,7 @@ export let variantPlugins = {
       addVariant(`peer-${variantName}`, (ctx) => {
         let result = typeof state === 'function' ? state(ctx) : state
 
-        return `:merge(.peer)${result} ~ &`
+        return result.replace(/&(\S+)/, ':merge(.peer)$1 ~ &')
       })
     }
   },
@@ -179,7 +182,7 @@ export let variantPlugins = {
   },
 
   darkVariants: ({ config, addVariant }) => {
-    let [mode] = [].concat(config('darkMode', 'media'))
+    let [mode, className = '.dark'] = [].concat(config('darkMode', 'media'))
 
     if (mode === false) {
       mode = 'media'
@@ -191,10 +194,7 @@ export let variantPlugins = {
     }
 
     if (mode === 'class') {
-      addVariant('dark', `.dark &`)
-      /*
       addVariant('dark', `${className} &`)
-      */
     } else if (mode === 'media') {
       addVariant('dark', '@media (prefers-color-scheme: dark)')
     }
@@ -216,6 +216,11 @@ export let variantPlugins = {
     addVariant('portrait', '@media (orientation: portrait)')
     addVariant('landscape', '@media (orientation: landscape)')
   },
+
+  prefersContrastVariants: ({ addVariant }) => {
+    addVariant('contrast-more', '@media (prefers-contrast: more)')
+    addVariant('contrast-less', '@media (prefers-contrast: less)')
+  },
 }
 
 let cssTransformValue = [
@@ -539,7 +544,6 @@ export let corePlugins = {
     })
   },
 
-  /*
   borderSpacing: ({ addDefaults, matchUtilities, theme }) => {
     addDefaults('border-spacing', {
       '--tw-border-spacing-x': 0,
@@ -574,7 +578,6 @@ export let corePlugins = {
       { values: theme('borderSpacing') }
     )
   },
-  */
 
   transformOrigin: createUtilityPlugin('transformOrigin', [['origin', ['transformOrigin']]]),
   translate: createUtilityPlugin(
@@ -893,6 +896,7 @@ export let corePlugins = {
     addUtilities({
       '.grid-flow-row': { gridAutoFlow: 'row' },
       '.grid-flow-col': { gridAutoFlow: 'column' },
+      '.grid-flow-dense': { gridAutoFlow: 'dense' },
       '.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
       '.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
     })
@@ -1433,7 +1437,8 @@ export let corePlugins = {
 
             return {
               '--tw-gradient-from': toColorValue(value, 'from'),
-              '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
+              '--tw-gradient-to': transparentToValue,
+              '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
             }
           },
         },
@@ -1445,10 +1450,11 @@ export let corePlugins = {
             let transparentToValue = transparentTo(value)
 
             return {
+              '--tw-gradient-to': transparentToValue,
               '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
                 value,
                 'via'
-              )}, var(--tw-gradient-to, ${transparentToValue})`,
+              )}, var(--tw-gradient-to)`,
             }
           },
         },
@@ -1571,10 +1577,8 @@ export let corePlugins = {
       '.text-center': { 'text-align': 'center' },
       '.text-right': { 'text-align': 'right' },
       '.text-justify': { 'text-align': 'justify' },
-      /*
       '.text-start': { 'text-align': 'start' },
       '.text-end': { 'text-align': 'end' },
-      */
     })
   },
 
@@ -1881,6 +1885,7 @@ export let corePlugins = {
       '.mix-blend-saturation': { 'mix-blend-mode': 'saturation' },
       '.mix-blend-color': { 'mix-blend-mode': 'color' },
       '.mix-blend-luminosity': { 'mix-blend-mode': 'luminosity' },
+      '.mix-blend-plus-lighter': { 'mix-blend-mode': 'plus-lighter' },
     })
   },
 
@@ -1975,16 +1980,24 @@ export let corePlugins = {
     )
   },
 
-  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
-    let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
-    let ringColorDefault = withAlphaValue(
-      /*
-      theme('ringColor')?.DEFAULT,
-      */
-      theme('ringColor.DEFAULT'),
-      ringOpacityDefault,
-      `rgb(147 197 253 / ${ringOpacityDefault})`
-    )
+  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme, config }) => {
+    let ringColorDefault = (() => {
+      if (flagEnabled(config(), 'respectDefaultRingColorOpacity')) {
+        return theme('ringColor.DEFAULT')
+      }
+
+      let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
+
+      if (!theme('ringColor')?.DEFAULT) {
+        return `rgb(147 197 253 / ${ringOpacityDefault})`
+      }
+
+      return withAlphaValue(
+        theme('ringColor')?.DEFAULT,
+        ringOpacityDefault,
+        `rgb(147 197 253 / ${ringOpacityDefault})`
+      )
+    })()
 
     addDefaults('ring-width', {
       '--tw-ring-inset': ' ',
@@ -2048,9 +2061,13 @@ export let corePlugins = {
     )
   },
 
-  ringOpacity: createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
-    filterDefault: true,
-  }),
+  ringOpacity: (helpers) => {
+    let { config } = helpers
+
+    return createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
+      filterDefault: !flagEnabled(config(), 'respectDefaultRingColorOpacity'),
+    })(helpers)
+  },
   ringOffsetWidth: createUtilityPlugin(
     'ringOffsetWidth',
     [['ring-offset', ['--tw-ring-offset-width']]],

package/src/css/preflight.css

@@ -160,6 +160,7 @@ select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
@@ -357,11 +358,3 @@ video {
   max-width: 100%;
   height: auto;
 }
-
-/*
-Ensure the default browser behavior of the `hidden` attribute.
-*/
-
-[hidden] {
-  display: none;
-}

package/src/featureFlags.js

@@ -6,8 +6,8 @@ let defaults = {
 }
 
 let featureFlags = {
-  future: [],
-  experimental: ['optimizeUniversalDefaults'],
+  future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
+  experimental: ['optimizeUniversalDefaults', 'matchVariant' /* , 'variantGrouping' */],
 }
 
 export function flagEnabled(config, flag) {

package/src/index.js

@@ -15,7 +15,6 @@ module.exports = function tailwindcss(configOrPath) {
       function (root, result) {
         let context = setupTrackingContext(configOrPath)
 
-        /*
         if (root.type === 'document') {
           let roots = root.nodes.filter((node) => node.type === 'root')
 
@@ -27,7 +26,6 @@ module.exports = function tailwindcss(configOrPath) {
 
           return
         }
-        */
 
         processTailwindFeatures(context)(root, result)
       },

package/src/lib/collapseAdjacentRules.js

@@ -29,7 +29,11 @@ export default function collapseAdjacentRules() {
             (currentRule[property] ?? '').replace(/\s+/g, ' ')
         )
       ) {
-        currentRule.append(node.nodes)
+        // An AtRule may not have children (for example if we encounter duplicate @import url(…) rules)
+        if (node.nodes) {
+          currentRule.append(node.nodes)
+        }
+
         node.remove()
       } else {
         currentRule = node