Fix legacy syntax to avoid warnings in CSS file

Author: philipp-spiess

src/blog/headless-ui-v2/examples/HeadlessUIV2Examples.tsx

@@ -157,7 +157,7 @@ export function ComboboxExample() {
             leaveTo="opacity-0"
             afterLeave={() => setQuery("")}
           >
-            <ComboboxOptions className="mt-2 max-h-60 w-[--input-width] overflow-y-auto rounded-xl border border-gray-200 bg-white p-1 backdrop-blur empty:invisible dark:border-white/5 dark:bg-white/5">
+            <ComboboxOptions className="mt-2 max-h-60 w-(--input-width) overflow-y-auto rounded-xl border border-gray-200 bg-white p-1 backdrop-blur empty:invisible dark:border-white/5 dark:bg-white/5">
               {({ option: person }) => (
                 <ComboboxOption
                   key={person.id}

src/blog/tailwindcss-v3-3/index.mdx

@@ -672,7 +672,7 @@ export function MyComponent({ company }) {
         "--brand-hover-color": company.brandHoverColor,
       }}
       className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]" // [!code --]
-      className="bg-[--brand-color] hover:bg-[--brand-hover-color]" // [!code ++]
+      className="bg-(--brand-color) hover:bg-(--brand-hover-color)" // [!code ++]
     />
   );
 }

src/docs/font-family.mdx

@@ -106,11 +106,11 @@ If needed, use the [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS
 If you're loading a font from a service like [Google Fonts](https://fonts.google.com/), make sure to put the `@import` at the very top of your CSS file:
 
 ```css
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); /* [!code highlight] */
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); /* [!code highlight] */
 @import "tailwindcss";
 
 @theme {
-  --font-roboto: 'Roboto', sans-serif; /* [!code highlight] */
+  --font-roboto: "Roboto", sans-serif; /* [!code highlight] */
 }
 ```