tailwindcss 0.0.0-insiders.4b2482f → 0.0.0-insiders.4bc9ca7

package/CHANGELOG.md

@@ -7,15 +7,101 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Allow use of falsy values in theme config ([#6917](https://github.com/tailwindlabs/tailwindcss/pull/6917))
+- Ensure we can apply classes that are grouped with non-class selectors ([#6922](https://github.com/tailwindlabs/tailwindcss/pull/6922))
+- Improve standalone CLI compatibility on Linux by switching to the `linuxstatic` build target ([#6914](https://github.com/tailwindlabs/tailwindcss/pull/6914))
+- Ensure `@apply` works consistently with or without `@layer` ([#6938](https://github.com/tailwindlabs/tailwindcss/pull/6938))
+
+## [3.0.11] - 2022-01-05
+
+### Fixed
+
+- Preserve casing of CSS variables added by plugins ([#6888](https://github.com/tailwindlabs/tailwindcss/pull/6888))
+- Ignore content paths that are passed in but don't actually exist ([#6901](https://github.com/tailwindlabs/tailwindcss/pull/6901))
+- Revert change that applies Tailwind's defaults in isolated environments like CSS modules ([9fdc391](https://github.com/tailwindlabs/tailwindcss/commit/9fdc391d4ff93e7e350f5ce439060176b1f0162f))
+
+## [3.0.10] - 2022-01-04
+
+### Fixed
+
+- Fix `@apply` in files without `@tailwind` directives ([#6580](https://github.com/tailwindlabs/tailwindcss/pull/6580), [#6875](https://github.com/tailwindlabs/tailwindcss/pull/6875))
+- CLI: avoid unnecessary writes to output files ([#6550](https://github.com/tailwindlabs/tailwindcss/pull/6550))
+
+### Added
+
+- Allow piping data into the CLI ([#6876](https://github.com/tailwindlabs/tailwindcss/pull/6876))
+
+## [3.0.9] - 2022-01-03
+
+### Fixed
+
+- Improve `DEBUG` flag ([#6797](https://github.com/tailwindlabs/tailwindcss/pull/6797), [#6804](https://github.com/tailwindlabs/tailwindcss/pull/6804))
+- Ensure we can use `<` and `>` characters in modifiers ([#6851](https://github.com/tailwindlabs/tailwindcss/pull/6851))
+- Validate `theme()` works in arbitrary values ([#6852](https://github.com/tailwindlabs/tailwindcss/pull/6852))
+- Properly detect `theme()` value usage in arbitrary properties ([#6854](https://github.com/tailwindlabs/tailwindcss/pull/6854))
+- Improve collapsing of duplicate declarations ([#6856](https://github.com/tailwindlabs/tailwindcss/pull/6856))
+- Remove support for `TAILWIND_MODE=watch` ([#6858](https://github.com/tailwindlabs/tailwindcss/pull/6858))
+
+## [3.0.8] - 2021-12-28
+
+### Fixed
+
+- Reduce specificity of `abbr` rule in preflight ([#6671](https://github.com/tailwindlabs/tailwindcss/pull/6671))
+- Support HSL with hue units in arbitrary values ([#6726](https://github.com/tailwindlabs/tailwindcss/pull/6726))
+- Add `node16-linux-arm64` target for standalone CLI ([#6693](https://github.com/tailwindlabs/tailwindcss/pull/6693))
+
+## [3.0.7] - 2021-12-17
+
+### Fixed
+
+- Don't mutate custom color palette when overriding per-plugin colors ([#6546](https://github.com/tailwindlabs/tailwindcss/pull/6546))
+- Improve circular dependency detection when using `@apply` ([#6588](https://github.com/tailwindlabs/tailwindcss/pull/6588))
+- Only generate variants for non-`user` layers ([#6589](https://github.com/tailwindlabs/tailwindcss/pull/6589))
+- Properly extract classes with arbitrary values in arrays and classes followed by escaped quotes ([#6590](https://github.com/tailwindlabs/tailwindcss/pull/6590))
+- Improve jsx interpolation candidate matching ([#6593](https://github.com/tailwindlabs/tailwindcss/pull/6593))
+- Ensure `@apply` of a rule inside an AtRule works ([#6594](https://github.com/tailwindlabs/tailwindcss/pull/6594))
+
+## [3.0.6] - 2021-12-16
+
+### Fixed
+
+- Support square bracket notation in paths ([#6519](https://github.com/tailwindlabs/tailwindcss/pull/6519))
+- Ensure all plugins are executed for a given candidate ([#6540](https://github.com/tailwindlabs/tailwindcss/pull/6540))
+
+## [3.0.5] - 2021-12-15
+
+### Fixed
+
+- Revert: add `li` to list-style reset ([9777562d](https://github.com/tailwindlabs/tailwindcss/commit/9777562da37ee631bbf77374c0d14825f09ef9af))
+
+## [3.0.4] - 2021-12-15
+
+### Fixed
+
+- Insert always-on defaults layer in correct spot ([#6526](https://github.com/tailwindlabs/tailwindcss/pull/6526))
+
+## [3.0.3] - 2021-12-15
+
 ### Added
 
 - Warn about invalid globs in `content` ([#6449](https://github.com/tailwindlabs/tailwindcss/pull/6449))
+- Add standalone tailwindcss CLI ([#6506](https://github.com/tailwindlabs/tailwindcss/pull/6506))
+- Add `li` to list-style reset ([00f60e6](https://github.com/tailwindlabs/tailwindcss/commit/00f60e61013c6e4e3419e4b699371a13eb30b75d))
+
+### Fixed
+
+- Don't output unparsable values ([#6469](https://github.com/tailwindlabs/tailwindcss/pull/6469))
+- Fix text decoration utilities from overriding the new text decoration color/style/thickness utilities when used with a modifier ([#6378](https://github.com/tailwindlabs/tailwindcss/pull/6378))
+- Move defaults to their own always-on layer ([#6500](https://github.com/tailwindlabs/tailwindcss/pull/6500))
+- Support negative values in safelist patterns ([#6480](https://github.com/tailwindlabs/tailwindcss/pull/6480))
 
 ## [3.0.2] - 2021-12-13
 
 ### Fixed
 
-- Temporarily disable optimize univeral defaults ([#6461](https://github.com/tailwindlabs/tailwindcss/pull/6461))
+- Temporarily disable optimize universal defaults, fixes issue with transforms/filters/rings not being `@apply`-able in CSS modules/Svelte components/Vue components ([#6461](https://github.com/tailwindlabs/tailwindcss/pull/6461))
 
 ## [3.0.1] - 2021-12-10
 
@@ -1698,7 +1784,16 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.2...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.11...HEAD
+[3.0.11]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.10...v3.0.11
+[3.0.10]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.9...v3.0.10
+[3.0.9]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.8...v3.0.9
+[3.0.8]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.7...v3.0.8
+[3.0.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...v3.0.7
+[3.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.5...v3.0.6
+[3.0.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.4...v3.0.5
+[3.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.3...v3.0.4
+[3.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.2...v3.0.3
 [3.0.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.1...v3.0.2
 [3.0.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0...v3.0.1
 [3.0.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.2...v3.0.0

package/README.md

@@ -1,10 +1,14 @@
 <p>
-    <a href="https://tailwindcss.com/" target="_blank">
-      <img alt="Tailwind CSS" width="350" src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo-sticker.svg">
-    </a><br>
-    A utility-first CSS framework for rapidly building custom user interfaces.
+  <a href="https://tailwindcss.com/#gh-light-mode-only" target="_blank">
+    <img src="./.github/logo-light.svg" alt="Tailwind CSS" width="350" height="70">
+  </a>
+  <a href="https://tailwindcss.com/#gh-dark-mode-only" target="_blank">
+    <img src="./.github/logo-dark.svg" alt="Tailwind CSS" width="350" height="70">
+  </a>
 </p>
 
+A utility-first CSS framework for rapidly building custom user interfaces.
+
 <p>
     <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/workflow/status/tailwindlabs/tailwindcss/Node.js%20CI" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>

package/lib/cli.js

@@ -40,6 +40,25 @@ function formatNodes(root) {
         root.first.raws.before = '';
     }
 }
+async function outputFile(file, contents) {
+    if (_fs.default.existsSync(file) && await _fs.default.promises.readFile(file, 'utf8') === contents) {
+        return; // Skip writing the file
+    }
+    // Write the file
+    await _fs.default.promises.writeFile(file, contents, 'utf8');
+}
+function drainStdin() {
+    return new Promise((resolve, reject)=>{
+        let result = '';
+        process.stdin.on('data', (chunk)=>{
+            result += chunk;
+        });
+        process.stdin.on('end', ()=>resolve(result)
+        );
+        process.stdin.on('error', (err)=>reject(err)
+        );
+    });
+}
 function help({ message , usage , commands: commands1 , options  }) {
     let indent = 2;
     // Render header
@@ -336,7 +355,7 @@ async function build() {
         console.error('[deprecation] Running tailwindcss without -i, please provide an input file.');
         input = args['--input'] = args['_'][1];
     }
-    if (input && !_fs.default.existsSync(input = _path.default.resolve(input))) {
+    if (input && input !== '-' && !_fs.default.existsSync(input = _path.default.resolve(input))) {
         console.error(`Specified input file ${args['--input']} does not exist.`);
         process.exit(9);
     }
@@ -499,10 +518,8 @@ async function build() {
                     return process.stdout.write(result.css);
                 }
                 return Promise.all([
-                    _fs.default.promises.writeFile(output, result.css, ()=>true
-                    ),
-                    result.map && _fs.default.writeFile(output + '.map', result.map.toString(), ()=>true
-                    ), 
+                    outputFile(output, result.css),
+                    result.map && outputFile(output + '.map', result.map.toString()), 
                 ].filter(Boolean));
             }).then(()=>{
                 let end = process.hrtime.bigint();
@@ -510,7 +527,18 @@ async function build() {
                 console.error('Done in', (end - start) / BigInt(1000000) + 'ms.');
             });
         }
-        let css1 = input ? _fs.default.readFileSync(_path.default.resolve(input), 'utf8') : '@tailwind base; @tailwind components; @tailwind utilities';
+        let css1 = await (()=>{
+            // Piping in data, let's drain the stdin
+            if (input === '-') {
+                return drainStdin();
+            }
+            // Input file has been provided
+            if (input) {
+                return _fs.default.readFileSync(_path.default.resolve(input), 'utf8');
+            }
+            // No input file provided, fallback to default atrules
+            return '@tailwind base; @tailwind components; @tailwind utilities';
+        })();
         return processCSS(css1);
     }
     let context = null;
@@ -619,11 +647,9 @@ async function build() {
                     if (!output) {
                         return process.stdout.write(result.css);
                     }
-                    await Promise.all([
-                        _fs.default.promises.writeFile(output, result.css, ()=>true
-                        ),
-                        result.map && _fs.default.writeFile(output + '.map', result.map.toString(), ()=>true
-                        ), 
+                    return Promise.all([
+                        outputFile(output, result.css),
+                        result.map && outputFile(output + '.map', result.map.toString()), 
                     ].filter(Boolean));
                 }).then(()=>{
                     let end = process.hrtime.bigint();
@@ -636,7 +662,18 @@ async function build() {
                     }
                 });
             }
-            let css2 = input ? _fs.default.readFileSync(_path.default.resolve(input), 'utf8') : '@tailwind base; @tailwind components; @tailwind utilities';
+            let css2 = await (()=>{
+                // Piping in data, let's drain the stdin
+                if (input === '-') {
+                    return drainStdin();
+                }
+                // Input file has been provided
+                if (input) {
+                    return _fs.default.readFileSync(_path.default.resolve(input), 'utf8');
+                }
+                // No input file provided, fallback to default atrules
+                return '@tailwind base; @tailwind components; @tailwind utilities';
+            })();
             let result1 = await processCSS(css2);
             env.DEBUG && console.timeEnd('Finished in');
             return result1;

package/lib/corePlugins.js

@@ -914,26 +914,24 @@ let corePlugins = {
     ], {
         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': {
@@ -1001,14 +999,12 @@ let corePlugins = {
         });
     },
     cursor: (0, _createUtilityPlugin).default('cursor'),
-    touchAction: ({ addBase , addUtilities  })=>{
-        addBase({
-            '@defaults 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)'
-            }
+    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': {
@@ -1096,11 +1092,9 @@ 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({
             '.snap-none': {
@@ -2095,22 +2089,18 @@ let corePlugins = {
             }
         });
     },
-    borderColor: ({ addBase , matchUtilities , theme , corePlugins: corePlugins2  })=>{
+    borderColor: ({ addDefaults , matchUtilities , theme , corePlugins: corePlugins2  })=>{
         if (!corePlugins2('borderOpacity')) {
             let value = theme('borderColor.DEFAULT', 'currentColor');
-            addBase({
-                '@defaults border-width': {
-                    'border-color': (0, _toColorValue).default(value)
-                }
+            addDefaults('border-width', {
+                'border-color': (0, _toColorValue).default(value)
             });
         } else {
-            addBase({
-                '@defaults border-width': (0, _withAlphaVariable).default({
-                    color: theme('borderColor.DEFAULT', 'currentColor'),
-                    property: 'border-color',
-                    variable: '--tw-border-opacity'
-                })
-            });
+            addDefaults('border-width', (0, _withAlphaVariable).default({
+                color: theme('borderColor.DEFAULT', 'currentColor'),
+                property: 'border-color',
+                variable: '--tw-border-opacity'
+            }));
         }
         matchUtilities({
             border: (value)=>{
@@ -2792,16 +2782,16 @@ let corePlugins = {
     textDecoration: ({ addUtilities  })=>{
         addUtilities({
             '.underline': {
-                'text-decoration': 'underline'
+                'text-decoration-line': 'underline'
             },
             '.overline': {
-                'text-decoration': 'overline'
+                'text-decoration-line': 'overline'
             },
             '.line-through': {
-                'text-decoration': 'line-through'
+                'text-decoration-line': 'line-through'
             },
             '.no-underline': {
-                'text-decoration': 'none'
+                'text-decoration-line': 'none'
             }
         });
     },
@@ -3064,14 +3054,12 @@ let corePlugins = {
             `var(--tw-ring-shadow, 0 0 #0000)`,
             `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({
                 shadow: (value)=>{
@@ -3180,20 +3168,18 @@ let corePlugins = {
             ]
         });
     },
-    ringWidth: ({ matchUtilities , addBase , addUtilities , theme  })=>{
+    ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme  })=>{
         let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5');
         let ringColorDefault = (0, _withAlphaVariable).withAlphaValue(theme('ringColor.DEFAULT'), ringOpacityDefault, `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({
             ring: (value)=>{
@@ -3396,30 +3382,28 @@ let corePlugins = {
             values: theme('sepia')
         });
     },
-    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': {
@@ -3559,30 +3543,28 @@ let corePlugins = {
             values: theme('backdropSepia')
         });
     },
-    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/lib/css/preflight.css

@@ -58,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 
@@ -144,7 +144,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -310,7 +310,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 

package/lib/index.js

@@ -1,6 +1,5 @@
 "use strict";
 var _setupTrackingContext = _interopRequireDefault(require("./lib/setupTrackingContext"));
-var _setupWatchingContext = _interopRequireDefault(require("./lib/setupWatchingContext"));
 var _processTailwindFeatures = _interopRequireDefault(require("./processTailwindFeatures"));
 var _sharedState = require("./lib/sharedState");
 function _interopRequireDefault(obj) {
@@ -18,8 +17,7 @@ module.exports = function tailwindcss(configOrPath) {
                 return root;
             },
             function(root, result) {
-                let setupContext = _sharedState.env.TAILWIND_MODE === 'watch' ? (0, _setupWatchingContext).default(configOrPath) : (0, _setupTrackingContext).default(configOrPath);
-                (0, _processTailwindFeatures).default(setupContext)(root, result);
+                (0, _processTailwindFeatures).default((0, _setupTrackingContext).default(configOrPath))(root, result);
             },
             _sharedState.env.DEBUG && function(root) {
                 console.timeEnd('JIT TOTAL');