Skip to content

Commit f71b143

Browse files
authored
chore: add tailwindcss prettier (#1723)
1 parent ead4a80 commit f71b143

24 files changed

+127
-60
lines changed

apps/next/src/app/(home)/page.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@ import { Suspense } from "react";
2424
export default function HomePage() {
2525
return (
2626
<main className="container mx-auto px-4 py-12">
27-
<h1 className="text-4xl md:text-6xl font-bold text-center mb-4">
27+
<h1 className="mb-4 text-center text-4xl font-bold md:text-6xl">
2828
Build context-augmented web apps using
2929
<br /> <span className="text-blue-500">LlamaIndex.TS</span>
3030
</h1>
31-
<p className="text-xl text-center text-fd-muted-foreground mb-12 ">
31+
<p className="text-fd-muted-foreground mb-12 text-center text-xl">
3232
LlamaIndex.TS is the JS/TS version of{" "}
3333
<a href="https://llamaindex.ai">LlamaIndex</a>, the framework for
3434
building agentic generative AI applications connected to your data.
3535
</p>
36-
<div className="text-center text-lg text-fd-muted-foreground mb-12">
36+
<div className="text-fd-muted-foreground mb-12 text-center text-lg">
3737
<span>Designed for building web applications in </span>
3838
<Supports />
3939
</div>
@@ -149,13 +149,13 @@ await agent.chat('...');`}
149149
>
150150
<div className="mt-8 flex flex-col gap-8">
151151
<div>
152-
<h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
152+
<h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
153153
LLMs
154154
</h3>
155155
<InfiniteLLMProviders />
156156
</div>
157157
<div>
158-
<h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
158+
<h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
159159
Vector Stores
160160
</h3>
161161
<InfiniteVectorStoreProviders />

apps/next/src/app/docs/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function Layout({ children }: { children: ReactNode }) {
2222
variant: "secondary",
2323
size: "xs",
2424
className:
25-
"md:flex-1 px-2 ms-2 gap-1.5 text-fd-muted-foreground rounded-full",
25+
"text-fd-muted-foreground ms-2 gap-1.5 rounded-full px-2 md:flex-1",
2626
}),
2727
)}
2828
>

apps/next/src/app/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function Layout({ children }: { children: ReactNode }) {
3232
href="/favicon-16x16.png"
3333
/>
3434
</head>
35-
<body className="flex flex-col min-h-screen">
35+
<body className="flex min-h-screen flex-col">
3636
<TooltipProvider>
3737
<AIProvider>
3838
<RootProvider>{children}</RootProvider>

apps/next/src/components/ai-chat.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,13 @@ export const AITrigger = (props: AITriggerProps) => {
4545
<Dialog>
4646
<DialogTrigger {...props} />
4747
<DialogPortal>
48-
<DialogOverlay className="fixed inset-0 z-50 bg-fd-background/50 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" />
48+
<DialogOverlay className="bg-fd-background/50 data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in fixed inset-0 z-50 backdrop-blur-sm" />
4949
<DialogContent
5050
onOpenAutoFocus={(e) => {
5151
document.getElementById("nd-ai-input")?.focus();
5252
e.preventDefault();
5353
}}
54-
className="fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in"
54+
className="bg-fd-popover text-fd-popover-foreground data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border shadow-lg focus-visible:outline-none"
5555
>
5656
<DialogHeader>
5757
<DialogTitle className="sr-only">Search AI</DialogTitle>
@@ -67,11 +67,11 @@ export const AITrigger = (props: AITriggerProps) => {
6767
</AlertDescription>
6868
</Alert>
6969
</DialogHeader>
70-
<div className="overflow-scroll flex-grow mt-4">
70+
<div className="mt-4 flex-grow overflow-scroll">
7171
<ChatList messages={messages} />
7272
</div>
7373
<form
74-
className="px-4 py-2 space-y-4"
74+
className="space-y-4 px-4 py-2"
7575
action={async () => {
7676
const value = inputValue.trim();
7777
setInputValue("");
@@ -102,7 +102,7 @@ export const AITrigger = (props: AITriggerProps) => {
102102
}
103103
}}
104104
>
105-
<div className="flex flex-row w-full items-center gap-2">
105+
<div className="flex w-full flex-row items-center gap-2">
106106
<Textarea
107107
tabIndex={0}
108108
placeholder="Ask AI about documentation."

apps/next/src/components/contribution.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function Contributing(): ReactElement {
1010
<h2 className="mb-4 text-xl font-semibold sm:text-2xl">
1111
Made possible by you <Heart className="inline align-middle" />
1212
</h2>
13-
<p className="mb-4 text-fd-muted-foreground">
13+
<p className="text-fd-muted-foreground mb-4">
1414
LlamaIndex.TS is powered by the open source community.
1515
</p>
1616
<div className="mb-8 flex flex-row items-center gap-2">

apps/next/src/components/contributor-count.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default async function ContributorCounter({
3333
href={`https://github.com/${contributor.login}`}
3434
rel="noreferrer noopener"
3535
target="_blank"
36-
className="size-10 overflow-hidden rounded-full border-4 border-fd-background bg-fd-background md:-mr-4 md:size-12"
36+
className="border-fd-background bg-fd-background size-10 overflow-hidden rounded-full border-4 md:-mr-4 md:size-12"
3737
style={{
3838
zIndex: topContributors.length - i,
3939
}}
@@ -48,7 +48,7 @@ export default async function ContributorCounter({
4848
</a>
4949
))}
5050
{displayCount < contributors.length ? (
51-
<div className="size-12 content-center rounded-full bg-fd-secondary text-center">
51+
<div className="bg-fd-secondary size-12 content-center rounded-full text-center">
5252
+{contributors.length - displayCount}
5353
</div>
5454
) : null}

apps/next/src/components/create-app-animation.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export function CreateAppAnimation(): React.ReactElement {
8383
}}
8484
>
8585
{tick > timeWindowOpen && (
86-
<LaunchAppWindow className="absolute bottom-5 right-4 z-10 animate-in fade-in slide-in-from-top-10" />
86+
<LaunchAppWindow className="animate-in fade-in slide-in-from-top-10 absolute bottom-5 right-4 z-10" />
8787
)}
8888
<pre className="overflow-hidden rounded-xl border text-xs">
8989
<div className="flex flex-row items-center gap-2 border-b px-4 py-2">
@@ -92,7 +92,7 @@ export function CreateAppAnimation(): React.ReactElement {
9292
<div className="grow" />
9393
<div className="size-2 rounded-full bg-red-400" />
9494
</div>
95-
<div className="min-h-[200px] bg-gradient-to-b from-fd-secondary [mask-image:linear-gradient(to_bottom,white,transparent)]">
95+
<div className="from-fd-secondary min-h-[200px] bg-gradient-to-b [mask-image:linear-gradient(to_bottom,white,transparent)]">
9696
<code className="grid p-4">{lines}</code>
9797
</div>
9898
</pre>
@@ -103,7 +103,7 @@ export function CreateAppAnimation(): React.ReactElement {
103103
function UserMessage({ children }: { children: ReactNode }) {
104104
return (
105105
<div className="group relative flex items-start">
106-
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
106+
<div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
107107
<IconUser />
108108
</div>
109109
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
@@ -122,7 +122,7 @@ function BotMessage({
122122
}) {
123123
return (
124124
<div className={cn("group relative flex items-start", className)}>
125-
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground">
125+
<div className="bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
126126
<IconAI />
127127
</div>
128128
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
@@ -164,7 +164,7 @@ export function ChatExample() {
164164

165165
return (
166166
<div className="max-w-64">
167-
<div className="flex flex-col px-4 gap-2">
167+
<div className="flex flex-col gap-2 px-4">
168168
{userMessageLength === userMessageFull.length && (
169169
<UserMessage>
170170
<span>{userMessageFull}</span>
@@ -204,11 +204,11 @@ function LaunchAppWindow(
204204
<div
205205
{...props}
206206
className={cn(
207-
"overflow-hidden rounded-md border bg-fd-background shadow-xl",
207+
"bg-fd-background overflow-hidden rounded-md border shadow-xl",
208208
props.className,
209209
)}
210210
>
211-
<div className="relative flex h-6 flex-row items-center border-b bg-fd-muted px-4 text-xs text-fd-muted-foreground">
211+
<div className="bg-fd-muted text-fd-muted-foreground relative flex h-6 flex-row items-center border-b px-4 text-xs">
212212
<p className="absolute inset-x-0 text-center">localhost:8080</p>
213213
</div>
214214
<div className="p-4 text-sm">

apps/next/src/components/demo/code-node-parser.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const IDE = () => {
5757
const maxChars = useSlider();
5858
const useSetMaxChars = useSetSlider();
5959
return (
60-
<div className="flex flex-col p-4 border-r max-h-96 overflow-scroll">
60+
<div className="flex max-h-96 flex-col overflow-scroll border-r p-4">
6161
<div>
6262
<Label>Max Chars {maxChars}</Label>
6363
<Slider
@@ -113,7 +113,7 @@ const Preview = ({ text }: { text: string }) => {
113113
},
114114
},
115115
});
116-
return <CodeBlock className="py-0 m-2">{rendered}</CodeBlock>;
116+
return <CodeBlock className="m-2 py-0">{rendered}</CodeBlock>;
117117
};
118118

119119
function ScrollToBottom() {
@@ -122,7 +122,7 @@ function ScrollToBottom() {
122122
return (
123123
!isAtBottom && (
124124
<button
125-
className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
125+
className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
126126
onClick={() => scrollToBottom()}
127127
/>
128128
)
@@ -136,7 +136,7 @@ export const NodePreview = () => {
136136
const textChunks = useMemo(() => parser.splitText(code), [code, maxChars]);
137137
return (
138138
<StickToBottom
139-
className="block relative max-h-96 overflow-scroll"
139+
className="relative block max-h-96 overflow-scroll"
140140
resize="smooth"
141141
initial="smooth"
142142
>
@@ -154,7 +154,7 @@ export const CodeNodeParserDemo = () => {
154154
const isClient = useIsClient();
155155
if (!isClient) {
156156
return (
157-
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
157+
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
158158
<Skeleton className="h-96" />
159159
<Skeleton className="h-96" />
160160
</div>
@@ -165,13 +165,13 @@ export const CodeNodeParserDemo = () => {
165165
<CodeProvider>
166166
<Suspense
167167
fallback={
168-
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
168+
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
169169
<Skeleton className="h-96" />
170170
<Skeleton className="h-96" />
171171
</div>
172172
}
173173
>
174-
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
174+
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
175175
<IDE />
176176
<NodePreview />
177177
</div>

apps/next/src/components/demo/workflow-streaming-ui.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ function ScrollToBottom() {
7575
return (
7676
!isAtBottom && (
7777
<button
78-
className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
78+
className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
7979
onClick={() => scrollToBottom()}
8080
/>
8181
)
@@ -91,9 +91,9 @@ export function WorkflowStreamingDemo() {
9191
const [total, setTotal] = useState<number>(10);
9292

9393
return (
94-
<div className="flex flex-col items-start w-full gap-2">
95-
<div className="flex flex-row justify-center items-center">
96-
<div className="text-lg mr-2">Compute total</div>{" "}
94+
<div className="flex w-full flex-col items-start gap-2">
95+
<div className="flex flex-row items-center justify-center">
96+
<div className="mr-2 text-lg">Compute total</div>{" "}
9797
<FlowInput value={total} onChange={(value) => setTotal(value)} />
9898
</div>
9999
<Button
@@ -141,7 +141,7 @@ export function WorkflowStreamingDemo() {
141141
>
142142
Start Workflow
143143
</Button>
144-
<StickToBottom className="w-full flex flex-col gap-2 p-2 border border-gray-200 rounded-lg max-h-96 overflow-y-auto">
144+
<StickToBottom className="flex max-h-96 w-full flex-col gap-2 overflow-y-auto rounded-lg border border-gray-200 p-2">
145145
<StickToBottom.Content className="flex flex-col gap-2">
146146
{ui}
147147
</StickToBottom.Content>

apps/next/src/components/feature.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function Feature({
2020
className={cn("border-l border-t px-6 py-12 md:py-16", className)}
2121
{...props}
2222
>
23-
<div className="mb-4 inline-flex items-center gap-2 text-sm font-medium text-fd-muted-foreground">
23+
<div className="text-fd-muted-foreground mb-4 inline-flex items-center gap-2 text-sm font-medium">
2424
<Icon className="size-4" />
2525
<p>{subheading}</p>
2626
</div>

apps/next/src/components/flow-input.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function FlowInput({
6060
className={clsx(
6161
showCaret ? "caret-primary" : "caret-transparent",
6262
"spin-hide w-[1.5em] bg-transparent py-2 text-center font-[inherit] text-transparent outline-none",
63-
"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
63+
"[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
6464
)}
6565
// Make sure to disable kerning, to match NumberFlow:
6666
style={{ fontKerning: "none" }}

apps/next/src/components/message.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { IconAI, IconUser } from "./ui/icons";
88
export function UserMessage({ children }: { children: ReactNode }) {
99
return (
1010
<div className="group relative flex items-start">
11-
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
11+
<div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
1212
<IconUser />
1313
</div>
1414
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
@@ -54,7 +54,7 @@ export function BotCard({
5454
<div className="group relative flex items-start md:-ml-12">
5555
<div
5656
className={cn(
57-
"flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground",
57+
"bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm",
5858
!showAvatar && "invisible",
5959
)}
6060
>

apps/next/src/components/npm-install.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const NpmInstall = () => {
2525
className="flex flex-row items-center justify-center"
2626
>
2727
<code className="mr-2">$ npm i llamaindex</code>
28-
<div className="relative cursor-pointer bg-transparent w-4 h-4">
28+
<div className="relative h-4 w-4 cursor-pointer bg-transparent">
2929
<div
3030
className={`absolute inset-0 transform transition-all duration-300 ${
3131
hasCheckIcon ? "scale-0 opacity-0" : "scale-100 opacity-100"

apps/next/src/components/reactbits/rotating-text.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ export const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
200200
return (
201201
<motion.span
202202
className={cn(
203-
"flex flex-wrap whitespace-pre-wrap relative",
203+
"relative flex flex-wrap whitespace-pre-wrap",
204204
mainClassName,
205205
)}
206206
{...rest}
@@ -216,8 +216,8 @@ export const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
216216
key={currentTextIndex}
217217
className={cn(
218218
splitBy === "lines"
219-
? "flex flex-col w-full"
220-
: "flex flex-wrap whitespace-pre-wrap relative",
219+
? "flex w-full flex-col"
220+
: "relative flex flex-wrap whitespace-pre-wrap",
221221
)}
222222
layout
223223
aria-hidden="true"

apps/next/src/components/ui/dialog.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
2121
<DialogPrimitive.Overlay
2222
ref={ref}
2323
className={cn(
24-
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
24+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
2525
className,
2626
)}
2727
{...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
3838
<DialogPrimitive.Content
3939
ref={ref}
4040
className={cn(
41-
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
41+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
4242
className,
4343
)}
4444
{...props}
4545
>
4646
{children}
47-
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
47+
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
4848
<Cross2Icon className="h-4 w-4" />
4949
<span className="sr-only">Close</span>
5050
</DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
102102
>(({ className, ...props }, ref) => (
103103
<DialogPrimitive.Description
104104
ref={ref}
105-
className={cn("text-sm text-muted-foreground", className)}
105+
className={cn("text-muted-foreground text-sm", className)}
106106
{...props}
107107
/>
108108
));

0 commit comments

Comments
 (0)