tailwindcss 3.0.2 → 3.0.3

package/peers/index.js

@@ -52842,44 +52842,48 @@ var require_walker = __commonJS({
 var require_package = __commonJS({
   "node_modules/css-tree/package.json"(exports2, module2) {
     module2.exports = {
-      name: "css-tree",
-      version: "1.1.3",
-      description: "A tool set for CSS: fast detailed parser (CSS \u2192 AST), walker (AST traversal), generator (AST \u2192 CSS) and lexer (validation and matching) based on specs and browser implementations",
-      author: "Roman Dvornov <rdvornov@gmail.com> (https://github.com/lahmatiy)",
-      license: "MIT",
-      repository: "csstree/csstree",
-      keywords: [
-        "css",
-        "ast",
-        "tokenizer",
-        "parser",
-        "walker",
-        "lexer",
-        "generator",
-        "utils",
-        "syntax",
-        "validation"
+      _args: [
+        [
+          "css-tree@1.1.3",
+          "/home/runner/work/tailwindcss/tailwindcss"
+        ]
       ],
-      main: "lib/index.js",
-      unpkg: "dist/csstree.min.js",
-      jsdelivr: "dist/csstree.min.js",
-      scripts: {
-        build: "rollup --config",
-        lint: "eslint data lib scripts test && node scripts/review-syntax-patch --lint && node scripts/update-docs --lint",
-        "lint-and-test": "npm run lint && npm test",
-        "update:docs": "node scripts/update-docs",
-        "review:syntax-patch": "node scripts/review-syntax-patch",
-        test: "mocha --reporter progress",
-        coverage: "nyc npm test",
-        travis: "nyc npm run lint-and-test && npm run coveralls",
-        coveralls: "nyc report --reporter=text-lcov | coveralls",
-        prepublishOnly: "npm run build",
-        hydrogen: "node --trace-hydrogen --trace-phase=Z --trace-deopt --code-comments --hydrogen-track-positions --redirect-code-traces --redirect-code-traces-to=code.asm --trace_hydrogen_file=code.cfg --print-opt-code bin/parse --stat -o /dev/null"
+      _from: "css-tree@1.1.3",
+      _id: "css-tree@1.1.3",
+      _inBundle: false,
+      _integrity: "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      _location: "/css-tree",
+      _phantomChildren: {},
+      _requested: {
+        type: "version",
+        registry: true,
+        raw: "css-tree@1.1.3",
+        name: "css-tree",
+        escapedName: "css-tree",
+        rawSpec: "1.1.3",
+        saveSpec: null,
+        fetchSpec: "1.1.3"
+      },
+      _requiredBy: [
+        "/csso",
+        "/svgo"
+      ],
+      _resolved: "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      _spec: "1.1.3",
+      _where: "/home/runner/work/tailwindcss/tailwindcss",
+      author: {
+        name: "Roman Dvornov",
+        email: "rdvornov@gmail.com",
+        url: "https://github.com/lahmatiy"
+      },
+      bugs: {
+        url: "https://github.com/csstree/csstree/issues"
       },
       dependencies: {
         "mdn-data": "2.0.14",
         "source-map": "^0.6.1"
       },
+      description: "A tool set for CSS: fast detailed parser (CSS \u2192 AST), walker (AST traversal), generator (AST \u2192 CSS) and lexer (validation and matching) based on specs and browser implementations",
       devDependencies: {
         "@rollup/plugin-commonjs": "^11.0.2",
         "@rollup/plugin-json": "^4.0.2",
@@ -52899,7 +52903,43 @@ var require_package = __commonJS({
         "data",
         "dist",
         "lib"
-      ]
+      ],
+      homepage: "https://github.com/csstree/csstree#readme",
+      jsdelivr: "dist/csstree.min.js",
+      keywords: [
+        "css",
+        "ast",
+        "tokenizer",
+        "parser",
+        "walker",
+        "lexer",
+        "generator",
+        "utils",
+        "syntax",
+        "validation"
+      ],
+      license: "MIT",
+      main: "lib/index.js",
+      name: "css-tree",
+      repository: {
+        type: "git",
+        url: "git+https://github.com/csstree/csstree.git"
+      },
+      scripts: {
+        build: "rollup --config",
+        coverage: "nyc npm test",
+        coveralls: "nyc report --reporter=text-lcov | coveralls",
+        hydrogen: "node --trace-hydrogen --trace-phase=Z --trace-deopt --code-comments --hydrogen-track-positions --redirect-code-traces --redirect-code-traces-to=code.asm --trace_hydrogen_file=code.cfg --print-opt-code bin/parse --stat -o /dev/null",
+        lint: "eslint data lib scripts test && node scripts/review-syntax-patch --lint && node scripts/update-docs --lint",
+        "lint-and-test": "npm run lint && npm test",
+        prepublishOnly: "npm run build",
+        "review:syntax-patch": "node scripts/review-syntax-patch",
+        test: "mocha --reporter progress",
+        travis: "nyc npm run lint-and-test && npm run coveralls",
+        "update:docs": "node scripts/update-docs"
+      },
+      unpkg: "dist/csstree.min.js",
+      version: "1.1.3"
     };
   }
 });
@@ -56477,50 +56517,49 @@ var require_compress = __commonJS({
 var require_package2 = __commonJS({
   "node_modules/csso/package.json"(exports2, module2) {
     module2.exports = {
-      name: "csso",
-      version: "4.2.0",
-      description: "CSS minifier with structural optimisations",
-      homepage: "https://github.com/css/csso",
-      author: "Sergey Kryzhanovsky <skryzhanovsky@ya.ru> (https://github.com/afelix)",
-      maintainers: [
-        {
-          name: "Roman Dvornov",
-          email: "rdvornov@gmail.com",
-          "github-username": "lahmatiy"
-        }
+      _args: [
+        [
+          "csso@4.2.0",
+          "/home/runner/work/tailwindcss/tailwindcss"
+        ]
       ],
-      license: "MIT",
-      repository: "css/csso",
+      _from: "csso@4.2.0",
+      _id: "csso@4.2.0",
+      _inBundle: false,
+      _integrity: "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      _location: "/csso",
+      _phantomChildren: {},
+      _requested: {
+        type: "version",
+        registry: true,
+        raw: "csso@4.2.0",
+        name: "csso",
+        escapedName: "csso",
+        rawSpec: "4.2.0",
+        saveSpec: null,
+        fetchSpec: "4.2.0"
+      },
+      _requiredBy: [
+        "/svgo"
+      ],
+      _resolved: "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      _spec: "4.2.0",
+      _where: "/home/runner/work/tailwindcss/tailwindcss",
+      author: {
+        name: "Sergey Kryzhanovsky",
+        email: "skryzhanovsky@ya.ru",
+        url: "https://github.com/afelix"
+      },
+      browser: {
+        "css-tree": "css-tree/dist/csstree.min.js"
+      },
       bugs: {
         url: "https://github.com/css/csso/issues"
       },
-      keywords: [
-        "css",
-        "compress",
-        "minifier",
-        "minify",
-        "optimise",
-        "optimisation",
-        "csstree"
-      ],
-      main: "./lib/index",
-      scripts: {
-        test: "mocha --reporter dot",
-        lint: "eslint lib test",
-        "lint-and-test": "npm run lint && npm test",
-        build: "rollup --config && terser dist/csso.js --compress --mangle -o dist/csso.min.js",
-        coverage: "nyc npm test",
-        coveralls: "nyc report --reporter=text-lcov | coveralls",
-        travis: "nyc npm run lint-and-test && npm run coveralls",
-        hydrogen: "node --trace-hydrogen --trace-phase=Z --trace-deopt --code-comments --hydrogen-track-positions --redirect-code-traces --redirect-code-traces-to=code.asm --trace_hydrogen_file=code.cfg --print-opt-code bin/csso --stat -o /dev/null",
-        prepublishOnly: "npm run build"
-      },
       dependencies: {
         "css-tree": "^1.1.2"
       },
-      browser: {
-        "css-tree": "css-tree/dist/csstree.min.js"
-      },
+      description: "CSS minifier with structural optimisations",
       devDependencies: {
         "@rollup/plugin-commonjs": "^11.0.1",
         "@rollup/plugin-json": "^4.0.1",
@@ -56539,7 +56578,42 @@ var require_package2 = __commonJS({
       files: [
         "dist",
         "lib"
-      ]
+      ],
+      homepage: "https://github.com/css/csso",
+      keywords: [
+        "css",
+        "compress",
+        "minifier",
+        "minify",
+        "optimise",
+        "optimisation",
+        "csstree"
+      ],
+      license: "MIT",
+      main: "./lib/index",
+      maintainers: [
+        {
+          name: "Roman Dvornov",
+          email: "rdvornov@gmail.com"
+        }
+      ],
+      name: "csso",
+      repository: {
+        type: "git",
+        url: "git+https://github.com/css/csso.git"
+      },
+      scripts: {
+        build: "rollup --config && terser dist/csso.js --compress --mangle -o dist/csso.min.js",
+        coverage: "nyc npm test",
+        coveralls: "nyc report --reporter=text-lcov | coveralls",
+        hydrogen: "node --trace-hydrogen --trace-phase=Z --trace-deopt --code-comments --hydrogen-track-positions --redirect-code-traces --redirect-code-traces-to=code.asm --trace_hydrogen_file=code.cfg --print-opt-code bin/csso --stat -o /dev/null",
+        lint: "eslint lib test",
+        "lint-and-test": "npm run lint && npm test",
+        prepublishOnly: "npm run build",
+        test: "mocha --reporter dot",
+        travis: "nyc npm run lint-and-test && npm run coveralls"
+      },
+      version: "4.2.0"
     };
   }
 });

package/src/corePlugins.js

@@ -529,27 +529,26 @@ export 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': { '@defaults transform': {}, transform: 'var(--tw-transform)' },
       '.transform-cpu': {
@@ -611,14 +610,12 @@ export let corePlugins = {
 
   cursor: createUtilityPlugin('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({
@@ -681,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({
@@ -1182,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(
@@ -1660,10 +1654,10 @@ export let corePlugins = {
 
   textDecoration: ({ addUtilities }) => {
     addUtilities({
-      '.underline': { 'text-decoration': 'underline' },
-      '.overline': { 'text-decoration': 'overline' },
-      '.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' },
     })
   },
 
@@ -1823,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(
@@ -1908,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'),
@@ -1916,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(
@@ -2133,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)' },
@@ -2299,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 */
 }
 
 /*
@@ -289,6 +289,7 @@ legend {
 
 ol,
 ul,
+li,
 menu {
   list-style: none;
   margin: 0;
@@ -310,7 +311,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 

package/src/lib/expandTailwindAtRules.js

@@ -99,6 +99,7 @@ function buildStylesheet(rules, context) {
 
   let returnValue = {
     base: new Set(),
+    defaults: new Set(),
     components: new Set(),
     utilities: new Set(),
     variants: new Set(),
@@ -125,6 +126,11 @@ function buildStylesheet(rules, context) {
       continue
     }
 
+    if (sort & context.layerOrder.defaults) {
+      returnValue.defaults.add(rule)
+      continue
+    }
+
     if (sort & context.layerOrder.components) {
       returnValue.components.add(rule)
       continue
@@ -144,6 +150,8 @@ function buildStylesheet(rules, context) {
   return returnValue
 }
 
+export const DEFAULTS_LAYER = Symbol('defaults-layer')
+
 export default function expandTailwindAtRules(context) {
   return (root) => {
     let layerNodes = {
@@ -202,6 +210,7 @@ export default function expandTailwindAtRules(context) {
     env.DEBUG && console.timeEnd('Build stylesheet')
 
     let {
+      defaults: defaultNodes,
       base: baseNodes,
       components: componentNodes,
       utilities: utilityNodes,
@@ -212,6 +221,13 @@ export default function expandTailwindAtRules(context) {
 
     // Replace any Tailwind directives with generated CSS
 
+    // @defaults rules are unconditionally added first to ensure that
+    // using any utility that relies on defaults will work even when
+    // compiled in an isolated environment like CSS modules
+    if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
+      root.prepend(cloneNodes([...defaultNodes], root.source))
+    }
+
     if (layerNodes.base) {
       layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source))
       layerNodes.base.remove()

package/src/lib/generateRules.js

@@ -248,6 +248,21 @@ function parseRules(rule, cache, options = {}) {
   return [cache.get(rule), options]
 }
 
+const IS_VALID_PROPERTY_NAME = /^[a-z_-]/
+
+function isValidPropName(name) {
+  return IS_VALID_PROPERTY_NAME.test(name)
+}
+
+function isParsableCssValue(property, value) {
+  try {
+    postcss.parse(`a{${property}:${value}}`).toResult()
+    return true
+  } catch (err) {
+    return false
+  }
+}
+
 function extractArbitraryProperty(classCandidate, context) {
   let [, property, value] = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/) ?? []
 
@@ -255,9 +270,17 @@ function extractArbitraryProperty(classCandidate, context) {
     return null
   }
 
+  if (!isValidPropName(property)) {
+    return null
+  }
+
+  if (!isValidArbitraryValue(value)) {
+    return null
+  }
+
   let normalized = normalize(value)
 
-  if (!isValidArbitraryValue(normalized)) {
+  if (!isParsableCssValue(property, normalized)) {
     return null
   }