tailwindcss 0.0.0-oxide.1 → 0.0.0-oxide.3

package/dist/lib.js

@@ -5,7 +5,7 @@ var lightningcss = require('lightningcss');
 // src/index.ts
 
 // package.json
-var version = "0.0.0-oxide.1";
+var version = "0.0.0-oxide.3";
 
 // src/ast.ts
 function rule(selector, nodes) {
@@ -45,183 +45,33 @@ function walk(ast, visit) {
     }
   }
 }
-
-// src/css-parser.ts
-function parse(input) {
-  let ast = [];
-  let licenseComments = [];
-  let stack = [];
-  let parent = null;
-  let node = null;
-  let current = "";
-  let closingBracketStack = "";
-  for (let i = 0; i < input.length; i++) {
-    let char = input[i];
-    if (char === "\\") {
-      current += input.slice(i, i + 2);
-      i += 1;
-    } else if (char === "/" && input[i + 1] === "*") {
-      let start = i;
-      for (let j = i + 2; j < input.length; j++) {
-        if (input[j] === "\\") {
-          j += 1;
-        } else if (input[j] === "*" && input[j + 1] === "/") {
-          i = j + 1;
-          break;
-        }
-      }
-      let commentString = input.slice(start, i + 1);
-      if (commentString[2] === "!") {
-        licenseComments.push(comment(commentString.slice(2, -2)));
-      }
-    } else if (char === '"' || char === "'") {
-      let start = i;
-      for (let j = i + 1; j < input.length; j++) {
-        if (input[j] === "\\") {
-          j += 1;
-        } else if (input[j] === char) {
-          i = j;
-          break;
-        } else if (input[j] === ";" && input[j + 1] === "\n") {
-          throw new Error(`Unterminated string: ${input.slice(start, j + 1) + char}`);
-        } else if (input[j] === "\n") {
-          throw new Error(`Unterminated string: ${input.slice(start, j) + char}`);
-        }
-      }
-      current += input.slice(start, i + 1);
-    } else if ((char === " " || char === "\n" || char === "	") && (input[i + 1] === " " || input[i + 1] === "\n" || input[i + 1] === "	")) {
-      continue;
-    } else if (char === "-" && input[i + 1] === "-" && current.length === 0) {
-      let closingBracketStack2 = "";
-      let start = i;
-      let colonIdx = -1;
-      for (let j = i + 2; j < input.length; j++) {
-        if (input[j] === "\\") {
-          j += 1;
-        } else if (input[j] === "/" && input[j + 1] === "*") {
-          for (let k = j + 2; k < input.length; k++) {
-            if (input[k] === "\\") {
-              k += 1;
-            } else if (input[k] === "*" && input[k + 1] === "/") {
-              j = k + 1;
-              break;
-            }
-          }
-        } else if (colonIdx === -1 && input[j] === ":") {
-          colonIdx = current.length + j - start;
-        } else if (input[j] === ";" && closingBracketStack2.length === 0) {
-          current += input.slice(start, j);
-          i = j;
-          break;
-        } else if (input[j] === "(") {
-          closingBracketStack2 += ")";
-        } else if (input[j] === "[") {
-          closingBracketStack2 += "]";
-        } else if (input[j] === "{") {
-          closingBracketStack2 += "}";
-        } else if ((input[j] === "}" || input.length - 1 === j) && closingBracketStack2.length === 0) {
-          i = j - 1;
-          current += input.slice(start, j);
-          break;
-        } else if (input[j] === ")" || input[j] === "]" || input[j] === "}") {
-          if (closingBracketStack2.length > 0 && input[j] === closingBracketStack2[closingBracketStack2.length - 1]) {
-            closingBracketStack2 = closingBracketStack2.slice(0, -1);
-          }
-        }
-      }
-      let declaration = parseDeclaration(current, colonIdx);
-      if (parent) {
-        parent.nodes.push(declaration);
-      } else {
-        ast.push(declaration);
-      }
-      current = "";
-    } else if (char === ";" && current[0] === "@") {
-      node = rule(current, []);
-      if (parent) {
-        parent.nodes.push(node);
-      } else {
-        ast.push(node);
-      }
-      current = "";
-      node = null;
-    } else if (char === ";") {
-      let declaration = parseDeclaration(current);
-      if (parent) {
-        parent.nodes.push(declaration);
-      } else {
-        ast.push(declaration);
-      }
-      current = "";
-    } else if (char === "{") {
-      closingBracketStack += "}";
-      node = rule(current.trim(), []);
-      if (parent) {
-        parent.nodes.push(node);
-      }
-      stack.push(parent);
-      parent = node;
-      current = "";
-      node = null;
-    } else if (char === "}") {
-      if (closingBracketStack === "") {
-        throw new Error(`Missing opening {`);
-      } else {
-        closingBracketStack = closingBracketStack.slice(0, -1);
-      }
-      if (current.length > 0) {
-        if (current[0] === "@") {
-          node = rule(current.trim(), []);
-          if (parent) {
-            parent.nodes.push(node);
-          } else {
-            ast.push(node);
-          }
-          current = "";
-          node = null;
-        } else {
-          let colonIdx = current.indexOf(":");
-          if (parent) {
-            let importantIdx = current.indexOf("!important", colonIdx + 1);
-            parent.nodes.push({
-              kind: "declaration",
-              property: current.slice(0, colonIdx).trim(),
-              value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
-              important: importantIdx !== -1
-            });
-          }
+function toCss(ast) {
+  let atRoots = [];
+  return ast.map(function stringify(node) {
+    let css = "";
+    if (node.kind === "rule") {
+      if (node.selector === "@at-root") {
+        for (let child of node.nodes) {
+          atRoots.push(stringify(child));
         }
+        return css;
       }
-      let grandParent = stack.pop() ?? null;
-      if (grandParent === null && parent) {
-        ast.push(parent);
+      if (node.selector[0] === "@" && node.nodes.length === 0) {
+        return `${node.selector};`;
       }
-      parent = grandParent;
-      current = "";
-      node = null;
-    } else {
-      if (current.length === 0 && (char === " " || char === "\n" || char === "	")) {
-        continue;
+      css += `${node.selector}{`;
+      for (let child of node.nodes) {
+        css += stringify(child);
       }
-      current += char;
+      css += "}";
+    } else if (node.kind === "comment") {
+      css += `/*${node.value}*/
+`;
+    } else if (node.property !== "--tw-sort" && node.value !== void 0 && node.value !== null) {
+      css += `${node.property}:${node.value}${node.important ? "!important" : ""};`;
     }
-  }
-  if (closingBracketStack.length > 0 && parent) {
-    throw new Error(`Missing closing } at ${parent.selector}`);
-  }
-  if (licenseComments.length > 0) {
-    return licenseComments.concat(ast);
-  }
-  return ast;
-}
-function parseDeclaration(current, colonIdx = current.indexOf(":")) {
-  let importantIdx = current.indexOf("!important", colonIdx + 1);
-  return {
-    kind: "declaration",
-    property: current.slice(0, colonIdx).trim(),
-    value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
-    important: importantIdx !== -1
-  };
+    return css;
+  }).concat(atRoots).join("\n");
 }
 
 // src/utils/math-operators.ts
@@ -380,152 +230,57 @@ function segment(input, separator) {
 }
 
 // src/candidate.ts
-function findRoot(input, lookup) {
-  let root = null;
-  let value = null;
-  {
-    if (lookup.has(input)) {
-      root = input;
-      value = null;
-    } else {
-      let idx = input.lastIndexOf("-");
-      if (idx === -1)
-        return [null, null];
-      do {
-        let maybeRoot = input.slice(0, idx);
-        if (lookup.has(maybeRoot)) {
-          root = maybeRoot;
-          value = input.slice(idx + 1);
-          break;
-        }
-        idx = input.lastIndexOf("-", idx - 1);
-      } while (idx > 0);
+function parseCandidate(input, utilities, parsedVariants) {
+  let rawVariants = segment(input, ":");
+  let base = rawVariants.pop();
+  let parsedCandidateVariants = [];
+  for (let variant of rawVariants) {
+    let parsedVariant = parsedVariants.get(variant);
+    if (parsedVariant === null)
+      return null;
+    switch (variant) {
+      case "after":
+      case "backdrop":
+      case "before":
+      case "first-letter":
+      case "first-line":
+      case "marker":
+      case "placeholder":
+      case "selection":
+        parsedCandidateVariants.unshift(parsedVariant);
+        break;
+      default:
+        parsedCandidateVariants.push(parsedVariant);
     }
   }
-  return [root, value];
-}
-function parseVariant(variant, variants, parsedVariants) {
-  if (variant[0] === "[" && variant[variant.length - 1] === "]") {
-    if (variant[1] === "@" && variant.includes("&"))
+  let state = {
+    important: false,
+    negative: false
+  };
+  if (base[base.length - 1] === "!") {
+    state.important = true;
+    base = base.slice(0, -1);
+  }
+  if (base[0] === "[") {
+    let [baseWithoutModifier, modifierSegment2 = null] = segment(base, "/");
+    if (baseWithoutModifier[baseWithoutModifier.length - 1] !== "]")
       return null;
-    let selector = decodeArbitraryValue(variant.slice(1, -1));
-    if (selector[0] !== "@") {
-      if (!selector.includes("&")) {
-        selector = `&:is(${selector})`;
-      }
-    }
+    let charCode = baseWithoutModifier.charCodeAt(1);
+    if (charCode !== 45 && !(charCode >= 97 && charCode <= 122))
+      return null;
+    baseWithoutModifier = baseWithoutModifier.slice(1, -1);
+    let idx = baseWithoutModifier.indexOf(":");
+    if (idx === -1 || idx === 0 || idx === baseWithoutModifier.length - 1)
+      return null;
+    let property2 = baseWithoutModifier.slice(0, idx);
+    let value2 = decodeArbitraryValue(baseWithoutModifier.slice(idx + 1));
     return {
       kind: "arbitrary",
-      selector,
-      compounds: true
-    };
-  }
-  {
-    let [variantWithoutModifier, modifier = null, additionalModifier] = segment(variant, "/");
-    if (additionalModifier)
-      return null;
-    let [root, value] = findRoot(variantWithoutModifier, variants);
-    if (root === null)
-      return null;
-    switch (variants.kind(root)) {
-      case "static": {
-        if (value !== null)
-          return null;
-        return {
-          kind: "static",
-          root,
-          compounds: variants.compounds(root)
-        };
-      }
-      case "functional": {
-        if (value === null)
-          return null;
-        if (value[0] === "[" && value[value.length - 1] === "]") {
-          return {
-            kind: "functional",
-            root,
-            value: {
-              kind: "arbitrary",
-              value: decodeArbitraryValue(value.slice(1, -1))
-            },
-            compounds: variants.compounds(root)
-          };
-        } else {
-          return {
-            kind: "functional",
-            root,
-            value: { kind: "named", value },
-            compounds: variants.compounds(root)
-          };
-        }
-      }
-      case "compound": {
-        if (value === null)
-          return null;
-        let subVariant = parsedVariants.get(value);
-        if (subVariant === null)
-          return null;
-        if (subVariant.compounds === false)
-          return null;
-        return {
-          kind: "compound",
-          root,
-          modifier: modifier === null ? null : { kind: "named", value: modifier },
-          variant: subVariant,
-          compounds: variants.compounds(root)
-        };
-      }
-    }
-  }
-  return null;
-}
-function parseCandidate(input, utilities, parsedVariants) {
-  let rawVariants = segment(input, ":");
-  let base = rawVariants.pop();
-  let parsedCandidateVariants = [];
-  for (let variant of rawVariants) {
-    let parsedVariant = parsedVariants.get(variant);
-    if (parsedVariant === null)
-      return null;
-    switch (variant) {
-      case "after":
-      case "backdrop":
-      case "before":
-      case "first-letter":
-      case "first-line":
-      case "marker":
-      case "placeholder":
-      case "selection":
-        parsedCandidateVariants.unshift(parsedVariant);
-        break;
-      default:
-        parsedCandidateVariants.push(parsedVariant);
-    }
-  }
-  let state = {
-    important: false,
-    negative: false
-  };
-  if (base[base.length - 1] === "!") {
-    state.important = true;
-    base = base.slice(0, -1);
-  }
-  if (base[0] === "[" && base[base.length - 1] === "]") {
-    let charCode = base.charCodeAt(1);
-    if (charCode !== 45 && !(charCode >= 97 && charCode <= 122))
-      return null;
-    base = base.slice(1, -1);
-    let idx = base.indexOf(":");
-    if (idx === -1 || idx === 0 || idx === base.length - 1)
-      return null;
-    let property2 = base.slice(0, idx);
-    let value2 = decodeArbitraryValue(base.slice(idx + 1));
-    return {
-      kind: "arbitrary",
-      property: property2,
-      value: value2,
-      variants: parsedCandidateVariants,
-      important: state.important
+      property: property2,
+      value: value2,
+      modifier: modifierSegment2 === null ? null : parseModifier(modifierSegment2),
+      variants: parsedCandidateVariants,
+      important: state.important
     };
   }
   if (base[0] === "-") {
@@ -533,6 +288,12 @@ function parseCandidate(input, utilities, parsedVariants) {
     base = base.slice(1);
   }
   let [root, value] = findRoot(base, utilities);
+  let modifierSegment = null;
+  if (root === null && base.includes("/")) {
+    let [rootWithoutModifier, rootModifierSegment = null] = segment(base, "/");
+    modifierSegment = rootModifierSegment;
+    [root, value] = findRoot(rootWithoutModifier, utilities);
+  }
   if (root === null)
     return null;
   let kind = utilities.kind(root);
@@ -550,22 +311,36 @@ function parseCandidate(input, utilities, parsedVariants) {
   let candidate = {
     kind: "functional",
     root,
-    modifier: null,
+    modifier: modifierSegment === null ? null : parseModifier(modifierSegment),
     value: null,
     variants: parsedCandidateVariants,
     negative: state.negative,
     important: state.important
   };
-  if (value === null) {
+  if (value === null)
     return candidate;
-  }
-  let [valueWithoutModifier, modifierSegment = null] = segment(value, "/");
-  let startArbitraryIdx = valueWithoutModifier.indexOf("[");
-  let valueIsArbitrary = startArbitraryIdx !== -1;
-  let modifierIsArbitrary = modifierSegment && modifierSegment[0] === "[" && modifierSegment[modifierSegment.length - 1] === "]";
-  if (modifierSegment) {
-    if (modifierIsArbitrary) {
-      let arbitraryValue = modifierSegment.slice(1, -1);
+  {
+    let [valueWithoutModifier, modifierSegment2 = null] = segment(value, "/");
+    if (modifierSegment2 !== null) {
+      candidate.modifier = parseModifier(modifierSegment2);
+    }
+    let startArbitraryIdx = valueWithoutModifier.indexOf("[");
+    let valueIsArbitrary = startArbitraryIdx !== -1;
+    if (valueIsArbitrary) {
+      let arbitraryValue = valueWithoutModifier.slice(startArbitraryIdx + 1, -1);
+      let typehint = "";
+      for (let i = 0; i < arbitraryValue.length; i++) {
+        let code = arbitraryValue.charCodeAt(i);
+        if (code === 58) {
+          typehint = arbitraryValue.slice(0, i);
+          arbitraryValue = arbitraryValue.slice(i + 1);
+          break;
+        }
+        if (code === 45 || code >= 97 && code <= 122) {
+          continue;
+        }
+        break;
+      }
       let dashedIdent = null;
       if (arbitraryValue[0] === "-" && arbitraryValue[1] === "-") {
         dashedIdent = arbitraryValue;
@@ -573,33 +348,26 @@ function parseCandidate(input, utilities, parsedVariants) {
       } else {
         arbitraryValue = decodeArbitraryValue(arbitraryValue);
       }
-      candidate.modifier = {
+      candidate.value = {
         kind: "arbitrary",
+        dataType: typehint || null,
         value: arbitraryValue,
         dashedIdent
       };
     } else {
-      candidate.modifier = {
+      let fraction = modifierSegment2 === null || candidate.modifier?.kind === "arbitrary" ? null : value.slice(valueWithoutModifier.lastIndexOf("-") + 1);
+      candidate.value = {
         kind: "named",
-        value: modifierSegment
+        value: valueWithoutModifier,
+        fraction
       };
     }
   }
-  if (valueIsArbitrary) {
-    let arbitraryValue = valueWithoutModifier.slice(startArbitraryIdx + 1, -1);
-    let typehint = "";
-    for (let i = 0; i < arbitraryValue.length; i++) {
-      let code = arbitraryValue.charCodeAt(i);
-      if (code === 58) {
-        typehint = arbitraryValue.slice(0, i);
-        arbitraryValue = arbitraryValue.slice(i + 1);
-        break;
-      }
-      if (code === 45 || code >= 97 && code <= 122) {
-        continue;
-      }
-      break;
-    }
+  return candidate;
+}
+function parseModifier(modifier) {
+  if (modifier[0] === "[" && modifier[modifier.length - 1] === "]") {
+    let arbitraryValue = modifier.slice(1, -1);
     let dashedIdent = null;
     if (arbitraryValue[0] === "-" && arbitraryValue[1] === "-") {
       dashedIdent = arbitraryValue;
@@ -607,314 +375,113 @@ function parseCandidate(input, utilities, parsedVariants) {
     } else {
       arbitraryValue = decodeArbitraryValue(arbitraryValue);
     }
-    candidate.value = {
+    return {
       kind: "arbitrary",
-      dataType: typehint || null,
       value: arbitraryValue,
       dashedIdent
     };
-  } else {
-    let fraction = modifierSegment === null || modifierIsArbitrary ? null : value.slice(valueWithoutModifier.lastIndexOf("-") + 1);
-    candidate.value = {
-      kind: "named",
-      value: valueWithoutModifier,
-      fraction
+  }
+  return {
+    kind: "named",
+    value: modifier
+  };
+}
+function parseVariant(variant, variants, parsedVariants) {
+  if (variant[0] === "[" && variant[variant.length - 1] === "]") {
+    if (variant[1] === "@" && variant.includes("&"))
+      return null;
+    let selector = decodeArbitraryValue(variant.slice(1, -1));
+    if (selector[0] !== "@") {
+      if (!selector.includes("&")) {
+        selector = `&:is(${selector})`;
+      }
+    }
+    return {
+      kind: "arbitrary",
+      selector,
+      compounds: true
     };
   }
-  return candidate;
+  {
+    let [variantWithoutModifier, modifier = null, additionalModifier] = segment(variant, "/");
+    if (additionalModifier)
+      return null;
+    let [root, value] = findRoot(variantWithoutModifier, variants);
+    if (root === null)
+      return null;
+    switch (variants.kind(root)) {
+      case "static": {
+        if (value !== null)
+          return null;
+        return {
+          kind: "static",
+          root,
+          compounds: variants.compounds(root)
+        };
+      }
+      case "functional": {
+        if (value === null)
+          return null;
+        if (value[0] === "[" && value[value.length - 1] === "]") {
+          return {
+            kind: "functional",
+            root,
+            modifier: modifier === null ? null : parseModifier(modifier),
+            value: {
+              kind: "arbitrary",
+              value: decodeArbitraryValue(value.slice(1, -1))
+            },
+            compounds: variants.compounds(root)
+          };
+        }
+        return {
+          kind: "functional",
+          root,
+          modifier: modifier === null ? null : parseModifier(modifier),
+          value: { kind: "named", value },
+          compounds: variants.compounds(root)
+        };
+      }
+      case "compound": {
+        if (value === null)
+          return null;
+        let subVariant = parsedVariants.get(value);
+        if (subVariant === null)
+          return null;
+        if (subVariant.compounds === false)
+          return null;
+        return {
+          kind: "compound",
+          root,
+          modifier: modifier === null ? null : { kind: "named", value: modifier },
+          variant: subVariant,
+          compounds: variants.compounds(root)
+        };
+      }
+    }
+  }
+  return null;
+}
+function findRoot(input, lookup) {
+  if (lookup.has(input))
+    return [input, null];
+  let idx = input.lastIndexOf("-");
+  if (idx === -1) {
+    if (input[0] === "@" && lookup.has("@")) {
+      return ["@", input.slice(1)];
+    }
+    return [null, null];
+  }
+  do {
+    let maybeRoot = input.slice(0, idx);
+    if (lookup.has(maybeRoot)) {
+      return [maybeRoot, input.slice(idx + 1)];
+    }
+    idx = input.lastIndexOf("-", idx - 1);
+  } while (idx > 0);
+  return [null, null];
 }
 
-// src/property-order.ts
-var property_order_default = [
-  "pointer-events",
-  "visibility",
-  "position",
-  // How do we make `inset-x-0` come before `top-0`?
-  "inset",
-  "inset-inline",
-  "inset-block",
-  "inset-inline-start",
-  "inset-inline-end",
-  "top",
-  "right",
-  "bottom",
-  "left",
-  "isolation",
-  "z-index",
-  "order",
-  "grid-column",
-  "grid-column-start",
-  "grid-column-end",
-  "grid-row",
-  "grid-row-start",
-  "grid-row-end",
-  "float",
-  "clear",
-  // How do we make `mx-0` come before `mt-0`?
-  // Idea: `margin-x` property that we compile away with a Visitor plugin?
-  "margin",
-  "margin-inline",
-  "margin-block",
-  "margin-inline-start",
-  "margin-inline-end",
-  "margin-top",
-  "margin-right",
-  "margin-bottom",
-  "margin-left",
-  "box-sizing",
-  "display",
-  "aspect-ratio",
-  "height",
-  "max-height",
-  "min-height",
-  "width",
-  "max-width",
-  "min-width",
-  "flex",
-  "flex-shrink",
-  "flex-grow",
-  "flex-basis",
-  "table-layout",
-  "caption-side",
-  "border-collapse",
-  // There's no `border-spacing-x` property, we use variables, how to sort?
-  "border-spacing",
-  // '--tw-border-spacing-x',
-  // '--tw-border-spacing-y',
-  "transform-origin",
-  // '--tw-translate-x',
-  // '--tw-translate-y',
-  "translate",
-  "rotate",
-  // '--tw-rotate',
-  "--tw-skew-x",
-  "--tw-skew-y",
-  "scale",
-  // '--tw-scale-x',
-  // '--tw-scale-y',
-  "transform",
-  "animation",
-  "cursor",
-  "touch-action",
-  "--tw-pan-x",
-  "--tw-pan-y",
-  "--tw-pinch-zoom",
-  "resize",
-  "scroll-snap-type",
-  "--tw-scroll-snap-strictness",
-  "scroll-snap-align",
-  "scroll-snap-stop",
-  "scroll-margin",
-  "scroll-margin-inline-start",
-  "scroll-margin-inline-end",
-  "scroll-margin-top",
-  "scroll-margin-right",
-  "scroll-margin-bottom",
-  "scroll-margin-left",
-  "scroll-padding",
-  "scroll-padding-inline-start",
-  "scroll-padding-inline-end",
-  "scroll-padding-top",
-  "scroll-padding-right",
-  "scroll-padding-bottom",
-  "scroll-padding-left",
-  "list-style-position",
-  "list-style-type",
-  "list-style-image",
-  "appearance",
-  "columns",
-  "break-before",
-  "break-inside",
-  "break-after",
-  "grid-auto-columns",
-  "grid-auto-flow",
-  "grid-auto-rows",
-  "grid-template-columns",
-  "grid-template-rows",
-  "flex-direction",
-  "flex-wrap",
-  "place-content",
-  "place-items",
-  "align-content",
-  "align-items",
-  "justify-content",
-  "justify-items",
-  "gap",
-  "column-gap",
-  "row-gap",
-  "--tw-space-x-reverse",
-  "--tw-space-y-reverse",
-  // Is there a more "real" property we could use for this?
-  "divide-x-width",
-  "divide-y-width",
-  "--tw-divide-y-reverse",
-  "divide-style",
-  "divide-color",
-  "--tw-divide-opacity",
-  "place-self",
-  "align-self",
-  "justify-self",
-  "overflow",
-  "overflow-x",
-  "overflow-y",
-  "overscroll-behavior",
-  "overscroll-behavior-x",
-  "overscroll-behavior-y",
-  "scroll-behavior",
-  "text-overflow",
-  "hyphens",
-  "white-space",
-  "text-wrap",
-  "overflow-wrap",
-  "work-break",
-  "border-radius",
-  "border-start-radius",
-  // Not real
-  "border-end-radius",
-  // Not real
-  "border-top-radius",
-  // Not real
-  "border-right-radius",
-  // Not real
-  "border-bottom-radius",
-  // Not real
-  "border-left-radius",
-  // Not real
-  "border-start-start-radius",
-  "border-start-end-radius",
-  "border-end-end-radius",
-  "border-end-start-radius",
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "border-bottom-right-radius",
-  "border-bottom-left-radius",
-  "border-width",
-  "border-inline-width",
-  // Not real
-  "border-inline-start-width",
-  "border-inline-end-width",
-  "border-top-width",
-  "border-right-width",
-  "border-bottom-width",
-  "border-left-width",
-  "border-style",
-  "border-color",
-  "border-x-color",
-  // Not real
-  "border-y-color",
-  // Not real
-  "border-inline-start-color",
-  "border-inline-end-color",
-  "border-top-color",
-  "border-right-color",
-  "border-bottom-color",
-  "border-left-color",
-  "--tw-border-opacity",
-  "background-color",
-  "--tw-bg-opacity",
-  "background-image",
-  "--tw-gradient-stops",
-  "--tw-gradient-via-stops",
-  "--tw-gradient-from",
-  "--tw-gradient-from-position",
-  "--tw-gradient-via",
-  "--tw-gradient-via-position",
-  "--tw-gradient-to",
-  "--tw-gradient-to-position",
-  "box-decoration-break",
-  "background-size",
-  "background-attachment",
-  "background-clip",
-  "background-position",
-  "background-repeat",
-  "background-origin",
-  "fill",
-  "stroke",
-  "stroke-width",
-  "object-fit",
-  "object-position",
-  "padding",
-  "padding-inline",
-  "padding-block",
-  "padding-inline-start",
-  "padding-inline-end",
-  "padding-top",
-  "padding-right",
-  "padding-bottom",
-  "padding-left",
-  "text-align",
-  "text-indent",
-  "vertical-align",
-  "font-family",
-  "font-size",
-  "font-weight",
-  "text-transform",
-  "font-style",
-  "font-variant-numeric",
-  "line-height",
-  "letter-spacing",
-  "color",
-  "--tw-text-opacity",
-  "text-decoration-line",
-  "text-decoration-color",
-  "text-decoration-style",
-  "text-decoration-thickness",
-  "text-underline-offset",
-  "-webkit-font-smoothing",
-  "placeholder-color",
-  // Not real
-  "--tw-placeholder-opacity",
-  "caret-color",
-  "accent-color",
-  "opacity",
-  "background-blend-mode",
-  "mix-blend-mode",
-  "box-shadow",
-  "--tw-shadow",
-  "--tw-shadow-color",
-  "--tw-ring-shadow",
-  "--tw-ring-color",
-  "--tw-inset-shadow",
-  "--tw-inset-shadow-color",
-  "--tw-inset-ring-shadow",
-  "--tw-inset-ring-color",
-  "--tw-ring-opacity",
-  "--tw-ring-offset-width",
-  "--tw-ring-offset-color",
-  "outline",
-  "outline-width",
-  "outline-offset",
-  "outline-color",
-  "--tw-blur",
-  "--tw-brightness",
-  "--tw-contast",
-  "--tw-drop-shadow",
-  "--tw-grayscale",
-  "--tw-hue-rotate",
-  "--tw-invert",
-  "--tw-saturate",
-  "--tw-sepia",
-  "filter",
-  "--tw-backdrop-blur",
-  "--tw-backdrop-brightness",
-  "--tw-backdrop-contast",
-  "--tw-backdrop-grayscale",
-  "--tw-backdrop-hue-rotate",
-  "--tw-backdrop-invert",
-  "--tw-backdrop-opacity",
-  "--tw-backdrop-saturate",
-  "--tw-backdrop-sepia",
-  "backdrop-filter",
-  "transition-property",
-  "transition-delay",
-  "transition-duration",
-  "transition-timing-function",
-  "will-change",
-  "contain",
-  "content",
-  "forced-color-adjust"
-];
-
 // src/utils/default-map.ts
 var DefaultMap = class extends Map {
   constructor(factory) {
@@ -931,205 +498,100 @@ var DefaultMap = class extends Map {
   }
 };
 
-// src/utils/escape.ts
-function escape(value) {
-  if (arguments.length == 0) {
-    throw new TypeError("`CSS.escape` requires an argument.");
-  }
-  var string = String(value);
-  var length = string.length;
-  var index = -1;
-  var codeUnit;
-  var result = "";
-  var firstCodeUnit = string.charCodeAt(0);
-  if (
-    // If the character is the first character and is a `-` (U+002D), and
-    // there is no second character, […]
-    length == 1 && firstCodeUnit == 45
-  ) {
-    return "\\" + string;
-  }
-  while (++index < length) {
-    codeUnit = string.charCodeAt(index);
-    if (codeUnit == 0) {
-      result += "\uFFFD";
+// src/intellisense.ts
+function getClassList(design) {
+  let list = [];
+  for (let [utility, fn] of design.utilities.entries()) {
+    if (typeof utility !== "string") {
       continue;
     }
-    if (
-      // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
-      // U+007F, […]
-      codeUnit >= 1 && codeUnit <= 31 || codeUnit == 127 || // If the character is the first character and is in the range [0-9]
-      // (U+0030 to U+0039), […]
-      index == 0 && codeUnit >= 48 && codeUnit <= 57 || // If the character is the second character and is in the range [0-9]
-      // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
-      index == 1 && codeUnit >= 48 && codeUnit <= 57 && firstCodeUnit == 45
-    ) {
-      result += "\\" + codeUnit.toString(16) + " ";
+    if (fn.kind === "static") {
+      list.push([utility, { modifiers: [] }]);
       continue;
     }
-    if (codeUnit >= 128 || codeUnit == 45 || codeUnit == 95 || codeUnit >= 48 && codeUnit <= 57 || codeUnit >= 65 && codeUnit <= 90 || codeUnit >= 97 && codeUnit <= 122) {
-      result += string.charAt(index);
-      continue;
-    }
-    result += "\\" + string.charAt(index);
-  }
-  return result;
-}
-
-// src/parse.ts
-function applyImportant(ast) {
-  for (let node of ast) {
-    if (node.kind === "rule" && node.selector === "@at-root") {
-      continue;
-    }
-    if (node.kind === "declaration") {
-      node.important = true;
-    } else if (node.kind === "rule") {
-      applyImportant(node.nodes);
-    }
-  }
-}
-function applyVariant(node, variant, variants) {
-  if (variant.kind === "arbitrary") {
-    node.nodes = [rule(variant.selector, node.nodes)];
-    return;
-  }
-  let applyVariantFn = variants.get(variant.root);
-  if (variant.kind === "compound") {
-    let result2 = applyVariant(node, variant.variant, variants);
-    if (result2 === null)
-      return null;
-    for (let child of node.nodes) {
-      let result3 = applyVariantFn(child, variant);
-      if (result3 === null)
-        return null;
+    let completions = design.utilities.getCompletions(utility);
+    for (let group of completions) {
+      for (let value of group.values) {
+        let name = value === null ? utility : `${utility}-${value}`;
+        list.push([name, { modifiers: group.modifiers }]);
+        if (group.supportsNegative) {
+          list.push([`-${name}`, { modifiers: group.modifiers }]);
+        }
+      }
     }
-    return;
   }
-  let result = applyVariantFn(node, variant);
-  if (result === null)
-    return null;
+  list.sort((a, b) => a[0].localeCompare(b[0]));
+  return list;
 }
-function parse2(rawCandidates, designSystem, { throwOnInvalidCandidate = false } = {}) {
-  rawCandidates.sort();
-  let nodeSorting = /* @__PURE__ */ new Map();
-  let astNodes = [];
-  let parsedVariants = new DefaultMap((variant, map) => {
-    return parseVariant(variant, designSystem.variants, map);
-  });
-  let candidates = /* @__PURE__ */ new Map();
-  next:
-    for (let rawCandidate of rawCandidates) {
-      let candidate = parseCandidate(rawCandidate, designSystem.utilities, parsedVariants);
-      if (candidate === null) {
-        if (throwOnInvalidCandidate) {
-          throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
-        } else {
-          continue next;
-        }
+function getVariants(design) {
+  let list = [];
+  let parsedVariants = new DefaultMap(
+    (variant, map) => parseVariant(variant, design.variants, map)
+  );
+  for (let [root, variant] of design.variants.entries()) {
+    let selectors2 = function({ value, modifier } = {}) {
+      let name = root;
+      if (value)
+        name += `-${value}`;
+      if (modifier)
+        name += `/${modifier}`;
+      let variant2 = parsedVariants.get(name);
+      if (!variant2)
+        return [];
+      let node = rule(".__placeholder__", [decl("color", "red")]);
+      if (applyVariant(node, variant2, design.variants) === null) {
+        return [];
       }
-      candidates.set(candidate, rawCandidate);
-    }
-  let variants = Array.from(parsedVariants.values()).sort((a, z) => {
-    return designSystem.variants.compare(a, z);
-  });
-  next:
-    for (let [candidate, rawCandidate] of candidates) {
-      let ruleNodes = [];
-      if (candidate.kind === "arbitrary") {
-        ruleNodes = [decl(candidate.property, candidate.value)];
-      } else if (candidate.kind === "static" || candidate.kind === "functional") {
-        let { matchFn } = designSystem.utilities.get(candidate.root);
-        let matchNodes = matchFn(candidate);
-        if (matchNodes === void 0) {
-          if (throwOnInvalidCandidate) {
-            throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
-          } else {
-            continue next;
-          }
+      let selectors3 = [];
+      for (let child of node.nodes) {
+        if (child.kind === "rule") {
+          selectors3.push(child.selector);
         }
-        ruleNodes = matchNodes;
       }
-      let propertySort = getPropertySort(ruleNodes);
-      if (candidate.important) {
-        applyImportant(ruleNodes);
+      return selectors3;
+    };
+    if (variant.kind === "arbitrary")
+      continue;
+    let values = design.variants.getCompletions(root);
+    switch (variant.kind) {
+      case "static": {
+        list.push({
+          name: root,
+          values,
+          isArbitrary: false,
+          hasDash: true,
+          selectors: selectors2
+        });
+        break;
       }
-      let node = {
-        kind: "rule",
-        selector: `.${escape(rawCandidate)}`,
-        nodes: ruleNodes
-      };
-      let variantOrder = 0n;
-      for (let variant of candidate.variants) {
-        let result = applyVariant(node, variant, designSystem.variants);
-        if (result === null) {
-          if (throwOnInvalidCandidate) {
-            throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
-          } else {
-            continue next;
-          }
-        }
-        variantOrder |= 1n << BigInt(variants.indexOf(variant));
+      case "functional": {
+        list.push({
+          name: root,
+          values,
+          isArbitrary: true,
+          hasDash: true,
+          selectors: selectors2
+        });
+        break;
       }
-      nodeSorting.set(node, {
-        properties: propertySort,
-        variants: variantOrder,
-        candidate: rawCandidate
-      });
-      astNodes.push(node);
-    }
-  astNodes.sort((a, z) => {
-    let aSorting = nodeSorting.get(a);
-    let zSorting = nodeSorting.get(z);
-    if (aSorting.variants - zSorting.variants !== 0n) {
-      return Number(aSorting.variants - zSorting.variants);
-    }
-    let offset = 0;
-    while (aSorting.properties.length < offset && zSorting.properties.length < offset && aSorting.properties[offset] === zSorting.properties[offset]) {
-      offset += 1;
-    }
-    return (
-      // Sort by lowest property index first
-      (aSorting.properties[offset] ?? Infinity) - (zSorting.properties[offset] ?? Infinity) || // Sort by most properties first, then by least properties
-      zSorting.properties.length - aSorting.properties.length
-    );
-  });
-  return {
-    astNodes,
-    nodeSorting
-  };
-}
-function getPropertySort(nodes) {
-  let propertySort = /* @__PURE__ */ new Set();
-  let q = nodes.slice();
-  next:
-    while (q.length > 0) {
-      let node = q.shift();
-      if (node.kind === "declaration") {
-        if (node.property === "--tw-sort") {
-          let idx2 = property_order_default.indexOf(node.value);
-          if (idx2 !== -1) {
-            propertySort.add(idx2);
-            break next;
-          }
-        }
-        let idx = property_order_default.indexOf(node.property);
-        if (idx !== -1)
-          propertySort.add(idx);
-      } else if (node.kind === "rule") {
-        if (node.selector === "@at-root")
-          continue;
-        for (let child of node.nodes) {
-          q.push(child);
-        }
+      case "compound": {
+        list.push({
+          name: root,
+          values,
+          isArbitrary: true,
+          hasDash: true,
+          selectors: selectors2
+        });
+        break;
       }
     }
-  return Array.from(propertySort).sort((a, z) => a - z);
+  }
+  return list;
 }
 
 // src/sort.ts
 function getClassOrder(design, classes) {
-  let { astNodes, nodeSorting } = parse2(Array.from(classes), design, {
+  let { astNodes, nodeSorting } = compileCandidates(Array.from(classes), design, {
     throwOnInvalidCandidate: false
   });
   let sorted = new Map(classes.map((className) => [className, null]));
@@ -1534,13 +996,18 @@ function replaceShadowColors(input, replacement) {
 }
 
 // src/utilities.ts
+var ARBITRARY_VARIANT = Symbol("ARBITRARY_VARIANT");
 var Utilities = class {
   utilities = /* @__PURE__ */ new Map();
-  static(name, matchFn) {
-    this.set(name, { kind: "static", matchFn });
+  completions = /* @__PURE__ */ new Map();
+  static(name, compileFn) {
+    this.set(name, { kind: "static", compileFn });
   }
-  functional(name, matchFn) {
-    this.set(name, { kind: "functional", matchFn });
+  functional(name, compileFn) {
+    this.set(name, { kind: "functional", compileFn });
+  }
+  arbitrary(compileFn) {
+    this.set(ARBITRARY_VARIANT, { kind: "arbitrary", compileFn });
   }
   has(name) {
     return this.utilities.has(name);
@@ -1551,13 +1018,25 @@ var Utilities = class {
   kind(name) {
     return this.utilities.get(name).kind;
   }
+  getCompletions(name) {
+    return this.completions.get(name)?.() ?? [];
+  }
+  suggest(name, groups) {
+    this.completions.set(name, groups);
+  }
   keys() {
     return this.utilities.keys();
   }
-  set(name, { kind, matchFn }) {
+  entries() {
+    return this.utilities.entries();
+  }
+  getArbitrary() {
+    return this.get(ARBITRARY_VARIANT).compileFn;
+  }
+  set(name, { kind, compileFn }) {
     this.utilities.set(name, {
       kind,
-      matchFn
+      compileFn
     });
   }
 };
@@ -1577,19 +1056,17 @@ function property(ident, initialValue, syntax) {
   ]);
 }
 function withAlpha(value, alpha) {
-  if (alpha === null) {
+  if (alpha === null)
     return value;
-  }
   let alphaAsNumber = Number(alpha);
-  if (!isNaN(alphaAsNumber)) {
+  if (!Number.isNaN(alphaAsNumber)) {
     alpha = `${alphaAsNumber * 100}%`;
   }
   return `color-mix(in srgb, ${value} ${alpha}, transparent)`;
 }
 function asColor(value, modifier, theme) {
-  if (!modifier) {
+  if (!modifier)
     return value;
-  }
   if (modifier.kind === "arbitrary") {
     return withAlpha(value, modifier.value);
   }
@@ -1597,6 +1074,9 @@ function asColor(value, modifier, theme) {
   if (alpha) {
     return withAlpha(value, alpha);
   }
+  if (Number.isNaN(Number(modifier.value))) {
+    return null;
+  }
   return withAlpha(value, `${modifier.value}%`);
 }
 function withNegative(value, candidate) {
@@ -1622,11 +1102,45 @@ function resolveThemeColor(candidate, theme, themeKeys) {
 }
 function createUtilities(theme) {
   let utilities = new Utilities();
+  utilities.arbitrary((candidate) => {
+    let value = candidate.value;
+    if (candidate.modifier) {
+      value = asColor(value, candidate.modifier, theme);
+    }
+    if (value === null)
+      return;
+    return [decl(candidate.property, value)];
+  });
+  function suggest(classRoot, defns) {
+    function* resolve(themeKeys) {
+      for (let value of theme.keysInNamespaces(themeKeys)) {
+        yield value.replaceAll("_", ".");
+      }
+    }
+    utilities.suggest(classRoot, () => {
+      let groups = [];
+      for (let defn of defns()) {
+        if (typeof defn === "string") {
+          groups.push({ values: [defn], modifiers: [] });
+          continue;
+        }
+        let values = [
+          ...defn.values ?? [],
+          ...resolve(defn.valueThemeKeys ?? [])
+        ];
+        let modifiers = [...defn.modifiers ?? [], ...resolve(defn.modifierThemeKeys ?? [])];
+        if (defn.hasDefaultValue) {
+          values.unshift(null);
+        }
+        groups.push({ supportsNegative: defn.supportsNegative, values, modifiers });
+      }
+      return groups;
+    });
+  }
   function staticUtility(className, declarations) {
     utilities.static(className, (candidate) => {
-      if (candidate.negative) {
+      if (candidate.negative)
         return;
-      }
       return declarations.map((node) => {
         return typeof node === "function" ? node() : decl(node[0], node[1]);
       });
@@ -1643,17 +1157,24 @@ function createUtilities(theme) {
         value = candidate.value.value;
       } else {
         value = theme.resolve(candidate.value.fraction ?? candidate.value.value, desc.themeKeys);
-        if (!value && desc.supportsFractions && candidate.value.fraction) {
+        if (value === null && desc.supportsFractions && candidate.value.fraction) {
           value = `calc(${candidate.value.fraction} * 100%)`;
         }
-        if (!value && desc.handleBareValue) {
+        if (value === null && desc.handleBareValue) {
           value = desc.handleBareValue(candidate.value);
         }
       }
-      if (!value)
+      if (value === null)
         return;
       return desc.handle(withNegative(value, candidate));
     });
+    suggest(classRoot, () => [
+      {
+        supportsNegative: desc.supportsNegative,
+        valueThemeKeys: desc.themeKeys,
+        hasDefaultValue: desc.defaultValue !== void 0 && desc.defaultValue !== null
+      }
+    ]);
   }
   function colorUtility(classRoot, desc) {
     utilities.functional(classRoot, (candidate) => {
@@ -1667,11 +1188,19 @@ function createUtilities(theme) {
         value = asColor(value, candidate.modifier, theme);
       } else {
         value = resolveThemeColor(candidate, theme, desc.themeKeys);
-        if (!value)
-          return;
       }
+      if (value === null)
+        return;
       return desc.handle(value);
     });
+    suggest(classRoot, () => [
+      {
+        values: ["current", "transparent"],
+        valueThemeKeys: desc.themeKeys,
+        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ["--opacity"]
+      }
+    ]);
   }
   staticUtility("sr-only", [
     ["position", "absolute"],
@@ -1828,6 +1357,13 @@ function createUtilities(theme) {
     themeKeys: ["--z-index"],
     handle: (value) => [decl("z-index", value)]
   });
+  suggest("z", () => [
+    {
+      supportsNegative: true,
+      values: ["0", "10", "20", "30", "40", "50"],
+      valueThemeKeys: ["--z-index"]
+    }
+  ]);
   staticUtility("order-first", [["order", "calc(-infinity)"]]);
   staticUtility("order-last", [["order", "calc(infinity)"]]);
   staticUtility("order-none", [["order", "0"]]);
@@ -1837,6 +1373,13 @@ function createUtilities(theme) {
     themeKeys: ["--order"],
     handle: (value) => [decl("order", value)]
   });
+  suggest("order", () => [
+    {
+      supportsNegative: true,
+      values: Array.from({ length: 12 }, (_, i) => `${i + 1}`),
+      valueThemeKeys: ["--order"]
+    }
+  ]);
   staticUtility("col-auto", [["grid-column", "auto"]]);
   functionalUtility("col", {
     themeKeys: ["--grid-column"],
@@ -1860,6 +1403,24 @@ function createUtilities(theme) {
     themeKeys: ["--grid-column-end"],
     handle: (value) => [decl("grid-column-end", value)]
   });
+  suggest("col-span", () => [
+    {
+      values: Array.from({ length: 12 }, (_, i) => `${i + 1}`),
+      valueThemeKeys: []
+    }
+  ]);
+  suggest("col-start", () => [
+    {
+      values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
+      valueThemeKeys: ["--grid-column-start"]
+    }
+  ]);
+  suggest("col-end", () => [
+    {
+      values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
+      valueThemeKeys: ["--grid-column-end"]
+    }
+  ]);
   staticUtility("row-auto", [["grid-row", "auto"]]);
   functionalUtility("row", {
     themeKeys: ["--grid-row"],
@@ -1883,6 +1444,24 @@ function createUtilities(theme) {
     themeKeys: ["--grid-row-end"],
     handle: (value) => [decl("grid-row-end", value)]
   });
+  suggest("row-span", () => [
+    {
+      values: Array.from({ length: 12 }, (_, i) => `${i + 1}`),
+      valueThemeKeys: []
+    }
+  ]);
+  suggest("row-start", () => [
+    {
+      values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
+      valueThemeKeys: ["--grid-row-start"]
+    }
+  ]);
+  suggest("row-end", () => [
+    {
+      values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
+      valueThemeKeys: ["--grid-row-end"]
+    }
+  ]);
   staticUtility("float-start", [["float", "start"]]);
   staticUtility("float-end", [["float", "end"]]);
   staticUtility("float-right", [["float", "right"]]);
@@ -1936,6 +1515,12 @@ function createUtilities(theme) {
       decl("-webkit-line-clamp", value)
     ]
   });
+  suggest("line-clamp", () => [
+    {
+      values: ["1", "2", "3", "4", "5", "6"],
+      valueThemeKeys: ["--line-clamp"]
+    }
+  ]);
   staticUtility("block", [["display", "block"]]);
   staticUtility("inline-block", [["display", "inline-block"]]);
   staticUtility("inline", [["display", "inline"]]);
@@ -2107,6 +1692,20 @@ function createUtilities(theme) {
     handleBareValue: ({ value }) => value,
     handle: (value) => [decl("flex-grow", value)]
   });
+  suggest("shrink", () => [
+    {
+      values: ["0"],
+      valueThemeKeys: [],
+      hasDefaultValue: true
+    }
+  ]);
+  suggest("grow", () => [
+    {
+      values: ["0"],
+      valueThemeKeys: [],
+      hasDefaultValue: true
+    }
+  ]);
   staticUtility("basis-auto", [["flex-basis", "auto"]]);
   staticUtility("basis-full", [["flex-basis", "100%"]]);
   functionalUtility("basis", {
@@ -2183,7 +1782,7 @@ function createUtilities(theme) {
       translateProperties(),
       decl("--tw-translate-x", value),
       decl("--tw-translate-y", value),
-      decl("translate", `var(--tw-translate-x) var(--tw-translate-y)`)
+      decl("translate", "var(--tw-translate-x) var(--tw-translate-y)")
     ]
   });
   utilities.static("translate-x-full", (candidate) => {
@@ -2201,7 +1800,7 @@ function createUtilities(theme) {
     handle: (value) => [
       translateProperties(),
       decl("--tw-translate-x", value),
-      decl("translate", `var(--tw-translate-x) var(--tw-translate-y)`)
+      decl("translate", "var(--tw-translate-x) var(--tw-translate-y)")
     ]
   });
   utilities.static("translate-y-full", (candidate) => {
@@ -2219,7 +1818,7 @@ function createUtilities(theme) {
     handle: (value) => [
       translateProperties(),
       decl("--tw-translate-y", value),
-      decl("translate", `var(--tw-translate-x) var(--tw-translate-y)`)
+      decl("translate", "var(--tw-translate-x) var(--tw-translate-y)")
     ]
   });
   functionalUtility("rotate", {
@@ -2228,6 +1827,13 @@ function createUtilities(theme) {
     handleBareValue: ({ value }) => `${value}deg`,
     handle: (value) => [decl("rotate", value)]
   });
+  suggest("rotate", () => [
+    {
+      supportsNegative: true,
+      values: ["0", "1", "2", "3", "6", "12", "45", "90", "180"],
+      valueThemeKeys: ["--rotate"]
+    }
+  ]);
   let skewProperties = () => atRoot([property("--tw-skew-x", "0deg", "<angle>"), property("--tw-skew-y", "0deg", "<angle>")]);
   functionalUtility("skew", {
     supportsNegative: true,
@@ -2260,6 +1866,27 @@ function createUtilities(theme) {
       decl("transform", "skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))")
     ]
   });
+  suggest("skew", () => [
+    {
+      supportsNegative: true,
+      values: ["0", "1", "2", "3", "6", "12"],
+      valueThemeKeys: ["--skew"]
+    }
+  ]);
+  suggest("skew-x", () => [
+    {
+      supportsNegative: true,
+      values: ["0", "1", "2", "3", "6", "12"],
+      valueThemeKeys: ["--skew"]
+    }
+  ]);
+  suggest("skew-y", () => [
+    {
+      supportsNegative: true,
+      values: ["0", "1", "2", "3", "6", "12"],
+      valueThemeKeys: ["--skew"]
+    }
+  ]);
   let scaleProperties = () => atRoot([property("--tw-scale-x", "1", "<number>"), property("--tw-scale-y", "1", "<number>")]);
   functionalUtility("scale", {
     supportsNegative: true,
@@ -2292,6 +1919,27 @@ function createUtilities(theme) {
       decl("scale", "var(--tw-scale-x) var(--tw-scale-y)")
     ]
   });
+  suggest("scale", () => [
+    {
+      supportsNegative: true,
+      values: ["0", "50", "75", "90", "95", "100", "105", "110", "125", "150", "200"],
+      valueThemeKeys: ["--scale"]
+    }
+  ]);
+  suggest("scale-x", () => [
+    {
+      supportsNegative: true,
+      values: ["0", "50", "75", "90", "95", "100", "105", "110", "125", "150", "200"],
+      valueThemeKeys: ["--scale"]
+    }
+  ]);
+  suggest("scale-y", () => [
+    {
+      supportsNegative: true,
+      values: ["0", "50", "75", "90", "95", "100", "105", "110", "125", "150", "200"],
+      valueThemeKeys: ["--scale"]
+    }
+  ]);
   staticUtility("transform", [
     skewProperties,
     ["transform", "skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))"]
@@ -2377,11 +2025,11 @@ function createUtilities(theme) {
       ["user-select", value]
     ]);
   }
-  staticUtility(`resize-none`, [["resize", "none"]]);
-  staticUtility(`resize-both`, [["resize", "both"]]);
-  staticUtility(`resize-x`, [["resize", "horizontal"]]);
-  staticUtility(`resize-y`, [["resize", "vertical"]]);
-  staticUtility(`snap-none`, [["scroll-snap-type", "none"]]);
+  staticUtility("resize-none", [["resize", "none"]]);
+  staticUtility("resize-both", [["resize", "both"]]);
+  staticUtility("resize-x", [["resize", "horizontal"]]);
+  staticUtility("resize-y", [["resize", "vertical"]]);
+  staticUtility("snap-none", [["scroll-snap-type", "none"]]);
   let snapProperties = () => atRoot([property("--tw-scroll-snap-strictness", "proximity", "*")]);
   for (let value of ["x", "y", "both"]) {
     staticUtility(`snap-${value}`, [
@@ -2389,8 +2037,8 @@ function createUtilities(theme) {
       ["scroll-snap-type", `${value} var(--tw-scroll-snap-strictness)`]
     ]);
   }
-  staticUtility(`snap-mandatory`, [snapProperties, ["--tw-scroll-snap-strictness", "mandatory"]]);
-  staticUtility(`snap-proximity`, [snapProperties, ["--tw-scroll-snap-strictness", "proximity"]]);
+  staticUtility("snap-mandatory", [snapProperties, ["--tw-scroll-snap-strictness", "mandatory"]]);
+  staticUtility("snap-proximity", [snapProperties, ["--tw-scroll-snap-strictness", "proximity"]]);
   staticUtility("snap-align-none", [["scroll-snap-align", "none"]]);
   staticUtility("snap-start", [["scroll-snap-align", "start"]]);
   staticUtility("snap-end", [["scroll-snap-align", "end"]]);
@@ -2509,6 +2157,12 @@ function createUtilities(theme) {
     handleBareValue: ({ value }) => value,
     handle: (value) => [decl("columns", value)]
   });
+  suggest("columns", () => [
+    {
+      values: Array.from({ length: 12 }, (_, i) => `${i + 1}`),
+      valueThemeKeys: ["--columns", "--width"]
+    }
+  ]);
   for (let value of ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"]) {
     staticUtility(`break-before-${value}`, [["break-before", value]]);
   }
@@ -2553,6 +2207,18 @@ function createUtilities(theme) {
     handleBareValue: ({ value }) => `repeat(${value}, minmax(0, 1fr))`,
     handle: (value) => [decl("grid-template-rows", value)]
   });
+  suggest("grid-cols", () => [
+    {
+      values: Array.from({ length: 12 }, (_, i) => `${i + 1}`),
+      valueThemeKeys: ["--grid-template-columns"]
+    }
+  ]);
+  suggest("grid-rows", () => [
+    {
+      values: Array.from({ length: 12 }, (_, i) => `${i + 1}`),
+      valueThemeKeys: ["--grid-template-rows"]
+    }
+  ]);
   staticUtility("flex-row", [["flex-direction", "row"]]);
   staticUtility("flex-row-reverse", [["flex-direction", "row-reverse"]]);
   staticUtility("flex-col", [["flex-direction", "column"]]);
@@ -2651,48 +2317,6 @@ function createUtilities(theme) {
       decl("--tw-space-y-reverse", "1")
     ])
   ]);
-  functionalUtility("divide-x", {
-    defaultValue: theme.get(["--default-border-width"]) ?? "1px",
-    themeKeys: ["--divide-width", "--border-width"],
-    handleBareValue: ({ value }) => `${value}px`,
-    handle: (value) => [
-      atRoot([property("--tw-divide-x-reverse", "0", "<number>")]),
-      rule(":where(& > :not([hidden]) ~ :not([hidden]))", [
-        decl("--tw-sort", "divide-x-width"),
-        decl("border-inline-end-width", `calc(${value} * var(--tw-divide-x-reverse))`),
-        decl("border-inline-start-width", `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`)
-      ])
-    ]
-  });
-  functionalUtility("divide-y", {
-    defaultValue: theme.get(["--default-border-width"]) ?? "1px",
-    themeKeys: ["--divide-width", "--border-width"],
-    handleBareValue: ({ value }) => `${value}px`,
-    handle: (value) => [
-      atRoot([property("--tw-divide-y-reverse", "0", "<number>")]),
-      rule(":where(& > :not([hidden]) ~ :not([hidden]))", [
-        decl("--tw-sort", "divide-y-width"),
-        decl("border-bottom-width", `calc(${value} * var(--tw-divide-y-reverse))`),
-        decl("border-top-width", `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`)
-      ])
-    ]
-  });
-  staticUtility("divide-x-reverse", [
-    () => atRoot([property("--tw-divide-x-reverse", "0", "<number>")]),
-    () => rule(":where(& > :not([hidden]) ~ :not([hidden]))", [decl("--tw-divide-x-reverse", "1")])
-  ]);
-  staticUtility("divide-y-reverse", [
-    () => atRoot([property("--tw-divide-y-reverse", "0", "<number>")]),
-    () => rule(":where(& > :not([hidden]) ~ :not([hidden]))", [decl("--tw-divide-y-reverse", "1")])
-  ]);
-  for (let value of ["solid", "dashed", "dotted", "double", "none"]) {
-    staticUtility(`divide-${value}`, [
-      () => rule(":where(& > :not([hidden]) ~ :not([hidden]))", [
-        decl("--tw-sort", "divide-style"),
-        decl("border-style", value)
-      ])
-    ]);
-  }
   colorUtility("accent", {
     themeKeys: ["--accent-color", "--color"],
     handle: (value) => [decl("accent-color", value)]
@@ -2736,33 +2360,33 @@ function createUtilities(theme) {
     staticUtility(`overscroll-x-${value}`, [["overscroll-behavior-x", value]]);
     staticUtility(`overscroll-y-${value}`, [["overscroll-behavior-y", value]]);
   }
-  staticUtility(`scroll-auto`, [["scroll-behavior", "auto"]]);
-  staticUtility(`scroll-smooth`, [["scroll-behavior", "smooth"]]);
-  staticUtility(`truncate`, [
+  staticUtility("scroll-auto", [["scroll-behavior", "auto"]]);
+  staticUtility("scroll-smooth", [["scroll-behavior", "smooth"]]);
+  staticUtility("truncate", [
     ["overflow", "hidden"],
     ["text-overflow", "ellipsis"],
     ["white-space", "nowrap"]
   ]);
-  staticUtility(`text-ellipsis`, [["text-overflow", "ellipsis"]]);
-  staticUtility(`text-clip`, [["text-overflow", "clip"]]);
-  staticUtility(`hyphens-none`, [
+  staticUtility("text-ellipsis", [["text-overflow", "ellipsis"]]);
+  staticUtility("text-clip", [["text-overflow", "clip"]]);
+  staticUtility("hyphens-none", [
     ["-webkit-hyphens", "none"],
     ["hyphens", "none"]
   ]);
-  staticUtility(`hyphens-manual`, [
+  staticUtility("hyphens-manual", [
     ["-webkit-hyphens", "manual"],
     ["hyphens", "manual"]
   ]);
-  staticUtility(`hyphens-auto`, [
+  staticUtility("hyphens-auto", [
     ["-webkit-hyphens", "auto"],
     ["hyphens", "auto"]
   ]);
-  staticUtility(`whitespace-normal`, [["white-space", "normal"]]);
-  staticUtility(`whitespace-nowrap`, [["white-space", "nowrap"]]);
-  staticUtility(`whitespace-pre`, [["white-space", "pre"]]);
-  staticUtility(`whitespace-pre-line`, [["white-space", "pre-line"]]);
-  staticUtility(`whitespace-pre-wrap`, [["white-space", "pre-wrap"]]);
-  staticUtility(`whitespace-break-spaces`, [["white-space", "break-spaces"]]);
+  staticUtility("whitespace-normal", [["white-space", "normal"]]);
+  staticUtility("whitespace-nowrap", [["white-space", "nowrap"]]);
+  staticUtility("whitespace-pre", [["white-space", "pre"]]);
+  staticUtility("whitespace-pre-line", [["white-space", "pre-line"]]);
+  staticUtility("whitespace-pre-wrap", [["white-space", "pre-wrap"]]);
+  staticUtility("whitespace-break-spaces", [["white-space", "break-spaces"]]);
   staticUtility("text-wrap", [["text-wrap", "wrap"]]);
   staticUtility("text-nowrap", [["text-wrap", "nowrap"]]);
   staticUtility("text-balance", [["text-wrap", "balance"]]);
@@ -2852,88 +2476,201 @@ function createUtilities(theme) {
     themeKeys: ["--radius"],
     handle: (value) => [decl("border-bottom-left-radius", value)]
   });
-  staticUtility("border-solid", [["border-style", "solid"]]);
-  staticUtility("border-dashed", [["border-style", "dashed"]]);
-  staticUtility("border-dotted", [["border-style", "dotted"]]);
-  staticUtility("border-double", [["border-style", "double"]]);
-  staticUtility("border-hidden", [["border-style", "hidden"]]);
-  staticUtility("border-none", [["border-style", "none"]]);
-  function borderSideUtility(classRoot, desc) {
-    utilities.functional(classRoot, (candidate) => {
-      if (candidate.negative) {
-        return;
-      }
-      if (!candidate.value) {
-        let value = theme.get(["--default-border-width"]) ?? "1px";
-        return desc.width(value);
-      }
-      if (candidate.value.kind === "arbitrary") {
-        let value = candidate.value.value;
-        let type = candidate.value.dataType ?? inferDataType(value, ["color", "line-width", "length"]);
-        switch (type) {
-          case "line-width":
-          case "length": {
-            return desc.width(value);
+  staticUtility("border-solid", [
+    ["--tw-border-style", "solid"],
+    ["border-style", "solid"]
+  ]);
+  staticUtility("border-dashed", [
+    ["--tw-border-style", "dashed"],
+    ["border-style", "dashed"]
+  ]);
+  staticUtility("border-dotted", [
+    ["--tw-border-style", "dotted"],
+    ["border-style", "dotted"]
+  ]);
+  staticUtility("border-double", [
+    ["--tw-border-style", "double"],
+    ["border-style", "double"]
+  ]);
+  staticUtility("border-hidden", [
+    ["--tw-border-style", "hidden"],
+    ["border-style", "hidden"]
+  ]);
+  staticUtility("border-none", [
+    ["--tw-border-style", "none"],
+    ["border-style", "none"]
+  ]);
+  {
+    let borderSideUtility2 = function(classRoot, desc) {
+      utilities.functional(classRoot, (candidate) => {
+        if (candidate.negative)
+          return;
+        if (!candidate.value) {
+          let value = theme.get(["--default-border-width"]) ?? "1px";
+          let decls = desc.width(value);
+          if (!decls)
+            return;
+          return [borderProperties(), decl("border-style", "var(--tw-border-style)"), ...decls];
+        }
+        if (candidate.value.kind === "arbitrary") {
+          let value = candidate.value.value;
+          let type = candidate.value.dataType ?? inferDataType(value, ["color", "line-width", "length"]);
+          switch (type) {
+            case "line-width":
+            case "length": {
+              let decls = desc.width(value);
+              if (!decls)
+                return;
+              return [borderProperties(), decl("border-style", "var(--tw-border-style)"), ...decls];
+            }
+            default: {
+              value = asColor(value, candidate.modifier, theme);
+              if (value === null)
+                return;
+              return desc.color(value);
+            }
           }
-          default: {
-            value = asColor(value, candidate.modifier, theme);
+        }
+        {
+          let value = resolveThemeColor(candidate, theme, ["--border-color", "--color"]);
+          if (value) {
             return desc.color(value);
           }
         }
-      }
-      {
-        let value = resolveThemeColor(candidate, theme, ["--border-color", "--color"]);
-        if (value) {
-          return desc.color(value);
+        {
+          let value = theme.resolve(candidate.value.value, ["--border-width"]);
+          if (value) {
+            let decls = desc.width(value);
+            if (!decls)
+              return;
+            return [borderProperties(), decl("border-style", "var(--tw-border-style)"), ...decls];
+          }
+          if (!Number.isNaN(Number(candidate.value.value))) {
+            let decls = desc.width(`${candidate.value.value}px`);
+            if (!decls)
+              return;
+            return [borderProperties(), decl("border-style", "var(--tw-border-style)"), ...decls];
+          }
+        }
+      });
+      suggest(classRoot, () => [
+        {
+          values: ["current", "transparent"],
+          valueThemeKeys: ["--border-color", "--color"],
+          modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+          modifierThemeKeys: ["--opacity"],
+          hasDefaultValue: true
+        },
+        {
+          values: [],
+          valueThemeKeys: ["--border-width"]
         }
+      ]);
+    };
+    let borderProperties = () => {
+      return atRoot([property("--tw-border-style", "solid", "<custom-ident>")]);
+    };
+    borderSideUtility2("border", {
+      width: (value) => [decl("border-width", value)],
+      color: (value) => [decl("border-color", value)]
+    });
+    borderSideUtility2("border-x", {
+      width: (value) => [decl("border-left-width", value), decl("border-right-width", value)],
+      color: (value) => [decl("border-left-color", value), decl("border-right-color", value)]
+    });
+    borderSideUtility2("border-y", {
+      width: (value) => [decl("border-top-width", value), decl("border-bottom-width", value)],
+      color: (value) => [decl("border-top-color", value), decl("border-bottom-color", value)]
+    });
+    borderSideUtility2("border-s", {
+      width: (value) => [decl("border-inline-start-width", value)],
+      color: (value) => [decl("border-inline-start-color", value)]
+    });
+    borderSideUtility2("border-e", {
+      width: (value) => [decl("border-inline-end-width", value)],
+      color: (value) => [decl("border-inline-end-color", value)]
+    });
+    borderSideUtility2("border-t", {
+      width: (value) => [decl("border-top-width", value)],
+      color: (value) => [decl("border-top-color", value)]
+    });
+    borderSideUtility2("border-r", {
+      width: (value) => [decl("border-right-width", value)],
+      color: (value) => [decl("border-right-color", value)]
+    });
+    borderSideUtility2("border-b", {
+      width: (value) => [decl("border-bottom-width", value)],
+      color: (value) => [decl("border-bottom-color", value)]
+    });
+    borderSideUtility2("border-l", {
+      width: (value) => [decl("border-left-width", value)],
+      color: (value) => [decl("border-left-color", value)]
+    });
+    functionalUtility("divide-x", {
+      defaultValue: theme.get(["--default-border-width"]) ?? "1px",
+      themeKeys: ["--divide-width", "--border-width"],
+      handleBareValue: ({ value }) => `${value}px`,
+      handle: (value) => [
+        atRoot([property("--tw-divide-x-reverse", "0", "<number>")]),
+        rule(":where(& > :not([hidden]) ~ :not([hidden]))", [
+          decl("--tw-sort", "divide-x-width"),
+          borderProperties(),
+          decl("border-style", "var(--tw-border-style)"),
+          decl("border-inline-end-width", `calc(${value} * var(--tw-divide-x-reverse))`),
+          decl(
+            "border-inline-start-width",
+            `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`
+          )
+        ])
+      ]
+    });
+    functionalUtility("divide-y", {
+      defaultValue: theme.get(["--default-border-width"]) ?? "1px",
+      themeKeys: ["--divide-width", "--border-width"],
+      handleBareValue: ({ value }) => `${value}px`,
+      handle: (value) => [
+        atRoot([property("--tw-divide-y-reverse", "0", "<number>")]),
+        rule(":where(& > :not([hidden]) ~ :not([hidden]))", [
+          decl("--tw-sort", "divide-y-width"),
+          borderProperties(),
+          decl("border-style", "var(--tw-border-style)"),
+          decl("border-bottom-width", `calc(${value} * var(--tw-divide-y-reverse))`),
+          decl("border-top-width", `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`)
+        ])
+      ]
+    });
+    suggest("divide-x", () => [
+      {
+        values: ["0", "2", "4", "8"],
+        valueThemeKeys: ["--divide-width", "--border-width"],
+        hasDefaultValue: true
       }
+    ]);
+    suggest("divide-y", () => [
       {
-        let value = theme.resolve(candidate.value.value, ["--border-width"]);
-        if (value) {
-          return desc.width(value);
-        }
-        if (!isNaN(Number(candidate.value.value))) {
-          return desc.width(`${candidate.value.value}px`);
-        }
+        values: ["0", "2", "4", "8"],
+        valueThemeKeys: ["--divide-width", "--border-width"],
+        hasDefaultValue: true
       }
-    });
+    ]);
+    staticUtility("divide-x-reverse", [
+      () => atRoot([property("--tw-divide-x-reverse", "0", "<number>")]),
+      () => rule(":where(& > :not([hidden]) ~ :not([hidden]))", [decl("--tw-divide-x-reverse", "1")])
+    ]);
+    staticUtility("divide-y-reverse", [
+      () => atRoot([property("--tw-divide-y-reverse", "0", "<number>")]),
+      () => rule(":where(& > :not([hidden]) ~ :not([hidden]))", [decl("--tw-divide-y-reverse", "1")])
+    ]);
+    for (let value of ["solid", "dashed", "dotted", "double", "none"]) {
+      staticUtility(`divide-${value}`, [
+        () => rule(":where(& > :not([hidden]) ~ :not([hidden]))", [
+          decl("--tw-sort", "divide-style"),
+          decl("--tw-border-style", value),
+          decl("border-style", value)
+        ])
+      ]);
+    }
   }
-  borderSideUtility("border", {
-    width: (value) => [decl("border-width", value)],
-    color: (value) => [decl("border-color", value)]
-  });
-  borderSideUtility("border-x", {
-    width: (value) => [decl("border-left-width", value), decl("border-right-width", value)],
-    color: (value) => [decl("border-left-color", value), decl("border-right-color", value)]
-  });
-  borderSideUtility("border-y", {
-    width: (value) => [decl("border-top-width", value), decl("border-bottom-width", value)],
-    color: (value) => [decl("border-top-color", value), decl("border-bottom-color", value)]
-  });
-  borderSideUtility("border-s", {
-    width: (value) => [decl("border-inline-start-width", value)],
-    color: (value) => [decl("border-inline-start-color", value)]
-  });
-  borderSideUtility("border-e", {
-    width: (value) => [decl("border-inline-end-width", value)],
-    color: (value) => [decl("border-inline-end-color", value)]
-  });
-  borderSideUtility("border-t", {
-    width: (value) => [decl("border-top-width", value)],
-    color: (value) => [decl("border-top-color", value)]
-  });
-  borderSideUtility("border-r", {
-    width: (value) => [decl("border-right-width", value)],
-    color: (value) => [decl("border-right-color", value)]
-  });
-  borderSideUtility("border-b", {
-    width: (value) => [decl("border-bottom-width", value)],
-    color: (value) => [decl("border-bottom-color", value)]
-  });
-  borderSideUtility("border-l", {
-    width: (value) => [decl("border-left-width", value)],
-    color: (value) => [decl("border-left-color", value)]
-  });
   staticUtility("bg-inherit", [["background-color", "inherit"]]);
   staticUtility("bg-transparent", [["background-color", "transparent"]]);
   staticUtility("bg-auto", [["background-size", "auto"]]);
@@ -2973,9 +2710,8 @@ function createUtilities(theme) {
     ]);
   }
   utilities.functional("bg", (candidate) => {
-    if (candidate.negative || !candidate.value) {
+    if (candidate.negative || !candidate.value)
       return;
-    }
     if (candidate.value.kind === "arbitrary") {
       let value = candidate.value.value;
       let type = candidate.value.dataType ?? inferDataType(value, [
@@ -3003,6 +2739,8 @@ function createUtilities(theme) {
         }
         default: {
           value = asColor(value, candidate.modifier, theme);
+          if (value === null)
+            return;
           return [decl("background-color", value)];
         }
       }
@@ -3020,6 +2758,18 @@ function createUtilities(theme) {
       }
     }
   });
+  suggest("bg", () => [
+    {
+      values: ["current", "transparent"],
+      valueThemeKeys: ["--background-color", "--color"],
+      modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ["--opacity"]
+    },
+    {
+      values: [],
+      valueThemeKeys: ["--background-image"]
+    }
+  ]);
   let gradientStopProperties = () => {
     return atRoot([
       property("--tw-gradient-from", "#0000", "<color>"),
@@ -3036,9 +2786,8 @@ function createUtilities(theme) {
   };
   function gradientStopUtility(classRoot, desc) {
     utilities.functional(classRoot, (candidate) => {
-      if (candidate.negative || !candidate.value) {
+      if (candidate.negative || !candidate.value)
         return;
-      }
       if (candidate.value.kind === "arbitrary") {
         let value = candidate.value.value;
         let type = candidate.value.dataType ?? inferDataType(value, ["color", "length", "percentage"]);
@@ -3049,6 +2798,8 @@ function createUtilities(theme) {
           }
           default: {
             value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
             return desc.color(value);
           }
         }
@@ -3068,6 +2819,18 @@ function createUtilities(theme) {
         }
       }
     });
+    suggest(classRoot, () => [
+      {
+        values: ["current", "transparent"],
+        valueThemeKeys: ["--background-color", "--color"],
+        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ["--opacity"]
+      },
+      {
+        values: Array.from({ length: 21 }, (_, index) => `${index * 5}%`),
+        valueThemeKeys: ["--gradient-color-stop-positions"]
+      }
+    ]);
   }
   gradientStopUtility("from", {
     color: (value) => [
@@ -3089,9 +2852,9 @@ function createUtilities(theme) {
       decl("--tw-gradient-via", value),
       decl(
         "--tw-gradient-via-stops",
-        `var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position)`
+        "var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position)"
       ),
-      decl("--tw-gradient-stops", `var(--tw-gradient-via-stops)`)
+      decl("--tw-gradient-stops", "var(--tw-gradient-via-stops)")
     ],
     position: (value) => [gradientStopProperties(), decl("--tw-gradient-via-position", value)]
   });
@@ -3151,25 +2914,34 @@ function createUtilities(theme) {
     staticUtility(`bg-blend-${value}`, [["background-blend-mode", value]]);
     staticUtility(`mix-blend-${value}`, [["mix-blend-mode", value]]);
   }
-  staticUtility(`mix-blend-plus-darker`, [["mix-blend-mode", "plus-darker"]]);
-  staticUtility(`mix-blend-plus-lighter`, [["mix-blend-mode", "plus-lighter"]]);
+  staticUtility("mix-blend-plus-darker", [["mix-blend-mode", "plus-darker"]]);
+  staticUtility("mix-blend-plus-lighter", [["mix-blend-mode", "plus-lighter"]]);
   utilities.functional("fill", (candidate) => {
-    if (candidate.negative || !candidate.value) {
+    if (candidate.negative || !candidate.value)
       return;
-    }
     if (candidate.value.kind === "arbitrary") {
-      return [decl("fill", asColor(candidate.value.value, candidate.modifier, theme))];
+      let value2 = asColor(candidate.value.value, candidate.modifier, theme);
+      if (value2 === null)
+        return;
+      return [decl("fill", value2)];
     }
     let value = resolveThemeColor(candidate, theme, ["--fill", "--color"]);
     if (value) {
       return [decl("fill", value)];
     }
   });
+  suggest("fill", () => [
+    {
+      values: ["current", "transparent"],
+      valueThemeKeys: ["--fill", "--color"],
+      modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ["--opacity"]
+    }
+  ]);
   staticUtility("stroke-none", [["stroke", "none"]]);
   utilities.functional("stroke", (candidate) => {
-    if (candidate.negative || !candidate.value) {
+    if (candidate.negative || !candidate.value)
       return;
-    }
     if (candidate.value.kind === "arbitrary") {
       let value = candidate.value.value;
       let type = candidate.value.dataType ?? inferDataType(value, ["color", "number", "length", "percentage"]);
@@ -3181,6 +2953,8 @@ function createUtilities(theme) {
         }
         default: {
           value = asColor(candidate.value.value, candidate.modifier, theme);
+          if (value === null)
+            return;
           return [decl("stroke", value)];
         }
       }
@@ -3195,11 +2969,23 @@ function createUtilities(theme) {
       let value = theme.resolve(candidate.value.value, ["--stroke-width"]);
       if (value) {
         return [decl("stroke-width", value)];
-      } else if (!isNaN(Number(candidate.value.value))) {
+      } else if (!Number.isNaN(Number(candidate.value.value))) {
         return [decl("stroke-width", candidate.value.value)];
       }
     }
   });
+  suggest("stroke", () => [
+    {
+      values: ["current", "transparent"],
+      valueThemeKeys: ["--stroke", "--color"],
+      modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ["--opacity"]
+    },
+    {
+      values: ["0", "1", "2", "3"],
+      valueThemeKeys: ["--stroke-width"]
+    }
+  ]);
   staticUtility("object-contain", [["object-fit", "contain"]]);
   staticUtility("object-cover", [["object-fit", "cover"]]);
   staticUtility("object-fill", [["object-fit", "fill"]]);
@@ -3278,9 +3064,8 @@ function createUtilities(theme) {
     handle: (value) => [decl("vertical-align", value)]
   });
   utilities.functional("font", (candidate) => {
-    if (candidate.negative || !candidate.value) {
+    if (candidate.negative || !candidate.value)
       return;
-    }
     if (candidate.value.kind === "arbitrary") {
       let value = candidate.value.value;
       let type = candidate.value.dataType ?? inferDataType(value, ["number", "generic-name", "family-name"]);
@@ -3348,6 +3133,26 @@ function createUtilities(theme) {
       }
     }
   });
+  suggest("font", () => [
+    {
+      values: [],
+      valueThemeKeys: ["--font-family"]
+    },
+    {
+      values: [
+        "thin",
+        "extralight",
+        "light",
+        "normal",
+        "medium",
+        "semibold",
+        "bold",
+        "extrabold",
+        "black"
+      ],
+      valueThemeKeys: ["--font-weight"]
+    }
+  ]);
   staticUtility("uppercase", [["text-transform", "uppercase"]]);
   staticUtility("lowercase", [["text-transform", "lowercase"]]);
   staticUtility("capitalize", [["text-transform", "capitalize"]]);
@@ -3372,9 +3177,8 @@ function createUtilities(theme) {
   staticUtility("decoration-auto", [["text-decoration-thickness", "auto"]]);
   staticUtility("decoration-from-font", [["text-decoration-thickness", "from-font"]]);
   utilities.functional("decoration", (candidate) => {
-    if (candidate.negative || !candidate.value) {
+    if (candidate.negative || !candidate.value)
       return;
-    }
     if (candidate.value.kind === "arbitrary") {
       let value = candidate.value.value;
       let type = candidate.value.dataType ?? inferDataType(value, ["color", "length", "percentage"]);
@@ -3385,6 +3189,8 @@ function createUtilities(theme) {
         }
         default: {
           value = asColor(value, candidate.modifier, theme);
+          if (value === null)
+            return;
           return [decl("text-decoration-color", value)];
         }
       }
@@ -3394,7 +3200,7 @@ function createUtilities(theme) {
       if (value) {
         return [decl("text-decoration-thickness", value)];
       }
-      if (!isNaN(Number(candidate.value.value))) {
+      if (!Number.isNaN(Number(candidate.value.value))) {
         return [decl("text-decoration-thickness", `${candidate.value.value}px`)];
       }
     }
@@ -3405,6 +3211,18 @@ function createUtilities(theme) {
       }
     }
   });
+  suggest("decoration", () => [
+    {
+      values: ["current", "transparent"],
+      valueThemeKeys: ["--text-decoration-color", "--color"],
+      modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ["--opacity"]
+    },
+    {
+      values: ["0", "1", "2"],
+      valueThemeKeys: ["--text-decoration-thickness"]
+    }
+  ]);
   staticUtility("animate-none", [["animation", "none"]]);
   functionalUtility("animate", {
     themeKeys: ["--animate"],
@@ -3460,14 +3278,13 @@ function createUtilities(theme) {
       ]);
     };
     utilities.functional("filter", (candidate) => {
-      if (candidate.negative) {
+      if (candidate.negative)
         return;
-      }
       if (candidate.value === null) {
         return [filterProperties(), decl("filter", cssFilterValue)];
       }
       if (candidate.value.kind === "arbitrary") {
-        return;
+        return [decl("filter", candidate.value.value)];
       }
       switch (candidate.value.value) {
         case "none":
@@ -3475,9 +3292,8 @@ function createUtilities(theme) {
       }
     });
     utilities.functional("backdrop-filter", (candidate) => {
-      if (candidate.negative) {
+      if (candidate.negative)
         return;
-      }
       if (candidate.value === null) {
         return [
           backdropFilterProperties(),
@@ -3486,7 +3302,10 @@ function createUtilities(theme) {
         ];
       }
       if (candidate.value.kind === "arbitrary") {
-        return;
+        return [
+          decl("-webkit-backdrop-filter", candidate.value.value),
+          decl("backdrop-filter", candidate.value.value)
+        ];
       }
       switch (candidate.value.value) {
         case "none":
@@ -3529,6 +3348,18 @@ function createUtilities(theme) {
         decl("backdrop-filter", cssBackdropFilterValue)
       ]
     });
+    suggest("brightness", () => [
+      {
+        values: ["0", "50", "75", "90", "95", "100", "105", "110", "125", "150", "200"],
+        valueThemeKeys: ["--brightness"]
+      }
+    ]);
+    suggest("backdrop-brightness", () => [
+      {
+        values: ["0", "50", "75", "90", "95", "100", "105", "110", "125", "150", "200"],
+        valueThemeKeys: ["--backdrop-brightness", "--brightness"]
+      }
+    ]);
     functionalUtility("contrast", {
       themeKeys: ["--contrast"],
       handleBareValue: ({ value }) => `${value}%`,
@@ -3548,6 +3379,18 @@ function createUtilities(theme) {
         decl("backdrop-filter", cssBackdropFilterValue)
       ]
     });
+    suggest("contrast", () => [
+      {
+        values: ["0", "50", "75", "100", "125", "150", "200"],
+        valueThemeKeys: ["--contrast"]
+      }
+    ]);
+    suggest("backdrop-contrast", () => [
+      {
+        values: ["0", "50", "75", "100", "125", "150", "200"],
+        valueThemeKeys: ["--backdrop-contrast", "--contrast"]
+      }
+    ]);
     functionalUtility("grayscale", {
       themeKeys: ["--grayscale"],
       handleBareValue: ({ value }) => `${value}%`,
@@ -3569,6 +3412,20 @@ function createUtilities(theme) {
         decl("backdrop-filter", cssBackdropFilterValue)
       ]
     });
+    suggest("grayscale", () => [
+      {
+        values: ["0", "25", "50", "75", "100"],
+        valueThemeKeys: ["--grayscale"],
+        hasDefaultValue: true
+      }
+    ]);
+    suggest("backdrop-grayscale", () => [
+      {
+        values: ["0", "25", "50", "75", "100"],
+        valueThemeKeys: ["--backdrop-grayscale", "--grayscale"],
+        hasDefaultValue: true
+      }
+    ]);
     functionalUtility("hue-rotate", {
       themeKeys: ["--hue-rotate"],
       handleBareValue: ({ value }) => `${value}deg`,
@@ -3588,6 +3445,18 @@ function createUtilities(theme) {
         decl("backdrop-filter", cssBackdropFilterValue)
       ]
     });
+    suggest("hue-rotate", () => [
+      {
+        values: ["0", "15", "30", "60", "90", "180"],
+        valueThemeKeys: ["--hue-rotate"]
+      }
+    ]);
+    suggest("backdrop-hue-rotate", () => [
+      {
+        values: ["0", "15", "30", "60", "90", "180"],
+        valueThemeKeys: ["--backdrop-hue-rotate", "--hue-rotate"]
+      }
+    ]);
     functionalUtility("invert", {
       themeKeys: ["--invert"],
       handleBareValue: ({ value }) => `${value}%`,
@@ -3609,6 +3478,20 @@ function createUtilities(theme) {
         decl("backdrop-filter", cssBackdropFilterValue)
       ]
     });
+    suggest("invert", () => [
+      {
+        values: ["0", "25", "50", "75", "100"],
+        valueThemeKeys: ["--invert"],
+        hasDefaultValue: true
+      }
+    ]);
+    suggest("backdrop-invert", () => [
+      {
+        values: ["0", "25", "50", "75", "100"],
+        valueThemeKeys: ["--backdrop-invert", "--invert"],
+        hasDefaultValue: true
+      }
+    ]);
     functionalUtility("saturate", {
       themeKeys: ["--saturate"],
       handleBareValue: ({ value }) => `${value}%`,
@@ -3628,6 +3511,18 @@ function createUtilities(theme) {
         decl("backdrop-filter", cssBackdropFilterValue)
       ]
     });
+    suggest("saturate", () => [
+      {
+        values: ["0", "50", "100", "150", "200"],
+        valueThemeKeys: ["--saturate"]
+      }
+    ]);
+    suggest("backdrop-saturate", () => [
+      {
+        values: ["0", "50", "100", "150", "200"],
+        valueThemeKeys: ["--backdrop-saturate", "--saturate"]
+      }
+    ]);
     functionalUtility("sepia", {
       themeKeys: ["--sepia"],
       handleBareValue: ({ value }) => `${value}%`,
@@ -3649,6 +3544,20 @@ function createUtilities(theme) {
         decl("backdrop-filter", cssBackdropFilterValue)
       ]
     });
+    suggest("sepia", () => [
+      {
+        values: ["0", "50", "100"],
+        valueThemeKeys: ["--sepia"],
+        hasDefaultValue: true
+      }
+    ]);
+    suggest("backdrop-sepia", () => [
+      {
+        values: ["0", "50", "100"],
+        valueThemeKeys: ["--backdrop-sepia", "--sepia"],
+        hasDefaultValue: true
+      }
+    ]);
     functionalUtility("drop-shadow", {
       themeKeys: ["--drop-shadow"],
       handle: (value) => [
@@ -3663,7 +3572,6 @@ function createUtilities(theme) {
     functionalUtility("backdrop-opacity", {
       themeKeys: ["--backdrop-opacity", "--opacity"],
       handleBareValue: ({ value }) => `${value}%`,
-      defaultValue: "100%",
       handle: (value) => [
         backdropFilterProperties(),
         decl("--tw-backdrop-opacity", `opacity(${value})`),
@@ -3671,6 +3579,12 @@ function createUtilities(theme) {
         decl("backdrop-filter", cssBackdropFilterValue)
       ]
     });
+    suggest("backdrop-opacity", () => [
+      {
+        values: Array.from({ length: 21 }, (_, i) => `${i * 5}`),
+        valueThemeKeys: ["--backdrop-opacity", "--opacity"]
+      }
+    ]);
   }
   {
     let defaultTimingFunction = "var(--default-transition-timing-function)";
@@ -3730,14 +3644,26 @@ function createUtilities(theme) {
         value = theme.resolve(candidate.value.fraction ?? candidate.value.value, [
           "--transition-duration"
         ]);
-        if (!value && !isNaN(Number(candidate.value.value))) {
+        if (value === null && !Number.isNaN(Number(candidate.value.value))) {
           value = `${candidate.value.value}ms`;
         }
-        if (!value)
-          return;
       }
+      if (value === null)
+        return;
       return [decl("transition-duration", value)];
     });
+    suggest("delay", () => [
+      {
+        values: ["75", "100", "150", "200", "300", "500", "700", "1000"],
+        valueThemeKeys: ["--transition-delay"]
+      }
+    ]);
+    suggest("duration", () => [
+      {
+        values: ["75", "100", "150", "200", "300", "500", "700", "1000"],
+        valueThemeKeys: ["--transition-duration"]
+      }
+    ]);
   }
   functionalUtility("ease", {
     themeKeys: ["--transition-timing-function"],
@@ -3875,61 +3801,121 @@ function createUtilities(theme) {
       ["font-variant-numeric", cssFontVariantNumericValue]
     ]);
   }
-  staticUtility("outline-none", [
-    ["outline", "2px solid transparent"],
-    ["outline-offset", "2px"]
-  ]);
-  staticUtility("outline-dashed", [["outline-style", "dashed"]]);
-  staticUtility("outline-dotted", [["outline-style", "dotted"]]);
-  staticUtility("outline-double", [["outline-style", "double"]]);
-  utilities.functional("outline", (candidate) => {
-    if (candidate.negative) {
-      return;
-    }
-    if (candidate.value === null) {
-      return [decl("outline-style", "solid")];
-    }
-    if (candidate.value.kind === "arbitrary") {
-      let value = candidate.value.value;
-      let type = candidate.value.dataType ?? inferDataType(value, ["color", "length", "number", "percentage"]);
-      switch (type) {
-        case "length":
-        case "number":
-        case "percentage": {
-          return [decl("outline-width", value)];
+  {
+    let outlineProperties = () => {
+      return atRoot([property("--tw-outline-style", "solid", "<custom-ident>")]);
+    };
+    staticUtility("outline-none", [
+      ["outline", "2px solid transparent"],
+      ["outline-offset", "2px"]
+    ]);
+    staticUtility("outline-solid", [
+      ["--tw-outline-style", "solid"],
+      ["outline-style", "solid"]
+    ]);
+    staticUtility("outline-dashed", [
+      ["--tw-outline-style", "dashed"],
+      ["outline-style", "dashed"]
+    ]);
+    staticUtility("outline-dotted", [
+      ["--tw-outline-style", "dotted"],
+      ["outline-style", "dotted"]
+    ]);
+    staticUtility("outline-double", [
+      ["--tw-outline-style", "double"],
+      ["outline-style", "double"]
+    ]);
+    utilities.functional("outline", (candidate) => {
+      if (candidate.negative)
+        return;
+      if (candidate.value === null) {
+        return [
+          outlineProperties(),
+          decl("outline-style", "var(--tw-outline-style)"),
+          decl("outline-width", "1px")
+        ];
+      }
+      if (candidate.value.kind === "arbitrary") {
+        let value = candidate.value.value;
+        let type = candidate.value.dataType ?? inferDataType(value, ["color", "length", "number", "percentage"]);
+        switch (type) {
+          case "length":
+          case "number":
+          case "percentage": {
+            return [
+              outlineProperties(),
+              decl("outline-style", "var(--tw-outline-style)"),
+              decl("outline-width", value)
+            ];
+          }
+          default: {
+            value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
+            return [decl("outline-color", value)];
+          }
         }
-        default: {
-          value = asColor(value, candidate.modifier, theme);
+      }
+      {
+        let value = resolveThemeColor(candidate, theme, ["--outline-color", "--color"]);
+        if (value) {
           return [decl("outline-color", value)];
         }
       }
-    }
-    {
-      let value = resolveThemeColor(candidate, theme, ["--outline-color", "--color"]);
-      if (value) {
-        return [decl("outline-color", value)];
+      {
+        let value = theme.resolve(candidate.value.value, ["--outline-width"]);
+        if (value) {
+          return [
+            outlineProperties(),
+            decl("outline-style", "var(--tw-outline-style)"),
+            decl("outline-width", value)
+          ];
+        } else if (!Number.isNaN(Number(candidate.value.value))) {
+          return [
+            outlineProperties(),
+            decl("outline-style", "var(--tw-outline-style)"),
+            decl("outline-width", `${candidate.value.value}px`)
+          ];
+        }
       }
-    }
-    {
-      let value = theme.resolve(candidate.value.value, ["--outline-width"]);
-      if (value) {
-        return [decl("outline-width", value)];
-      } else if (!isNaN(Number(candidate.value.value))) {
-        return [decl("outline-width", `${candidate.value.value}px`)];
+    });
+    suggest("outline", () => [
+      {
+        values: ["current", "transparent"],
+        valueThemeKeys: ["--outline-color", "--color"],
+        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ["--opacity"],
+        hasDefaultValue: true
+      },
+      {
+        values: ["0", "1", "2", "4", "8"],
+        valueThemeKeys: ["--outline-width"]
       }
-    }
-  });
-  functionalUtility("outline-offset", {
-    supportsNegative: true,
-    themeKeys: ["--outline-offset"],
-    handleBareValue: ({ value }) => `${value}px`,
-    handle: (value) => [decl("outline-offset", value)]
-  });
+    ]);
+    functionalUtility("outline-offset", {
+      supportsNegative: true,
+      themeKeys: ["--outline-offset"],
+      handleBareValue: ({ value }) => `${value}px`,
+      handle: (value) => [decl("outline-offset", value)]
+    });
+    suggest("outline-offset", () => [
+      {
+        values: ["0", "1", "2", "4", "8"],
+        valueThemeKeys: ["--outline-offset"]
+      }
+    ]);
+  }
   functionalUtility("opacity", {
     themeKeys: ["--opacity"],
     handleBareValue: ({ value }) => `${value}%`,
     handle: (value) => [decl("opacity", value)]
   });
+  suggest("opacity", () => [
+    {
+      values: Array.from({ length: 21 }, (_, i) => `${i * 5}`),
+      valueThemeKeys: ["--opacity"]
+    }
+  ]);
   staticUtility("underline-offset-auto", [["text-underline-offset", "auto"]]);
   functionalUtility("underline-offset", {
     supportsNegative: true,
@@ -3937,10 +3923,16 @@ function createUtilities(theme) {
     handleBareValue: ({ value }) => `${value}px`,
     handle: (value) => [decl("text-underline-offset", value)]
   });
+  suggest("underline-offset", () => [
+    {
+      supportsNegative: true,
+      values: ["0", "1", "2", "4", "8"],
+      valueThemeKeys: ["--text-underline-offset"]
+    }
+  ]);
   utilities.functional("text", (candidate) => {
-    if (candidate.negative || !candidate.value) {
+    if (candidate.negative || !candidate.value)
       return;
-    }
     if (candidate.value.kind === "arbitrary") {
       let value = candidate.value.value;
       let type = candidate.value.dataType ?? inferDataType(value, ["color", "length", "percentage", "absolute-size", "relative-size"]);
@@ -3960,6 +3952,8 @@ function createUtilities(theme) {
         }
         default: {
           value = asColor(value, candidate.modifier, theme);
+          if (value === null)
+            return;
           return [decl("color", value)];
         }
       }
@@ -3996,18 +3990,32 @@ function createUtilities(theme) {
       }
     }
   });
+  suggest("text", () => [
+    {
+      values: ["current", "transparent"],
+      valueThemeKeys: ["--text-color", "--color"],
+      modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ["--opacity"]
+    },
+    {
+      values: [],
+      valueThemeKeys: ["--font-size"],
+      modifiers: [],
+      modifierThemeKeys: ["--line-height"]
+    }
+  ]);
   {
     let ringShadowValue2 = function(value) {
-      return `var(--tw-ring-inset,) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color, var(--default-ring-color))`;
+      return `var(--tw-ring-inset,) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color, ${defaultRingColor})`;
     }, insetRingShadowValue2 = function(value) {
       return `inset 0 0 0 ${value} var(--tw-inset-ring-color, currentColor)`;
     };
     let cssBoxShadowValue = [
-      `var(--tw-inset-shadow)`,
-      `var(--tw-inset-ring-shadow)`,
-      `var(--tw-ring-offset-shadow)`,
-      `var(--tw-ring-shadow)`,
-      `var(--tw-shadow)`
+      "var(--tw-inset-shadow)",
+      "var(--tw-inset-ring-shadow)",
+      "var(--tw-ring-offset-shadow)",
+      "var(--tw-ring-shadow)",
+      "var(--tw-shadow)"
     ].join(", ");
     let nullShadow = "0 0 #0000";
     let boxShadowProperties = () => {
@@ -4028,12 +4036,11 @@ function createUtilities(theme) {
       ]);
     };
     utilities.functional("shadow", (candidate) => {
-      if (candidate.negative) {
+      if (candidate.negative)
         return;
-      }
       if (!candidate.value) {
         let value = theme.get(["--shadow"]);
-        if (!value)
+        if (value === null)
           return;
         return [
           boxShadowProperties(),
@@ -4048,6 +4055,8 @@ function createUtilities(theme) {
         switch (type) {
           case "color": {
             value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
             return [
               boxShadowProperties(),
               decl("--tw-shadow-color", value),
@@ -4095,13 +4104,25 @@ function createUtilities(theme) {
         }
       }
     });
+    suggest("shadow", () => [
+      {
+        values: ["current", "transparent"],
+        valueThemeKeys: ["--box-shadow-color", "--color"],
+        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ["--opacity"]
+      },
+      {
+        values: [],
+        valueThemeKeys: ["--shadow"],
+        hasDefaultValue: true
+      }
+    ]);
     utilities.functional("inset-shadow", (candidate) => {
-      if (candidate.negative) {
+      if (candidate.negative)
         return;
-      }
       if (!candidate.value) {
         let value = theme.get(["--inset-shadow"]);
-        if (!value)
+        if (value === null)
           return;
         return [
           boxShadowProperties(),
@@ -4119,6 +4140,8 @@ function createUtilities(theme) {
         switch (type) {
           case "color": {
             value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
             return [
               boxShadowProperties(),
               decl("--tw-inset-shadow-color", value),
@@ -4172,14 +4195,29 @@ function createUtilities(theme) {
         }
       }
     });
+    suggest("inset-shadow", () => [
+      {
+        values: ["current", "transparent"],
+        valueThemeKeys: ["--box-shadow-color", "--color"],
+        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ["--opacity"]
+      },
+      {
+        values: [],
+        valueThemeKeys: ["--shadow"],
+        hasDefaultValue: true
+      }
+    ]);
     staticUtility("ring-inset", [boxShadowProperties, ["--tw-ring-inset", "inset"]]);
+    let defaultRingColor = theme.get(["--default-ring-color"]) ?? "currentColor";
     utilities.functional("ring", (candidate) => {
       if (candidate.negative)
         return;
       if (!candidate.value) {
+        let value = theme.get(["--default-ring-width"]) ?? "1px";
         return [
           boxShadowProperties(),
-          decl("--tw-ring-shadow", ringShadowValue2("var(--default-ring-width)")),
+          decl("--tw-ring-shadow", ringShadowValue2(value)),
           decl("box-shadow", cssBoxShadowValue)
         ];
       }
@@ -4196,6 +4234,8 @@ function createUtilities(theme) {
           }
           default: {
             value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
             return [decl("--tw-ring-color", value)];
           }
         }
@@ -4208,7 +4248,7 @@ function createUtilities(theme) {
       }
       {
         let value = theme.resolve(candidate.value.value, ["--ring-width"]);
-        if (!value && !isNaN(Number(candidate.value.value))) {
+        if (value === null && !Number.isNaN(Number(candidate.value.value))) {
           value = `${candidate.value.value}px`;
         }
         if (value) {
@@ -4220,6 +4260,19 @@ function createUtilities(theme) {
         }
       }
     });
+    suggest("ring", () => [
+      {
+        values: ["current", "transparent"],
+        valueThemeKeys: ["--ring-color", "--color"],
+        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ["--opacity"]
+      },
+      {
+        values: ["0", "1", "2", "4", "8"],
+        valueThemeKeys: ["--ring-width"],
+        hasDefaultValue: true
+      }
+    ]);
     utilities.functional("inset-ring", (candidate) => {
       if (candidate.negative)
         return;
@@ -4243,6 +4296,8 @@ function createUtilities(theme) {
           }
           default: {
             value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
             return [decl("--tw-inset-ring-color", value)];
           }
         }
@@ -4255,7 +4310,7 @@ function createUtilities(theme) {
       }
       {
         let value = theme.resolve(candidate.value.value, ["--ring-width"]);
-        if (!value && !isNaN(Number(candidate.value.value))) {
+        if (value === null && !Number.isNaN(Number(candidate.value.value))) {
           value = `${candidate.value.value}px`;
         }
         if (value) {
@@ -4267,11 +4322,23 @@ function createUtilities(theme) {
         }
       }
     });
+    suggest("inset-ring", () => [
+      {
+        values: ["current", "transparent"],
+        valueThemeKeys: ["--ring-color", "--color"],
+        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ["--opacity"]
+      },
+      {
+        values: ["0", "1", "2", "4", "8"],
+        valueThemeKeys: ["--ring-width"],
+        hasDefaultValue: true
+      }
+    ]);
     let ringOffsetShadowValue = "var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)";
     utilities.functional("ring-offset", (candidate) => {
-      if (candidate.negative || !candidate.value) {
+      if (candidate.negative || !candidate.value)
         return;
-      }
       if (candidate.value.kind === "arbitrary") {
         let value = candidate.value.value;
         let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
@@ -4284,6 +4351,8 @@ function createUtilities(theme) {
           }
           default: {
             value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
             return [decl("--tw-ring-offset-color", value)];
           }
         }
@@ -4295,7 +4364,7 @@ function createUtilities(theme) {
             decl("--tw-ring-offset-width", value),
             decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
           ];
-        } else if (!isNaN(Number(candidate.value.value))) {
+        } else if (!Number.isNaN(Number(candidate.value.value))) {
           return [
             decl("--tw-ring-offset-width", `${candidate.value.value}px`),
             decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
@@ -4310,6 +4379,43 @@ function createUtilities(theme) {
       }
     });
   }
+  suggest("ring-offset", () => [
+    {
+      values: ["current", "transparent"],
+      valueThemeKeys: ["--ring-offset-color", "--color"],
+      modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ["--opacity"]
+    },
+    {
+      values: ["0", "1", "2", "4", "8"],
+      valueThemeKeys: ["--ring-offset-width"]
+    }
+  ]);
+  utilities.functional("@container", (candidate) => {
+    if (candidate.negative)
+      return;
+    let value = null;
+    if (candidate.value === null) {
+      value = "inline-size";
+    } else if (candidate.value.kind === "arbitrary") {
+      value = candidate.value.value;
+    } else if (candidate.value.kind === "named" && candidate.value.value === "normal") {
+      value = "normal";
+    }
+    if (value === null)
+      return;
+    if (candidate.modifier) {
+      return [decl("container-type", value), decl("container-name", candidate.modifier.value)];
+    }
+    return [decl("container-type", value)];
+  });
+  suggest("@container", () => [
+    {
+      values: ["normal"],
+      valueThemeKeys: [],
+      hasDefaultValue: false
+    }
+  ]);
   return utilities;
 }
 
@@ -4317,6 +4423,7 @@ function createUtilities(theme) {
 var Variants = class {
   compareFns = /* @__PURE__ */ new Map();
   variants = /* @__PURE__ */ new Map();
+  completions = /* @__PURE__ */ new Map();
   /**
    * Registering a group of variants should result in the same sort number for
    * all the variants. This is to ensure that the variants are applied in the
@@ -4348,7 +4455,7 @@ var Variants = class {
     return this.variants.has(name);
   }
   get(name) {
-    return this.variants.get(name)?.applyFn;
+    return this.variants.get(name);
   }
   kind(name) {
     return this.variants.get(name)?.kind;
@@ -4356,6 +4463,12 @@ var Variants = class {
   compounds(name) {
     return this.variants.get(name)?.compounds;
   }
+  suggest(name, suggestions) {
+    this.completions.set(name, suggestions);
+  }
+  getCompletions(name) {
+    return this.completions.get(name)?.() ?? [];
+  }
   compare(a, z) {
     if (a === z)
       return 0;
@@ -4386,6 +4499,9 @@ var Variants = class {
   keys() {
     return this.variants.keys();
   }
+  entries() {
+    return this.variants.entries();
+  }
   set(name, { kind, applyFn, compounds }) {
     this.lastOrder = this.nextOrder();
     this.variants.set(name, {
@@ -4421,11 +4537,21 @@ function createVariants(theme) {
     ruleNode.selector = ruleNode.selector.replace("&", groupSelector);
     ruleNode.selector = `&:is(${ruleNode.selector} *)`;
   });
+  variants.suggest("group", () => {
+    return Array.from(variants.keys()).filter((name) => {
+      return variants.get(name)?.compounds ?? false;
+    });
+  });
   variants.compound("peer", (ruleNode, variant) => {
     let peerSelector = variant.modifier ? `:where(.peer\\/${variant.modifier.value})` : ":where(.peer)";
     ruleNode.selector = ruleNode.selector.replace("&", peerSelector);
     ruleNode.selector = `&:is(${ruleNode.selector} ~ *)`;
   });
+  variants.suggest("peer", () => {
+    return Array.from(variants.keys()).filter((name) => {
+      return variants.get(name)?.compounds ?? false;
+    });
+  });
   staticVariant("first-letter", ["&::first-letter"], { compounds: false });
   staticVariant("first-line", ["&::first-line"], { compounds: false });
   staticVariant("marker", ["& *::marker", "&::marker"], { compounds: false });
@@ -4522,15 +4648,31 @@ function createVariants(theme) {
   variants.compound("has", (ruleNode) => {
     ruleNode.selector = `&:has(${ruleNode.selector.replace("&", "*")})`;
   });
+  variants.suggest("has", () => {
+    return Array.from(variants.keys()).filter((name) => {
+      return variants.get(name)?.compounds ?? false;
+    });
+  });
   variants.functional("aria", (ruleNode, variant) => {
     if (variant.value === null)
       return null;
-    if (variant.value.kind == "arbitrary") {
+    if (variant.value.kind === "arbitrary") {
       ruleNode.nodes = [rule(`&[aria-${variant.value.value}]`, ruleNode.nodes)];
     } else {
       ruleNode.nodes = [rule(`&[aria-${variant.value.value}="true"]`, ruleNode.nodes)];
     }
   });
+  variants.suggest("aria", () => [
+    "busy",
+    "checked",
+    "disabled",
+    "expanded",
+    "hidden",
+    "pressed",
+    "readonly",
+    "required",
+    "selected"
+  ]);
   variants.functional("data", (ruleNode, variant) => {
     if (variant.value === null)
       return null;
@@ -4549,147 +4691,934 @@ function createVariants(theme) {
         ruleNode.nodes = [rule(`@supports ${query}`, ruleNode.nodes)];
         return;
       }
-      if (!value.includes(":")) {
-        value = `${value}: var(--tw)`;
+      if (!value.includes(":")) {
+        value = `${value}: var(--tw)`;
+      }
+      if (value[0] !== "(" || value[value.length - 1] !== ")") {
+        value = `(${value})`;
+      }
+      ruleNode.nodes = [rule(`@supports ${value}`, ruleNode.nodes)];
+    },
+    { compounds: false }
+  );
+  staticVariant("motion-safe", ["@media (prefers-reduced-motion: no-preference)"], {
+    compounds: false
+  });
+  staticVariant("motion-reduce", ["@media (prefers-reduced-motion: reduce)"], { compounds: false });
+  staticVariant("contrast-more", ["@media (prefers-contrast: more)"], { compounds: false });
+  staticVariant("contrast-less", ["@media (prefers-contrast: less)"], { compounds: false });
+  {
+    let compareBreakpoints2 = function(a, z, direction, lookup) {
+      if (a === z)
+        return 0;
+      let aValue = lookup.get(a);
+      if (aValue === null)
+        return direction === "asc" ? -1 : 1;
+      let zValue = lookup.get(z);
+      if (zValue === null)
+        return direction === "asc" ? 1 : -1;
+      if (aValue === zValue)
+        return 0;
+      let aIsCssFunction = aValue.indexOf("(");
+      let zIsCssFunction = zValue.indexOf("(");
+      let aBucket = aIsCssFunction === -1 ? (
+        // No CSS function found, bucket by unit instead
+        aValue.replace(/[\d.]+/g, "")
+      ) : (
+        // CSS function found, bucket by function name
+        aValue.slice(0, aIsCssFunction)
+      );
+      let zBucket = zIsCssFunction === -1 ? (
+        // No CSS function found, bucket by unit
+        zValue.replace(/[\d.]+/g, "")
+      ) : (
+        // CSS function found, bucket by function name
+        zValue.slice(0, zIsCssFunction)
+      );
+      let order = (
+        // Compare by bucket name
+        aBucket.localeCompare(zBucket) || // If bucket names are the same, compare by value
+        (direction === "asc" ? parseInt(aValue) - parseInt(zValue) : parseInt(zValue) - parseInt(aValue))
+      );
+      if (Number.isNaN(order)) {
+        return aValue.localeCompare(zValue);
+      }
+      return order;
+    };
+    {
+      let breakpoints = theme.namespace("--breakpoint");
+      let resolvedBreakpoints = new DefaultMap((variant) => {
+        switch (variant.kind) {
+          case "static": {
+            return breakpoints.get(variant.root) ?? null;
+          }
+          case "functional": {
+            if (variant.value === null)
+              return null;
+            let value = null;
+            if (variant.value.kind === "arbitrary") {
+              value = variant.value.value;
+            } else if (variant.value.kind === "named") {
+              value = theme.resolve(variant.value.value, ["--breakpoint"]);
+            }
+            if (!value)
+              return null;
+            if (value.includes("var("))
+              return null;
+            return value;
+          }
+          case "arbitrary":
+          case "compound":
+            return null;
+        }
+      });
+      variants.group(
+        () => {
+          variants.functional(
+            "max",
+            (ruleNode, variant) => {
+              let value = resolvedBreakpoints.get(variant);
+              if (value === null)
+                return null;
+              ruleNode.nodes = [rule(`@media (width < ${value})`, ruleNode.nodes)];
+            },
+            { compounds: false }
+          );
+        },
+        (a, z) => compareBreakpoints2(a, z, "desc", resolvedBreakpoints)
+      );
+      variants.suggest(
+        "max",
+        () => Array.from(breakpoints.keys()).filter((key) => key !== null)
+      );
+      variants.group(
+        () => {
+          for (let [key, value] of theme.namespace("--breakpoint")) {
+            if (key === null)
+              continue;
+            variants.static(
+              key,
+              (ruleNode) => {
+                ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
+              },
+              { compounds: false }
+            );
+          }
+          variants.functional(
+            "min",
+            (ruleNode, variant) => {
+              let value = resolvedBreakpoints.get(variant);
+              if (value === null)
+                return null;
+              ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
+            },
+            { compounds: false }
+          );
+        },
+        (a, z) => compareBreakpoints2(a, z, "asc", resolvedBreakpoints)
+      );
+      variants.suggest(
+        "min",
+        () => Array.from(breakpoints.keys()).filter((key) => key !== null)
+      );
+    }
+    {
+      let widths = theme.namespace("--width");
+      let resolvedWidths = new DefaultMap((variant) => {
+        switch (variant.kind) {
+          case "functional": {
+            if (variant.value === null)
+              return null;
+            let value = null;
+            if (variant.value.kind === "arbitrary") {
+              value = variant.value.value;
+            } else if (variant.value.kind === "named") {
+              value = theme.resolve(variant.value.value, ["--width"]);
+            }
+            if (!value)
+              return null;
+            if (value.includes("var("))
+              return null;
+            return value;
+          }
+          case "static":
+          case "arbitrary":
+          case "compound":
+            return null;
+        }
+      });
+      variants.group(
+        () => {
+          variants.functional(
+            "@max",
+            (ruleNode, variant) => {
+              let value = resolvedWidths.get(variant);
+              if (value === null)
+                return null;
+              ruleNode.nodes = [
+                rule(
+                  variant.modifier ? `@container ${variant.modifier.value} (width < ${value})` : `@container (width < ${value})`,
+                  ruleNode.nodes
+                )
+              ];
+            },
+            { compounds: false }
+          );
+        },
+        (a, z) => compareBreakpoints2(a, z, "desc", resolvedWidths)
+      );
+      variants.suggest(
+        "@max",
+        () => Array.from(widths.keys()).filter((key) => key !== null)
+      );
+      variants.group(
+        () => {
+          variants.functional(
+            "@",
+            (ruleNode, variant) => {
+              let value = resolvedWidths.get(variant);
+              if (value === null)
+                return null;
+              ruleNode.nodes = [
+                rule(
+                  variant.modifier ? `@container ${variant.modifier.value} (width >= ${value})` : `@container (width >= ${value})`,
+                  ruleNode.nodes
+                )
+              ];
+            },
+            { compounds: false }
+          );
+          variants.functional(
+            "@min",
+            (ruleNode, variant) => {
+              let value = resolvedWidths.get(variant);
+              if (value === null)
+                return null;
+              ruleNode.nodes = [
+                rule(
+                  variant.modifier ? `@container ${variant.modifier.value} (width >= ${value})` : `@container (width >= ${value})`,
+                  ruleNode.nodes
+                )
+              ];
+            },
+            { compounds: false }
+          );
+        },
+        (a, z) => compareBreakpoints2(a, z, "asc", resolvedWidths)
+      );
+      variants.suggest(
+        "@min",
+        () => Array.from(widths.keys()).filter((key) => key !== null)
+      );
+    }
+  }
+  staticVariant("portrait", ["@media (orientation: portrait)"], { compounds: false });
+  staticVariant("landscape", ["@media (orientation: landscape)"], { compounds: false });
+  staticVariant("ltr", ['&:where([dir="ltr"], [dir="ltr"] *)']);
+  staticVariant("rtl", ['&:where([dir="rtl"], [dir="rtl"] *)']);
+  staticVariant("dark", ["@media (prefers-color-scheme: dark)"], { compounds: false });
+  staticVariant("print", ["@media print"], { compounds: false });
+  staticVariant("forced-colors", ["@media (forced-colors: active)"], { compounds: false });
+  return variants;
+}
+
+// src/design-system.ts
+function buildDesignSystem(theme) {
+  return {
+    theme,
+    utilities: createUtilities(theme),
+    variants: createVariants(theme),
+    candidatesToCss(classes) {
+      let result = [];
+      for (let className of classes) {
+        let { astNodes } = compileCandidates([className], this, { throwOnInvalidCandidate: false });
+        if (astNodes.length === 0) {
+          result.push(null);
+        } else {
+          result.push(toCss(astNodes));
+        }
+      }
+      return result;
+    },
+    getClassOrder(classes) {
+      return getClassOrder(this, classes);
+    },
+    getClassList() {
+      return getClassList(this);
+    },
+    getVariants() {
+      return getVariants(this);
+    }
+  };
+}
+
+// src/property-order.ts
+var property_order_default = [
+  "container-type",
+  "pointer-events",
+  "visibility",
+  "position",
+  // How do we make `inset-x-0` come before `top-0`?
+  "inset",
+  "inset-inline",
+  "inset-block",
+  "inset-inline-start",
+  "inset-inline-end",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "isolation",
+  "z-index",
+  "order",
+  "grid-column",
+  "grid-column-start",
+  "grid-column-end",
+  "grid-row",
+  "grid-row-start",
+  "grid-row-end",
+  "float",
+  "clear",
+  // How do we make `mx-0` come before `mt-0`?
+  // Idea: `margin-x` property that we compile away with a Visitor plugin?
+  "margin",
+  "margin-inline",
+  "margin-block",
+  "margin-inline-start",
+  "margin-inline-end",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "box-sizing",
+  "display",
+  "aspect-ratio",
+  "height",
+  "max-height",
+  "min-height",
+  "width",
+  "max-width",
+  "min-width",
+  "flex",
+  "flex-shrink",
+  "flex-grow",
+  "flex-basis",
+  "table-layout",
+  "caption-side",
+  "border-collapse",
+  // There's no `border-spacing-x` property, we use variables, how to sort?
+  "border-spacing",
+  // '--tw-border-spacing-x',
+  // '--tw-border-spacing-y',
+  "transform-origin",
+  // '--tw-translate-x',
+  // '--tw-translate-y',
+  "translate",
+  "rotate",
+  // '--tw-rotate',
+  "--tw-skew-x",
+  "--tw-skew-y",
+  "scale",
+  // '--tw-scale-x',
+  // '--tw-scale-y',
+  "transform",
+  "animation",
+  "cursor",
+  "touch-action",
+  "--tw-pan-x",
+  "--tw-pan-y",
+  "--tw-pinch-zoom",
+  "resize",
+  "scroll-snap-type",
+  "--tw-scroll-snap-strictness",
+  "scroll-snap-align",
+  "scroll-snap-stop",
+  "scroll-margin",
+  "scroll-margin-inline-start",
+  "scroll-margin-inline-end",
+  "scroll-margin-top",
+  "scroll-margin-right",
+  "scroll-margin-bottom",
+  "scroll-margin-left",
+  "scroll-padding",
+  "scroll-padding-inline-start",
+  "scroll-padding-inline-end",
+  "scroll-padding-top",
+  "scroll-padding-right",
+  "scroll-padding-bottom",
+  "scroll-padding-left",
+  "list-style-position",
+  "list-style-type",
+  "list-style-image",
+  "appearance",
+  "columns",
+  "break-before",
+  "break-inside",
+  "break-after",
+  "grid-auto-columns",
+  "grid-auto-flow",
+  "grid-auto-rows",
+  "grid-template-columns",
+  "grid-template-rows",
+  "flex-direction",
+  "flex-wrap",
+  "place-content",
+  "place-items",
+  "align-content",
+  "align-items",
+  "justify-content",
+  "justify-items",
+  "gap",
+  "column-gap",
+  "row-gap",
+  "--tw-space-x-reverse",
+  "--tw-space-y-reverse",
+  // Is there a more "real" property we could use for this?
+  "divide-x-width",
+  "divide-y-width",
+  "--tw-divide-y-reverse",
+  "divide-style",
+  "divide-color",
+  "--tw-divide-opacity",
+  "place-self",
+  "align-self",
+  "justify-self",
+  "overflow",
+  "overflow-x",
+  "overflow-y",
+  "overscroll-behavior",
+  "overscroll-behavior-x",
+  "overscroll-behavior-y",
+  "scroll-behavior",
+  "text-overflow",
+  "hyphens",
+  "white-space",
+  "text-wrap",
+  "overflow-wrap",
+  "work-break",
+  "border-radius",
+  "border-start-radius",
+  // Not real
+  "border-end-radius",
+  // Not real
+  "border-top-radius",
+  // Not real
+  "border-right-radius",
+  // Not real
+  "border-bottom-radius",
+  // Not real
+  "border-left-radius",
+  // Not real
+  "border-start-start-radius",
+  "border-start-end-radius",
+  "border-end-end-radius",
+  "border-end-start-radius",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-right-radius",
+  "border-bottom-left-radius",
+  "border-width",
+  "border-inline-width",
+  // Not real
+  "border-inline-start-width",
+  "border-inline-end-width",
+  "border-top-width",
+  "border-right-width",
+  "border-bottom-width",
+  "border-left-width",
+  "border-style",
+  "border-color",
+  "border-x-color",
+  // Not real
+  "border-y-color",
+  // Not real
+  "border-inline-start-color",
+  "border-inline-end-color",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "--tw-border-opacity",
+  "background-color",
+  "--tw-bg-opacity",
+  "background-image",
+  "--tw-gradient-stops",
+  "--tw-gradient-via-stops",
+  "--tw-gradient-from",
+  "--tw-gradient-from-position",
+  "--tw-gradient-via",
+  "--tw-gradient-via-position",
+  "--tw-gradient-to",
+  "--tw-gradient-to-position",
+  "box-decoration-break",
+  "background-size",
+  "background-attachment",
+  "background-clip",
+  "background-position",
+  "background-repeat",
+  "background-origin",
+  "fill",
+  "stroke",
+  "stroke-width",
+  "object-fit",
+  "object-position",
+  "padding",
+  "padding-inline",
+  "padding-block",
+  "padding-inline-start",
+  "padding-inline-end",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "text-align",
+  "text-indent",
+  "vertical-align",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "text-transform",
+  "font-style",
+  "font-variant-numeric",
+  "line-height",
+  "letter-spacing",
+  "color",
+  "--tw-text-opacity",
+  "text-decoration-line",
+  "text-decoration-color",
+  "text-decoration-style",
+  "text-decoration-thickness",
+  "text-underline-offset",
+  "-webkit-font-smoothing",
+  "placeholder-color",
+  // Not real
+  "--tw-placeholder-opacity",
+  "caret-color",
+  "accent-color",
+  "opacity",
+  "background-blend-mode",
+  "mix-blend-mode",
+  "box-shadow",
+  "--tw-shadow",
+  "--tw-shadow-color",
+  "--tw-ring-shadow",
+  "--tw-ring-color",
+  "--tw-inset-shadow",
+  "--tw-inset-shadow-color",
+  "--tw-inset-ring-shadow",
+  "--tw-inset-ring-color",
+  "--tw-ring-opacity",
+  "--tw-ring-offset-width",
+  "--tw-ring-offset-color",
+  "outline",
+  "outline-width",
+  "outline-offset",
+  "outline-color",
+  "--tw-blur",
+  "--tw-brightness",
+  "--tw-contast",
+  "--tw-drop-shadow",
+  "--tw-grayscale",
+  "--tw-hue-rotate",
+  "--tw-invert",
+  "--tw-saturate",
+  "--tw-sepia",
+  "filter",
+  "--tw-backdrop-blur",
+  "--tw-backdrop-brightness",
+  "--tw-backdrop-contast",
+  "--tw-backdrop-grayscale",
+  "--tw-backdrop-hue-rotate",
+  "--tw-backdrop-invert",
+  "--tw-backdrop-opacity",
+  "--tw-backdrop-saturate",
+  "--tw-backdrop-sepia",
+  "backdrop-filter",
+  "transition-property",
+  "transition-delay",
+  "transition-duration",
+  "transition-timing-function",
+  "will-change",
+  "contain",
+  "content",
+  "forced-color-adjust"
+];
+
+// src/utils/escape.ts
+function escape(value) {
+  if (arguments.length == 0) {
+    throw new TypeError("`CSS.escape` requires an argument.");
+  }
+  var string = String(value);
+  var length = string.length;
+  var index = -1;
+  var codeUnit;
+  var result = "";
+  var firstCodeUnit = string.charCodeAt(0);
+  if (
+    // If the character is the first character and is a `-` (U+002D), and
+    // there is no second character, […]
+    length == 1 && firstCodeUnit == 45
+  ) {
+    return "\\" + string;
+  }
+  while (++index < length) {
+    codeUnit = string.charCodeAt(index);
+    if (codeUnit == 0) {
+      result += "\uFFFD";
+      continue;
+    }
+    if (
+      // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+      // U+007F, […]
+      codeUnit >= 1 && codeUnit <= 31 || codeUnit == 127 || // If the character is the first character and is in the range [0-9]
+      // (U+0030 to U+0039), […]
+      index == 0 && codeUnit >= 48 && codeUnit <= 57 || // If the character is the second character and is in the range [0-9]
+      // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+      index == 1 && codeUnit >= 48 && codeUnit <= 57 && firstCodeUnit == 45
+    ) {
+      result += "\\" + codeUnit.toString(16) + " ";
+      continue;
+    }
+    if (codeUnit >= 128 || codeUnit == 45 || codeUnit == 95 || codeUnit >= 48 && codeUnit <= 57 || codeUnit >= 65 && codeUnit <= 90 || codeUnit >= 97 && codeUnit <= 122) {
+      result += string.charAt(index);
+      continue;
+    }
+    result += "\\" + string.charAt(index);
+  }
+  return result;
+}
+
+// src/compile.ts
+function compileCandidates(rawCandidates, designSystem, { throwOnInvalidCandidate = false } = {}) {
+  rawCandidates.sort();
+  let nodeSorting = /* @__PURE__ */ new Map();
+  let astNodes = [];
+  let parsedVariants = new DefaultMap((variant, map) => {
+    return parseVariant(variant, designSystem.variants, map);
+  });
+  let candidates = /* @__PURE__ */ new Map();
+  for (let rawCandidate of rawCandidates) {
+    let candidate = parseCandidate(rawCandidate, designSystem.utilities, parsedVariants);
+    if (candidate === null) {
+      if (throwOnInvalidCandidate) {
+        throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
+      }
+      continue;
+    }
+    candidates.set(candidate, rawCandidate);
+  }
+  let variants = Array.from(parsedVariants.values()).sort((a, z) => {
+    return designSystem.variants.compare(a, z);
+  });
+  next:
+    for (let [candidate, rawCandidate] of candidates) {
+      let nodes = [];
+      if (candidate.kind === "arbitrary") {
+        let compileFn = designSystem.utilities.getArbitrary();
+        let compiledNodes = compileFn(candidate);
+        if (compiledNodes === void 0) {
+          if (throwOnInvalidCandidate) {
+            throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
+          }
+          continue next;
+        }
+        nodes = compiledNodes;
+      } else if (candidate.kind === "static" || candidate.kind === "functional") {
+        let { compileFn } = designSystem.utilities.get(candidate.root);
+        let compiledNodes = compileFn(candidate);
+        if (compiledNodes === void 0) {
+          if (throwOnInvalidCandidate) {
+            throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
+          }
+          continue next;
+        }
+        nodes = compiledNodes;
+      }
+      let propertySort = getPropertySort(nodes);
+      if (candidate.important) {
+        applyImportant(nodes);
+      }
+      let node = {
+        kind: "rule",
+        selector: `.${escape(rawCandidate)}`,
+        nodes
+      };
+      let variantOrder = 0n;
+      for (let variant of candidate.variants) {
+        let result = applyVariant(node, variant, designSystem.variants);
+        if (result === null) {
+          if (throwOnInvalidCandidate) {
+            throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
+          }
+          continue next;
+        }
+        variantOrder |= 1n << BigInt(variants.indexOf(variant));
+      }
+      nodeSorting.set(node, {
+        properties: propertySort,
+        variants: variantOrder,
+        candidate: rawCandidate
+      });
+      astNodes.push(node);
+    }
+  astNodes.sort((a, z) => {
+    let aSorting = nodeSorting.get(a);
+    let zSorting = nodeSorting.get(z);
+    if (aSorting.variants - zSorting.variants !== 0n) {
+      return Number(aSorting.variants - zSorting.variants);
+    }
+    let offset = 0;
+    while (aSorting.properties.length < offset && zSorting.properties.length < offset && aSorting.properties[offset] === zSorting.properties[offset]) {
+      offset += 1;
+    }
+    return (
+      // Sort by lowest property index first
+      (aSorting.properties[offset] ?? Infinity) - (zSorting.properties[offset] ?? Infinity) || // Sort by most properties first, then by least properties
+      zSorting.properties.length - aSorting.properties.length
+    );
+  });
+  return {
+    astNodes,
+    nodeSorting
+  };
+}
+function applyVariant(node, variant, variants) {
+  if (variant.kind === "arbitrary") {
+    node.nodes = [rule(variant.selector, node.nodes)];
+    return;
+  }
+  let { applyFn } = variants.get(variant.root);
+  if (variant.kind === "compound") {
+    let result2 = applyVariant(node, variant.variant, variants);
+    if (result2 === null)
+      return null;
+    for (let child of node.nodes) {
+      if (child.kind !== "rule")
+        return null;
+      let result3 = applyFn(child, variant);
+      if (result3 === null)
+        return null;
+    }
+    return;
+  }
+  let result = applyFn(node, variant);
+  if (result === null)
+    return null;
+}
+function applyImportant(ast) {
+  for (let node of ast) {
+    if (node.kind === "rule" && node.selector === "@at-root") {
+      continue;
+    }
+    if (node.kind === "declaration") {
+      node.important = true;
+    } else if (node.kind === "rule") {
+      applyImportant(node.nodes);
+    }
+  }
+}
+function getPropertySort(nodes) {
+  let propertySort = /* @__PURE__ */ new Set();
+  let q = nodes.slice();
+  while (q.length > 0) {
+    let node = q.shift();
+    if (node.kind === "declaration") {
+      if (node.property === "--tw-sort") {
+        let idx2 = property_order_default.indexOf(node.value);
+        if (idx2 !== -1) {
+          propertySort.add(idx2);
+          break;
+        }
+      }
+      let idx = property_order_default.indexOf(node.property);
+      if (idx !== -1)
+        propertySort.add(idx);
+    } else if (node.kind === "rule") {
+      if (node.selector === "@at-root")
+        continue;
+      for (let child of node.nodes) {
+        q.push(child);
+      }
+    }
+  }
+  return Array.from(propertySort).sort((a, z) => a - z);
+}
+
+// src/css-parser.ts
+function parse(input) {
+  let ast = [];
+  let licenseComments = [];
+  let stack = [];
+  let parent = null;
+  let node = null;
+  let current = "";
+  let closingBracketStack = "";
+  for (let i = 0; i < input.length; i++) {
+    let char = input[i];
+    if (char === "\\") {
+      current += input.slice(i, i + 2);
+      i += 1;
+    } else if (char === "/" && input[i + 1] === "*") {
+      let start = i;
+      for (let j = i + 2; j < input.length; j++) {
+        if (input[j] === "\\") {
+          j += 1;
+        } else if (input[j] === "*" && input[j + 1] === "/") {
+          i = j + 1;
+          break;
+        }
+      }
+      let commentString = input.slice(start, i + 1);
+      if (commentString[2] === "!") {
+        licenseComments.push(comment(commentString.slice(2, -2)));
+      }
+    } else if (char === '"' || char === "'") {
+      let start = i;
+      for (let j = i + 1; j < input.length; j++) {
+        if (input[j] === "\\") {
+          j += 1;
+        } else if (input[j] === char) {
+          i = j;
+          break;
+        } else if (input[j] === ";" && input[j + 1] === "\n") {
+          throw new Error(`Unterminated string: ${input.slice(start, j + 1) + char}`);
+        } else if (input[j] === "\n") {
+          throw new Error(`Unterminated string: ${input.slice(start, j) + char}`);
+        }
+      }
+      current += input.slice(start, i + 1);
+    } else if ((char === " " || char === "\n" || char === "	") && (input[i + 1] === " " || input[i + 1] === "\n" || input[i + 1] === "	")) {
+      continue;
+    } else if (char === "-" && input[i + 1] === "-" && current.length === 0) {
+      let closingBracketStack2 = "";
+      let start = i;
+      let colonIdx = -1;
+      for (let j = i + 2; j < input.length; j++) {
+        if (input[j] === "\\") {
+          j += 1;
+        } else if (input[j] === "/" && input[j + 1] === "*") {
+          for (let k = j + 2; k < input.length; k++) {
+            if (input[k] === "\\") {
+              k += 1;
+            } else if (input[k] === "*" && input[k + 1] === "/") {
+              j = k + 1;
+              break;
+            }
+          }
+        } else if (colonIdx === -1 && input[j] === ":") {
+          colonIdx = current.length + j - start;
+        } else if (input[j] === ";" && closingBracketStack2.length === 0) {
+          current += input.slice(start, j);
+          i = j;
+          break;
+        } else if (input[j] === "(") {
+          closingBracketStack2 += ")";
+        } else if (input[j] === "[") {
+          closingBracketStack2 += "]";
+        } else if (input[j] === "{") {
+          closingBracketStack2 += "}";
+        } else if ((input[j] === "}" || input.length - 1 === j) && closingBracketStack2.length === 0) {
+          i = j - 1;
+          current += input.slice(start, j);
+          break;
+        } else if (input[j] === ")" || input[j] === "]" || input[j] === "}") {
+          if (closingBracketStack2.length > 0 && input[j] === closingBracketStack2[closingBracketStack2.length - 1]) {
+            closingBracketStack2 = closingBracketStack2.slice(0, -1);
+          }
+        }
+      }
+      let declaration = parseDeclaration(current, colonIdx);
+      if (parent) {
+        parent.nodes.push(declaration);
+      } else {
+        ast.push(declaration);
       }
-      if (value[0] !== "(" || value[value.length - 1] !== ")") {
-        value = `(${value})`;
+      current = "";
+    } else if (char === ";" && current[0] === "@") {
+      node = rule(current, []);
+      if (parent) {
+        parent.nodes.push(node);
+      } else {
+        ast.push(node);
       }
-      ruleNode.nodes = [rule(`@supports ${value}`, ruleNode.nodes)];
-    },
-    { compounds: false }
-  );
-  staticVariant("motion-safe", ["@media (prefers-reduced-motion: no-preference)"], {
-    compounds: false
-  });
-  staticVariant("motion-reduce", ["@media (prefers-reduced-motion: reduce)"], { compounds: false });
-  staticVariant("contrast-more", ["@media (prefers-contrast: more)"], { compounds: false });
-  staticVariant("contrast-less", ["@media (prefers-contrast: less)"], { compounds: false });
-  {
-    let compareBreakpoints2 = function(a, z, direction) {
-      if (a === z)
-        return 0;
-      let aValue = resolvedBreakpoints.get(a);
-      if (aValue === null)
-        return direction === "asc" ? -1 : 1;
-      let zValue = resolvedBreakpoints.get(z);
-      if (zValue === null)
-        return direction === "asc" ? 1 : -1;
-      if (aValue === zValue)
-        return 0;
-      let aIsCssFunction = aValue.indexOf("(");
-      let zIsCssFunction = zValue.indexOf("(");
-      let aBucket = aIsCssFunction === -1 ? (
-        // No CSS function found, bucket by unit instead
-        aValue.replace(/[\d.]+/g, "")
-      ) : (
-        // CSS function found, bucket by function name
-        aValue.slice(0, aIsCssFunction)
-      );
-      let zBucket = zIsCssFunction === -1 ? (
-        // No CSS function found, bucket by unit
-        zValue.replace(/[\d.]+/g, "")
-      ) : (
-        // CSS function found, bucket by function name
-        zValue.slice(0, zIsCssFunction)
-      );
-      let order = (
-        // Compare by bucket name
-        aBucket.localeCompare(zBucket) || // If bucket names are the same, compare by value
-        (direction === "asc" ? parseInt(aValue) - parseInt(zValue) : parseInt(zValue) - parseInt(aValue))
-      );
-      if (isNaN(order)) {
-        return aValue.localeCompare(zValue);
+      current = "";
+      node = null;
+    } else if (char === ";") {
+      let declaration = parseDeclaration(current);
+      if (parent) {
+        parent.nodes.push(declaration);
+      } else {
+        ast.push(declaration);
       }
-      return order;
-    };
-    let breakpoints = theme.namespace("--breakpoint");
-    let resolvedBreakpoints = new DefaultMap((variant) => {
-      switch (variant.kind) {
-        case "static": {
-          return breakpoints.get(variant.root) ?? null;
-        }
-        case "functional": {
-          let value = null;
-          if (variant.value.kind === "arbitrary") {
-            value = variant.value.value;
-          } else if (variant.value.kind === "named") {
-            value = theme.resolve(variant.value.value, ["--breakpoint"]);
-          }
-          if (!value) {
-            return null;
+      current = "";
+    } else if (char === "{") {
+      closingBracketStack += "}";
+      node = rule(current.trim(), []);
+      if (parent) {
+        parent.nodes.push(node);
+      }
+      stack.push(parent);
+      parent = node;
+      current = "";
+      node = null;
+    } else if (char === "}") {
+      if (closingBracketStack === "") {
+        throw new Error("Missing opening {");
+      }
+      closingBracketStack = closingBracketStack.slice(0, -1);
+      if (current.length > 0) {
+        if (current[0] === "@") {
+          node = rule(current.trim(), []);
+          if (parent) {
+            parent.nodes.push(node);
+          } else {
+            ast.push(node);
           }
-          if (value.includes("var(")) {
-            return null;
+          current = "";
+          node = null;
+        } else {
+          let colonIdx = current.indexOf(":");
+          if (parent) {
+            let importantIdx = current.indexOf("!important", colonIdx + 1);
+            parent.nodes.push({
+              kind: "declaration",
+              property: current.slice(0, colonIdx).trim(),
+              value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
+              important: importantIdx !== -1
+            });
           }
-          return value;
         }
-        case "arbitrary":
-        case "compound":
-          return null;
       }
-    });
-    variants.group(
-      () => {
-        variants.functional(
-          "max",
-          (ruleNode, variant) => {
-            let value = resolvedBreakpoints.get(variant);
-            if (value === null)
-              return null;
-            ruleNode.nodes = [rule(`@media (width < ${value})`, ruleNode.nodes)];
-          },
-          { compounds: false }
-        );
-      },
-      (a, z) => compareBreakpoints2(a, z, "desc")
-    );
-    variants.group(
-      () => {
-        for (let [key, value] of theme.namespace("--breakpoint")) {
-          if (key === null)
-            continue;
-          variants.static(
-            key,
-            (ruleNode) => {
-              ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
-            },
-            { compounds: false }
-          );
-        }
-        variants.functional(
-          "min",
-          (ruleNode, variant) => {
-            let value = resolvedBreakpoints.get(variant);
-            if (value === null)
-              return null;
-            ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
-          },
-          { compounds: false }
-        );
-      },
-      (a, z) => compareBreakpoints2(a, z, "asc")
-    );
+      let grandParent = stack.pop() ?? null;
+      if (grandParent === null && parent) {
+        ast.push(parent);
+      }
+      parent = grandParent;
+      current = "";
+      node = null;
+    } else {
+      if (current.length === 0 && (char === " " || char === "\n" || char === "	")) {
+        continue;
+      }
+      current += char;
+    }
   }
-  staticVariant("portrait", ["@media (orientation: portrait)"], { compounds: false });
-  staticVariant("landscape", ["@media (orientation: landscape)"], { compounds: false });
-  staticVariant("ltr", ['&:where([dir="ltr"], [dir="ltr"] *)']);
-  staticVariant("rtl", ['&:where([dir="rtl"], [dir="rtl"] *)']);
-  staticVariant("dark", ["&:where(.dark, .dark *)"], { compounds: false });
-  staticVariant("print", ["@media print"], { compounds: false });
-  staticVariant("forced-colors", ["@media (forced-colors: active)"], { compounds: false });
-  return variants;
+  if (closingBracketStack.length > 0 && parent) {
+    throw new Error(`Missing closing } at ${parent.selector}`);
+  }
+  if (licenseComments.length > 0) {
+    return licenseComments.concat(ast);
+  }
+  return ast;
 }
-
-// src/design-system.ts
-function buildDesignSystem(theme) {
+function parseDeclaration(current, colonIdx = current.indexOf(":")) {
+  let importantIdx = current.indexOf("!important", colonIdx + 1);
   return {
-    theme,
-    utilities: createUtilities(theme),
-    variants: createVariants(theme),
-    getClassOrder(classes) {
-      return getClassOrder(this, classes);
-    }
+    kind: "declaration",
+    property: current.slice(0, colonIdx).trim(),
+    value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
+    important: importantIdx !== -1
   };
 }
 
@@ -4715,6 +5644,21 @@ var Theme = class {
       this.values.set(key, value);
     }
   }
+  keysInNamespaces(themeKeys) {
+    let keys = [];
+    for (let prefix of themeKeys) {
+      let namespace = `${prefix}-`;
+      for (let key of this.values.keys()) {
+        if (key.startsWith(namespace)) {
+          if (key.indexOf("--", 2) !== -1) {
+            continue;
+          }
+          keys.push(key.slice(namespace.length));
+        }
+      }
+    }
+    return keys;
+  }
   get(themeKeys) {
     for (let key of themeKeys) {
       let value = this.values.get(key);
@@ -4777,53 +5721,6 @@ var Theme = class {
 };
 
 // src/index.ts
-function toCss(ast) {
-  let atRoots = [];
-  return ast.map(function stringify(node) {
-    let css = "";
-    if (node.kind === "rule") {
-      if (node.selector === "@at-root") {
-        for (let child of node.nodes) {
-          atRoots.push(stringify(child));
-        }
-        return css;
-      }
-      if (node.selector[0] === "@" && node.nodes.length === 0) {
-        return `${node.selector};`;
-      }
-      css += `${node.selector}{`;
-      for (let child of node.nodes) {
-        css += stringify(child);
-      }
-      css += "}";
-    } else if (node.kind === "comment") {
-      css += `/*${node.value}*/
-`;
-    } else if (node.property !== "--tw-sort" && node.value !== void 0 && node.value !== null) {
-      css += `${node.property}:${node.value}${node.important ? "!important" : ""};`;
-    }
-    return css;
-  }).concat(atRoots).join("\n");
-}
-function optimizeCss(input, { file = "input.css", minify = false } = {}) {
-  return lightningcss.transform({
-    filename: file,
-    code: Buffer.from(input),
-    minify,
-    sourceMap: false,
-    drafts: {
-      customMedia: true
-    },
-    nonStandard: {
-      deepSelectorCombinator: true
-    },
-    include: lightningcss.Features.Nesting,
-    exclude: lightningcss.Features.LogicalProperties,
-    targets: {
-      safari: 16 << 16 | 4 << 8
-    }
-  }).code.toString();
-}
 function compile(css, rawCandidates) {
   let ast = parse(css);
   {
@@ -4884,7 +5781,7 @@ function compile(css, rawCandidates) {
   let designSystem = buildDesignSystem(theme);
   walk(ast, (node, { replaceWith }) => {
     if (node.kind === "rule" && node.selector === "@tailwind utilities") {
-      replaceWith(parse2(rawCandidates, designSystem).astNodes);
+      replaceWith(compileCandidates(rawCandidates, designSystem).astNodes);
       return false;
     }
   });
@@ -4896,7 +5793,7 @@ function compile(css, rawCandidates) {
           /* Ignore `@apply ` when parsing the selector */
         ).split(/\s+/g);
         {
-          let candidateAst = parse2(candidates, designSystem, {
+          let candidateAst = compileCandidates(candidates, designSystem, {
             throwOnInvalidCandidate: true
           }).astNodes;
           let newNodes = [];
@@ -4923,7 +5820,27 @@ function compile(css, rawCandidates) {
   }
   return toCss(ast);
 }
-function loadDesignSystem(css) {
+function optimizeCss(input, { file = "input.css", minify = false } = {}) {
+  return lightningcss.transform({
+    filename: file,
+    code: Buffer.from(input),
+    minify,
+    sourceMap: false,
+    drafts: {
+      customMedia: true
+    },
+    nonStandard: {
+      deepSelectorCombinator: true
+    },
+    include: lightningcss.Features.Nesting,
+    exclude: lightningcss.Features.LogicalProperties,
+    targets: {
+      safari: 16 << 16 | 4 << 8
+    },
+    errorRecovery: true
+  }).code.toString();
+}
+function __unstable__loadDesignSystem(css) {
   let theme = new Theme();
   let ast = parse(css);
   walk(ast, (node) => {
@@ -4942,6 +5859,6 @@ function loadDesignSystem(css) {
   return buildDesignSystem(theme);
 }
 
+exports.__unstable__loadDesignSystem = __unstable__loadDesignSystem;
 exports.compile = compile;
-exports.loadDesignSystem = loadDesignSystem;
 exports.optimizeCss = optimizeCss;