diff --git a/src/components/code-example.tsx b/src/components/code-example.tsx
index 7b7ea816b..b33a738f1 100644
--- a/src/components/code-example.tsx
+++ b/src/components/code-example.tsx
@@ -10,6 +10,7 @@ import { createHighlighter } from "shiki";
import theme from "./syntax-highlighter/theme.json";
import { highlightClasses } from "./highlight-classes";
+import linesToDiv from "./lines-to-div";
import atApplyInjection from "./syntax-highlighter/at-apply.json";
import atRulesInjection from "./syntax-highlighter/at-rules.json";
import themeFnInjection from "./syntax-highlighter/theme-fn.json";
@@ -135,7 +136,7 @@ export function HighlightedCode({
example={example}
className={clsx(
"*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5!",
- "**:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh]",
+ "**:[.line]:isolate **:[.line]:not-last:min-h-[1lh]",
"*:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5",
className,
)}
@@ -178,6 +179,7 @@ export function RawHighlightedCode({
highlightedClassName:
"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&]:before:rounded-l-none",
}),
+ linesToDiv(),
],
})
.replaceAll("\n", "");
diff --git a/src/components/highlight-classes.ts b/src/components/highlight-classes.ts
index acf12c53b..2df150a45 100644
--- a/src/components/highlight-classes.ts
+++ b/src/components/highlight-classes.ts
@@ -43,7 +43,7 @@ export function highlightClasses(opts: HighlightClassesOptions): ShikiTransforme
for (let i = 0; i < line.children.length; ++i) {
let el = line.children[i];
if (el.type !== "element") continue;
- if (el.tagName !== "span") continue;
+ if (el.tagName !== "div" && el.tagName !== "span") continue;
// Tiny state machine to make sure we're inside a class attribute
let text = getTextContent(el).trim();
@@ -216,7 +216,7 @@ export function getTextContent(element: ElementContent): string {
return element.value;
}
- if (element.type === "element" && element.tagName === "span") {
+ if (element.type === "element" && (element.tagName === "div" || element.tagName === "span")) {
return element.children.map(getTextContent).join("");
}
diff --git a/src/components/home/tailwind-ui-section.tsx b/src/components/home/tailwind-ui-section.tsx
index 3c8947809..0337c3b2e 100644
--- a/src/components/home/tailwind-ui-section.tsx
+++ b/src/components/home/tailwind-ui-section.tsx
@@ -57,7 +57,12 @@ export default function TailwindUiSection() {
diff --git a/src/components/lines-to-div.tsx b/src/components/lines-to-div.tsx
new file mode 100644
index 000000000..36959e444
--- /dev/null
+++ b/src/components/lines-to-div.tsx
@@ -0,0 +1,10 @@
+import type { ShikiTransformer } from "shiki";
+
+export default function linesToDiv(): ShikiTransformer {
+ return {
+ name: "tailwindcss/lines-to-div",
+ line(node) {
+ node.tagName = "div";
+ },
+ };
+}
diff --git a/src/components/search.tsx b/src/components/search.tsx
index e53127d19..e0b2aade2 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -13,37 +13,36 @@ const APP_ID = "KNPXZI5B0M";
function isTailwindPlusURL(url: string) {
return (
- url.startsWith('https://tailwindui.com') ||
- url.startsWith('https://tailwindcss.com/plus') ||
- url.startsWith('/plus')
- )
+ url.startsWith("https://tailwindui.com") ||
+ url.startsWith("https://tailwindcss.com/plus") ||
+ url.startsWith("/plus")
+ );
}
function isExternalURL(url: string) {
- if (url.startsWith('https://tailwindui.com')) {
- return false
+ if (url.startsWith("https://tailwindui.com")) {
+ return false;
}
return /^https?:\/\//.test(url) && !url.startsWith(window.location.origin);
}
function rewriteURL(url: string) {
- if (!url.startsWith('https://tailwindui.com')) {
- return url
+ if (!url.startsWith("https://tailwindui.com")) {
+ return url;
}
- url = url.replace('https://tailwindui.com/', 'https://tailwindcss.com/plus/')
+ url = url.replace("https://tailwindui.com/", "https://tailwindcss.com/plus/");
// Temporary thing while `https://tailwindui.com/` is rewritten to /plus
- url = url.replace('/plus/plus/', '/plus/')
- url = url.replace('/plus/components', '/plus/ui-blocks')
- url = url.replace('/plus/templates/catalyst', '/plus/ui-kit')
- url = url.replace('/plus/all-access', '/plus/#pricing')
- url = url.replace('/plus/documentation', '/plus/ui-blocks/documentation')
+ url = url.replace("/plus/plus/", "/plus/");
+ url = url.replace("/plus/components", "/plus/ui-blocks");
+ url = url.replace("/plus/templates/catalyst", "/plus/ui-kit");
+ url = url.replace("/plus/all-access", "/plus/#pricing");
+ url = url.replace("/plus/documentation", "/plus/ui-blocks/documentation");
- return url
+ return url;
}
-
const SearchContext = createContext({});
export function SearchProvider({ children }: React.PropsWithChildren) {
@@ -157,20 +156,20 @@ export function SearchProvider({ children }: React.PropsWithChildren) {
hitComponent={Hit}
transformItems={(items) => {
items = items.map((item) => {
- item.url = rewriteURL(item.url)
- return item
- })
+ item.url = rewriteURL(item.url);
+ return item;
+ });
// TODO: Remove this once only new stuff is indexed
items = items.filter((item) => {
// Remove old prev-Tailwind plus search results
// @ts-ignore
if (item.hierarchy?.lvl0 === "Components") {
- return false
+ return false;
}
- return true
- })
+ return true;
+ });
return items.map((item, index) => {
// We transform the absolute URL into a relative URL to
@@ -195,11 +194,11 @@ export function SearchProvider({ children }: React.PropsWithChildren) {
if (isTailwindUI && item.hierarchy.lvl0 === "UI Blocks") {
if (item.hierarchy?.lvl0) {
- item.hierarchy.lvl0 = "Components"
+ item.hierarchy.lvl0 = "Components";
}
if (item._highlightResult?.hierarchy?.lvl0?.value) {
- item._highlightResult.hierarchy.lvl0.value = "Components"
+ item._highlightResult.hierarchy.lvl0.value = "Components";
}
}