tailwindcss 0.0.0-oxide.2 → 0.0.0-oxide.4

package/dist/{chunk-VA4PAOBV.mjs → chunk-BU3RKWVW.mjs}

@@ -9,75 +9,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // package.json
-var version = "0.0.0-oxide.2";
-var package_default = {
-  name: "tailwindcss",
-  version,
-  description: "A utility-first CSS framework for rapidly building custom user interfaces.",
-  license: "MIT",
-  repository: "https://github.com/tailwindlabs/tailwindcss.git",
-  bugs: "https://github.com/tailwindlabs/tailwindcss/issues",
-  homepage: "https://tailwindcss.com",
-  scripts: {
-    lint: "tsc --noEmit",
-    build: "tsup-node --env.NODE_ENV production",
-    dev: "tsup-node --env.NODE_ENV development --watch",
-    "test:ui": "playwright test"
-  },
-  bin: {
-    tailwindcss: "./dist/cli.js"
-  },
-  exports: {
-    ".": {
-      style: "./index.css",
-      types: "./src/index.ts",
-      require: "./dist/lib.js",
-      import: "./src/index.ts"
-    },
-    "./package.json": "./package.json",
-    "./index.css": "./index.css",
-    "./preflight.css": "./preflight.css",
-    "./theme.css": "./theme.css",
-    "./utilities.css": "./utilities.css"
-  },
-  publishConfig: {
-    exports: {
-      ".": {
-        types: "./dist/lib.d.mts",
-        style: "./index.css",
-        require: "./dist/lib.js",
-        import: "./dist/lib.mjs"
-      },
-      "./package.json": "./package.json",
-      "./index.css": "./index.css",
-      "./preflight.css": "./preflight.css",
-      "./theme.css": "./theme.css",
-      "./utilities.css": "./utilities.css"
-    }
-  },
-  style: "index.css",
-  files: [
-    "dist",
-    "index.css",
-    "preflight.css",
-    "theme.css",
-    "utilities.css"
-  ],
-  dependencies: {
-    "@parcel/watcher": "^2.4.1",
-    lightningcss: "^1.24.0",
-    mri: "^1.2.0",
-    picocolors: "^1.0.0",
-    postcss: "8.4.24",
-    "postcss-import": "^16.0.0"
-  },
-  devDependencies: {
-    "@tailwindcss/oxide": "workspace:^",
-    "@types/node": "^20.10.8",
-    "@types/postcss-import": "^14.0.3",
-    "fast-glob": "^3.3.2"
-  }
-};
+var version = "0.0.0-oxide.4";
 
 // src/ast.ts
 function rule(selector, nodes) {
@@ -117,6 +49,34 @@ function walk(ast, visit) {
     }
   }
 }
+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");
+}
 
 // src/utils/math-operators.ts
 var mathFunctions = [
@@ -274,105 +234,6 @@ 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);
-    }
-  }
-  return [root, value];
-}
-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
-    };
-  }
-  {
-    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();
@@ -404,20 +265,24 @@ function parseCandidate(input, utilities, parsedVariants) {
     state.important = true;
     base = base.slice(0, -1);
   }
-  if (base[0] === "[" && base[base.length - 1] === "]") {
-    let charCode = base.charCodeAt(1);
+  if (base[0] === "[") {
+    let [baseWithoutModifier, modifierSegment2 = null] = segment(base, "/");
+    if (baseWithoutModifier[baseWithoutModifier.length - 1] !== "]")
+      return null;
+    let charCode = baseWithoutModifier.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)
+    baseWithoutModifier = baseWithoutModifier.slice(1, -1);
+    let idx = baseWithoutModifier.indexOf(":");
+    if (idx === -1 || idx === 0 || idx === baseWithoutModifier.length - 1)
       return null;
-    let property2 = base.slice(0, idx);
-    let value2 = decodeArbitraryValue(base.slice(idx + 1));
+    let property2 = baseWithoutModifier.slice(0, idx);
+    let value2 = decodeArbitraryValue(baseWithoutModifier.slice(idx + 1));
     return {
       kind: "arbitrary",
       property: property2,
       value: value2,
+      modifier: modifierSegment2 === null ? null : parseModifier(modifierSegment2),
       variants: parsedCandidateVariants,
       important: state.important
     };
@@ -427,6 +292,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);
@@ -444,22 +315,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;
@@ -467,33 +352,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;
@@ -501,21 +379,218 @@ 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/utils/default-map.ts
+var DefaultMap = class extends Map {
+  constructor(factory) {
+    super();
+    this.factory = factory;
+  }
+  get(key) {
+    let value = super.get(key);
+    if (value === void 0) {
+      value = this.factory(key, this);
+      this.set(key, value);
+    }
+    return value;
+  }
+};
+
+// src/intellisense.ts
+function getClassList(design) {
+  let list = [];
+  for (let [utility, fn] of design.utilities.entries()) {
+    if (typeof utility !== "string") {
+      continue;
+    }
+    if (fn.kind === "static") {
+      list.push([utility, { modifiers: [] }]);
+      continue;
+    }
+    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 }]);
+        }
+      }
+    }
+  }
+  list.sort((a, b) => a[0].localeCompare(b[0]));
+  return list;
+}
+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 [];
+      }
+      let selectors3 = [];
+      for (let child of node.nodes) {
+        if (child.kind === "rule") {
+          selectors3.push(child.selector);
+        }
+      }
+      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;
+      }
+      case "functional": {
+        list.push({
+          name: root,
+          values,
+          isArbitrary: true,
+          hasDash: true,
+          selectors: selectors2
+        });
+        break;
+      }
+      case "compound": {
+        list.push({
+          name: root,
+          values,
+          isArbitrary: true,
+          hasDash: true,
+          selectors: selectors2
+        });
+        break;
+      }
+    }
+  }
+  return list;
 }
 
 // src/sort.ts
