UI: Fix Tailwind CSS utilities

.changeset/smooth-chairs-live.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix Tailwind CSS utilities

apps/docs/components/preview/dynamic-codeblock.tsx

@@ -1,23 +1,30 @@
 'use client';
 import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
 import { useState } from 'react';
+import { bundledLanguages } from 'shiki';
 
 export default function Example() {
   const [lang, setLang] = useState('js');
   const [code, setCode] = useState('console.log("This is pre-rendered")');
 
   return (
-    <div className="prose rounded-lg bg-fd-background p-4">
-      <div className="not-prose -mx-2 flex flex-col rounded-lg bg-black text-white">
-        <input
-          className="border-b bg-transparent p-2 text-sm focus-visible:outline-none"
+    <div className="prose flex flex-col gap-4 rounded-lg bg-fd-background p-4">
+      <div className="not-prose flex flex-col rounded-lg bg-fd-secondary text-fd-secondary-foreground">
+        <select
           value={lang}
           onChange={(e) => setLang(e.target.value)}
-        />
+          className="w-fit bg-transparent px-4 py-2 text-sm focus-visible:outline-none"
+        >
+          {Object.keys(bundledLanguages).map((lang) => (
+            <option value={lang} key={lang}>
+              {lang}
+            </option>
+          ))}
+        </select>
         <textarea
           value={code}
           onChange={(e) => setCode(e.target.value)}
-          className="bg-transparent p-2 text-sm focus-visible:outline-none"
+          className="bg-transparent px-4 py-2 text-sm focus-visible:outline-none"
         />
       </div>
       <DynamicCodeBlock lang={lang} code={code} />

packages/ui/css/preset.css

@@ -37,16 +37,16 @@
   }
 }
 
-@layer utilities {
-  .fd-steps {
-    counter-reset: step;
-    border-left-width: 1px;
-    margin-left: 1rem;
-    padding-left: 1.75rem;
-    position: relative;
-  }
+@utility fd-steps {
+  counter-reset: step;
+  border-left-width: 1px;
+  margin-left: 1rem;
+  padding-left: 1.75rem;
+  position: relative;
+}
 
-  .fd-step:before {
+@utility fd-step {
+  &:before {
     background-color: var(--color-fd-secondary);
     color: var(--color-fd-secondary-foreground);
     content: counter(step);
@@ -62,12 +62,14 @@
     position: absolute;
     left: -1rem;
   }
+}
 
-  .prose-no-margin > :first-child {
+@utility prose-no-margin {
+  & > :first-child {
     margin-top: 0;
   }
 
-  .prose-no-margin > :last-child {
+  & > :last-child {
     margin-bottom: 0;
   }
 }