@@ -925,14 +1000,19 @@ function replaceShadowColors(input, replacement) {
 }
 
 // src/utilities.ts
+var ARBITRARY_VARIANT = Symbol("ARBITRARY_VARIANT");
 var Utilities = class {
   utilities = /* @__PURE__ */ new Map();
+  completions = /* @__PURE__ */ new Map();
   static(name, compileFn) {
     this.set(name, { kind: "static", compileFn });
   }
   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);
   }
@@ -942,9 +1022,21 @@ 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();
   }
+  entries() {
+    return this.utilities.entries();
+  }
+  getArbitrary() {
+    return this.get(ARBITRARY_VARIANT).compileFn;
+  }
   set(name, { kind, compileFn }) {
     this.utilities.set(name, {
       kind,
@@ -968,19 +1060,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);
   }
@@ -988,6 +1078,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) {
@@ -1013,11 +1106,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]);
       });
@@ -1034,17 +1161,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) => {
@@ -1058,11 +1192,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"],
@@ -1219,6 +1361,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"]]);
@@ -1228,6 +1377,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"],
@@ -1251,6 +1407,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"],
@@ -1274,6 +1448,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"]]);
@@ -1327,6 +1519,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"]]);
@@ -1498,6 +1696,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", {
@@ -1574,7 +1786,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) => {
@@ -1592,7 +1804,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) => {
@@ -1610,7 +1822,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", {
@@ -1619,6 +1831,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,
@@ -1651,6 +1870,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,
@@ -1683,6 +1923,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))"]
@@ -1768,11 +2029,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}`, [
@@ -1780,8 +2041,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"]]);
@@ -1900,6 +2161,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]]);
   }
@@ -1944,6 +2211,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"]]);
@@ -2042,48 +2321,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)]
@@ -2127,33 +2364,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"]]);
@@ -2243,88 +2480,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 = 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", () => [
       {
-        let value = resolveThemeColor(candidate, theme, ["--border-color", "--color"]);
-        if (value) {
-          return desc.color(value);
-        }
+        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"]]);
@@ -2364,9 +2714,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, [
@@ -2394,6 +2743,8 @@ function createUtilities(theme) {
         }
         default: {
           value = asColor(value, candidate.modifier, theme);
+          if (value === null)
+            return;
           return [decl("background-color", value)];
         }
       }
@@ -2411,6 +2762,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>"),
@@ -2427,9 +2790,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"]);
@@ -2440,6 +2802,8 @@ function createUtilities(theme) {
           }
           default: {
             value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
             return desc.color(value);
           }
         }
@@ -2459,6 +2823,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) => [
@@ -2480,9 +2856,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)]
   });
@@ -2542,25 +2918,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"]);
@@ -2572,6 +2957,8 @@ function createUtilities(theme) {
         }
         default: {
           value = asColor(candidate.value.value, candidate.modifier, theme);
+          if (value === null)
+            return;
           return [decl("stroke", value)];
         }
       }
@@ -2586,11 +2973,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"]]);
@@ -2669,9 +3068,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"]);
@@ -2739,6 +3137,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"]]);
@@ -2763,9 +3181,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"]);
@@ -2776,6 +3193,8 @@ function createUtilities(theme) {
         }
         default: {
           value = asColor(value, candidate.modifier, theme);
+          if (value === null)
+            return;
           return [decl("text-decoration-color", value)];
         }
       }
@@ -2785,7 +3204,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`)];
       }
     }
@@ -2796,6 +3215,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"],
@@ -2851,14 +3282,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":
@@ -2866,9 +3296,8 @@ function createUtilities(theme) {
       }
     });
     utilities.functional("backdrop-filter", (candidate) => {
-      if (candidate.negative) {
+      if (candidate.negative)
         return;
-      }
       if (candidate.value === null) {
         return [
           backdropFilterProperties(),
@@ -2877,7 +3306,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":
@@ -2920,6 +3352,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}%`,
@@ -2939,6 +3383,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}%`,
@@ -2960,6 +3416,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`,
@@ -2979,6 +3449,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}%`,
@@ -3000,6 +3482,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}%`,
@@ -3019,6 +3515,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}%`,
@@ -3040,6 +3548,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) => [
@@ -3054,7 +3576,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})`),
@@ -3062,6 +3583,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)";
@@ -3121,14 +3648,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"],
@@ -3266,61 +3805,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,
@@ -3328,10 +3927,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"]);
@@ -3351,6 +3956,8 @@ function createUtilities(theme) {
         }
         default: {
           value = asColor(value, candidate.modifier, theme);
+          if (value === null)
+            return;
           return [decl("color", value)];
         }
       }
@@ -3387,18 +3994,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 = () => {
@@ -3419,12 +4040,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(),
@@ -3439,6 +4059,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),
@@ -3486,13 +4108,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(),
@@ -3510,6 +4144,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),
@@ -3563,14 +4199,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)
         ];
       }
@@ -3587,6 +4238,8 @@ function createUtilities(theme) {
           }
           default: {
             value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
             return [decl("--tw-ring-color", value)];
           }
         }
@@ -3599,7 +4252,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) {
@@ -3611,6 +4264,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;
@@ -3634,6 +4300,8 @@ function createUtilities(theme) {
           }
           default: {
             value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
             return [decl("--tw-inset-ring-color", value)];
           }
         }
@@ -3646,7 +4314,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) {
@@ -3658,11 +4326,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"]);
@@ -3675,6 +4355,8 @@ function createUtilities(theme) {
           }
           default: {
             value = asColor(value, candidate.modifier, theme);
+            if (value === null)
+              return;
             return [decl("--tw-ring-offset-color", value)];
           }
         }
@@ -3686,7 +4368,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)
@@ -3701,29 +4383,51 @@ 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;
 }
 
-// src/utils/default-map.ts
-var DefaultMap = class extends Map {
-  constructor(factory) {
-    super();
-    this.factory = factory;
-  }
-  get(key) {
-    let value = super.get(key);
-    if (value === void 0) {
-      value = this.factory(key, this);
-      this.set(key, value);
-    }
-    return value;
-  }
-};
-
 // src/variants.ts
 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
@@ -3755,7 +4459,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;
@@ -3763,6 +4467,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;
@@ -3793,6 +4503,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, {
@@ -3828,11 +4541,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 });
@@ -3929,15 +4652,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;
@@ -3973,13 +4712,13 @@ function createVariants(theme) {
   staticVariant("contrast-more", ["@media (prefers-contrast: more)"], { compounds: false });
   staticVariant("contrast-less", ["@media (prefers-contrast: less)"], { compounds: false });
   {
-    let compareBreakpoints2 = function(a, z, direction) {
+    let compareBreakpoints2 = function(a, z, direction, lookup) {
       if (a === z)
         return 0;
-      let aValue = resolvedBreakpoints.get(a);
+      let aValue = lookup.get(a);
       if (aValue === null)
         return direction === "asc" ? -1 : 1;
-      let zValue = resolvedBreakpoints.get(z);
+      let zValue = lookup.get(z);
       if (zValue === null)
         return direction === "asc" ? 1 : -1;
       if (aValue === zValue)
@@ -4005,78 +4744,177 @@ function createVariants(theme) {
         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)) {
+      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": {
-          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"]);
+    {
+      let breakpoints = theme.namespace("--breakpoint");
+      let resolvedBreakpoints = new DefaultMap((variant) => {
+        switch (variant.kind) {
+          case "static": {
+            return breakpoints.get(variant.root) ?? null;
           }
-          if (!value) {
-            return 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;
           }
-          if (value.includes("var(")) {
+          case "arbitrary":
+          case "compound":
             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")
-    );
-    variants.group(
-      () => {
-        for (let [key, value] of theme.namespace("--breakpoint")) {
-          if (key === null)
-            continue;
-          variants.static(
-            key,
-            (ruleNode) => {
+      });
+      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 }
           );
-        }
-        variants.functional(
-          "min",
-          (ruleNode, variant) => {
-            let value = resolvedBreakpoints.get(variant);
-            if (value === null)
+        },
+        (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;
-            ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
-          },
-          { compounds: false }
-        );
-      },
-      (a, z) => compareBreakpoints2(a, z, "asc")
-    );
+            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 });
@@ -4094,14 +4932,33 @@ function buildDesignSystem(theme) {
     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",
@@ -4437,39 +5294,6 @@ function escape(value) {
 }
 
 // src/compile.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;
-    }
-    return;
-  }
-  let result = applyVariantFn(node, variant);
-  if (result === null)
-    return null;
-}
 function compileCandidates(rawCandidates, designSystem, { throwOnInvalidCandidate = false } = {}) {
   rawCandidates.sort();
   let nodeSorting = /* @__PURE__ */ new Map();
@@ -4478,18 +5302,16 @@ function compileCandidates(rawCandidates, designSystem, { throwOnInvalidCandidat
     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;
-        }
+  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}`);
       }
-      candidates.set(candidate, rawCandidate);
+      continue;
     }
+    candidates.set(candidate, rawCandidate);
+  }
   let variants = Array.from(parsedVariants.values()).sort((a, z) => {
     return designSystem.variants.compare(a, z);
   });
@@ -4497,16 +5319,23 @@ function compileCandidates(rawCandidates, designSystem, { throwOnInvalidCandidat
     for (let [candidate, rawCandidate] of candidates) {
       let nodes = [];
       if (candidate.kind === "arbitrary") {
-        nodes = [decl(candidate.property, candidate.value)];
+        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}`);
-          } else {
-            continue next;
           }
+          continue next;
         }
         nodes = compiledNodes;
       }
@@ -4525,9 +5354,8 @@ function compileCandidates(rawCandidates, designSystem, { throwOnInvalidCandidat
         if (result === null) {
           if (throwOnInvalidCandidate) {
             throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
-          } else {
-            continue next;
           }
+          continue next;
         }
         variantOrder |= 1n << BigInt(variants.indexOf(variant));
       }
@@ -4559,31 +5387,65 @@ function compileCandidates(rawCandidates, designSystem, { throwOnInvalidCandidat
     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();
-  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);
+  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);
 }
 
@@ -4706,10 +5568,9 @@ function parse(input) {
       node = null;
     } else if (char === "}") {
       if (closingBracketStack === "") {
-        throw new Error(`Missing opening {`);
-      } else {
-        closingBracketStack = closingBracketStack.slice(0, -1);
+        throw new Error("Missing opening {");
       }
+      closingBracketStack = closingBracketStack.slice(0, -1);
       if (current.length > 0) {
         if (current[0] === "@") {
           node = rule(current.trim(), []);
@@ -4787,6 +5648,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);
@@ -4849,53 +5725,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 transform({
-    filename: file,
-    code: Buffer.from(input),
-    minify,
-    sourceMap: false,
-    drafts: {
-      customMedia: true
-    },
-    nonStandard: {
-      deepSelectorCombinator: true
-    },
-    include: Features.Nesting,
-    exclude: Features.LogicalProperties,
-    targets: {
-      safari: 16 << 16 | 4 << 8
-    }
-  }).code.toString();
-}
 function compile(css, rawCandidates) {
   let ast = parse(css);
   {
@@ -4995,7 +5824,27 @@ function compile(css, rawCandidates) {
   }
   return toCss(ast);
 }
-function loadDesignSystem(css) {
+function optimizeCss(input, { file = "input.css", minify = false } = {}) {
+  return transform({
+    filename: file,
+    code: Buffer.from(input),
+    minify,
+    sourceMap: false,
+    drafts: {
+      customMedia: true
+    },
+    nonStandard: {
+      deepSelectorCombinator: true
+    },
+    include: Features.Nesting,
+    exclude: 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) => {
@@ -5014,4 +5863,4 @@ function loadDesignSystem(css) {
   return buildDesignSystem(theme);
 }
 
-export { __require, compile, loadDesignSystem, optimizeCss, package_default };
+export { __require, __unstable__loadDesignSystem, compile, optimizeCss, version };