docs

pingdotgg · Jan 23, 2025 · 620cd88 · 620cd88
1 parent 27c8ffc
commit 620cd88
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 103 deletions.
diff --git a/docs/src/app/(docs)/concepts/theming/page.mdx b/docs/src/app/(docs)/concepts/theming/page.mdx
@@ -180,36 +180,55 @@ export function Page() {
 
 ### Configuring TailwindCSS
 
-To leverage the best developer experience, we strongly recommend wrapping your
-Tailwind config with our utility function `withUt`. This utility function adds
-additional classes and variants used to style our components.
+<Tabs tabs={["Using Tailwind v3", "Using Tailwind v4"]}>
+  <Tab value="Using Tailwind v3">
 
-In addition, it also automatically sets the `content` option to include all the
-necessary classes that the components use. This allows you to avoid having
-duplicated styles in your bundle. Therefore, when using `withUt`, you should not
-import our stylesheet into your app. If you choose not to use `withUt`, you have
-to import the default stylesheet to make the components look right.
+    To leverage the best developer experience, we strongly recommend wrapping your
+    Tailwind config with our utility function `withUt`. This utility function adds
+    additional classes and variants used to style our components.
 
-<CodeGroup>
+    In addition, it also automatically sets the `content` option to include all the
+    necessary classes that the components use. This allows you to avoid having
+    duplicated styles in your bundle. Therefore, when using `withUt`, you should not
+    import our stylesheet into your app. If you choose not to use `withUt`, you have
+    to import the default stylesheet to make the components look right.
 
-```ts {{title: "tailwind.config.ts" }}
-import { withUt } from "uploadthing/tw";
+    <CodeGroup>
 
-export default withUt({
-  // your config goes here
-});
-```
+    ```ts {{title: "tailwind.config.ts" }}
+    import { withUt } from "uploadthing/tw";
 
-```js {{title: "tailwind.config.js" }}
-// @ts-check
-const { withUt } = require("uploadthing/tw");
+    export default withUt({
+      // your config goes here
+    });
+    ```
 
-module.exports = withUt({
-  // your config goes here
-});
-```
+    ```js {{title: "tailwind.config.js" }}
+    // @ts-check
+    const { withUt } = require("uploadthing/tw");
+
+    module.exports = withUt({
+      // your config goes here
+    });
+    ```
+
+    </CodeGroup>
+
+  </Tab>
+  <Tab value="Using Tailwind v4">
+
+    If you're using Tailwind v4 with CSS configuration, you can use our plugin like
+    this:
+
+    ```css
+    @import "tailwindcss";
+
+    @import "uploadthing/tw/v4";
+    @source "../node_modules/@uploadthing/react/dist"; /** <-- depends on your project structure */
+    ```
 
-</CodeGroup>
+  </Tab>
+</Tabs>
 
 <Note>
   If you're not wrapping your config as shown above, you have to import our

diff --git a/docs/src/app/(docs)/getting-started/appdir/page.mdx b/docs/src/app/(docs)/getting-started/appdir/page.mdx
@@ -139,7 +139,7 @@ export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
 
 ### Add UploadThing's Styles
 
-<Tabs tabs={["Tailwind", "Not Tailwind"]}>
+<Tabs tabs={["Tailwind v3", "Tailwind v4", "Not Tailwind"]}>
     <Tab>
       Wrap your Tailwind config with the `withUt` helper. You can learn more about our
       Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
@@ -155,6 +155,18 @@ export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
       ```
 
     </Tab>
+
+    <Tab>
+      If you're using Tailwind v4 with CSS configuration, you can use our plugin like this:
+
+      ```css
+      @import "tailwindcss";
+
+      @import "uploadthing/tw/v4";
+      @source "../node_modules/@uploadthing/react/dist"; /** <-- depends on your project structure */
+      ```
+    </Tab>
+
     <Tab>
       Include our CSS file in the root layout to make sure the components look right!
 

diff --git a/docs/src/app/(docs)/getting-started/astro/page.mdx b/docs/src/app/(docs)/getting-started/astro/page.mdx
@@ -145,8 +145,8 @@ export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
 
 ### Add UploadThing's Styles
 
-<Tabs tabs={["Tailwind", "Not Tailwind"]}>
-  <Tab>
+<Tabs tabs={["Tailwind v3", "Tailwind v4", "Not Tailwind"]}>
+    <Tab>
       Wrap your Tailwind config with the `withUt` helper. You can learn more about our
       Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
 
@@ -160,18 +160,28 @@ export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
       });
       ```
 
-  </Tab>
-  <Tab>
-    Include our CSS file in the root layout to make sure the components look right!
+    </Tab>
 
-    ```astro
-    ---
-    import "@uploadthing/react/styles.css";
-    // ...
-    ---
-    ```
+    <Tab>
+      If you're using Tailwind v4 with CSS configuration, you can use our plugin like this:
+
+      ```css
+      @import "tailwindcss";
+
+      @import "uploadthing/tw/v4";
+      @source "../node_modules/@uploadthing/react/dist"; /** <-- depends on your project structure */
+      ```
+    </Tab>
+
+    <Tab>
+      Include our CSS file in the root layout to make sure the components look right!
+
+      ```tsx
+      import "@uploadthing/react/styles.css";
+      ```
+
+    </Tab>
 
-  </Tab>
 </Tabs>
 
 ### Mount A Button And Upload!

diff --git a/docs/src/app/(docs)/getting-started/pagedir/page.mdx b/docs/src/app/(docs)/getting-started/pagedir/page.mdx
@@ -137,8 +137,8 @@ export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
 
 ### Add UploadThing's Styles
 
-<Tabs tabs={["Tailwind", "Not Tailwind"]}>
-  <Tab>
+<Tabs tabs={["Tailwind v3", "Tailwind v4", "Not Tailwind"]}>
+    <Tab>
       Wrap your Tailwind config with the `withUt` helper. You can learn more about our
       Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
 
@@ -152,15 +152,28 @@ export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
       });
       ```
 
-  </Tab>
-  <Tab>
-    Include our CSS file in the root layout to make sure the components look right!
+    </Tab>
 
-    ```tsx
-    import "@uploadthing/react/styles.css";
-    ```
+    <Tab>
+      If you're using Tailwind v4 with CSS configuration, you can use our plugin like this:
+
+      ```css
+      @import "tailwindcss";
+
+      @import "uploadthing/tw/v4";
+      @source "../node_modules/@uploadthing/react/dist"; /** <-- depends on your project structure */
+      ```
+    </Tab>
+
+    <Tab>
+      Include our CSS file in the root layout to make sure the components look right!
+
+      ```tsx
+      import "@uploadthing/react/styles.css";
+      ```
+
+    </Tab>
 
-  </Tab>
 </Tabs>
 
 ## Mount A Button And Upload!

diff --git a/docs/src/app/(docs)/getting-started/remix/page.mdx b/docs/src/app/(docs)/getting-started/remix/page.mdx
@@ -160,8 +160,8 @@ export const UploadDropzone = generateUploadDropzone<UploadRouter>();
 
 ### Add UploadThing's Styles
 
-<Tabs tabs={["Tailwind", "Not Tailwind"]}>
-  <Tab>
+<Tabs tabs={["Tailwind v3", "Tailwind v4", "Not Tailwind"]}>
+    <Tab>
       Wrap your Tailwind config with the `withUt` helper. You can learn more about our
       Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
 
@@ -175,15 +175,28 @@ export const UploadDropzone = generateUploadDropzone<UploadRouter>();
       });
       ```
 
-  </Tab>
-  <Tab>
-    Include our CSS file in the root layout to make sure the components look right!
+    </Tab>
 
-    ```tsx
-    import "@uploadthing/react/styles.css";
-    ```
+    <Tab>
+      If you're using Tailwind v4 with CSS configuration, you can use our plugin like this:
+
+      ```css
+      @import "tailwindcss";
+
+      @import "uploadthing/tw/v4";
+      @source "../node_modules/@uploadthing/react/dist"; /** <-- depends on your project structure */
+      ```
+    </Tab>
+
+    <Tab>
+      Include our CSS file in the root layout to make sure the components look right!
+
+      ```tsx
+      import "@uploadthing/react/styles.css";
+      ```
+
+    </Tab>
 
-  </Tab>
 </Tabs>
 
 ## Mount A Button And Upload!

diff --git a/docs/src/app/(docs)/getting-started/solid/page.mdx b/docs/src/app/(docs)/getting-started/solid/page.mdx
@@ -149,8 +149,8 @@ export const { createUploadThing } = generateSolidHelpers<UploadRouter>({
 
 ### Add UploadThing's Styles
 
-<Tabs tabs={["Tailwind", "Not Tailwind"]}>
-  <Tab>
+<Tabs tabs={["Tailwind v3", "Tailwind v4", "Not Tailwind"]}>
+    <Tab>
       Wrap your Tailwind config with the `withUt` helper. You can learn more about our
       Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
 
@@ -164,15 +164,28 @@ export const { createUploadThing } = generateSolidHelpers<UploadRouter>({
       });
       ```
 
-  </Tab>
-  <Tab>
-    Include our CSS file in the root layout to make sure the components look right!
+    </Tab>
 
-    ```tsx {{ title: "src/app.tsx"}}
-    import "@uploadthing/solid/styles.css";
-    ```
+    <Tab>
+      If you're using Tailwind v4 with CSS configuration, you can use our plugin like this:
+
+      ```css
+      @import "tailwindcss";
+
+      @import "uploadthing/tw/v4";
+      @source "../node_modules/@uploadthing/react/dist"; /** <-- depends on your project structure */
+      ```
+    </Tab>
+
+    <Tab>
+      Include our CSS file in the root layout to make sure the components look right!
+
+      ```tsx
+      import "@uploadthing/react/styles.css";
+      ```
+
+    </Tab>
 
-  </Tab>
 </Tabs>
 
 ## Mount A Button And Upload!

diff --git a/docs/src/app/(docs)/getting-started/svelte/page.mdx b/docs/src/app/(docs)/getting-started/svelte/page.mdx
@@ -131,8 +131,8 @@ export const { createUploader, createUploadThing } =
 
 ### Add UploadThing's Styles
 
-<Tabs tabs={["Tailwind", "Not Tailwind"]}>
-  <Tab>
+<Tabs tabs={["Tailwind v3", "Tailwind v4", "Not Tailwind"]}>
+    <Tab>
       Wrap your Tailwind config with the `withUt` helper. You can learn more about our
       Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
 
@@ -146,17 +146,28 @@ export const { createUploader, createUploadThing } =
       });
       ```
 
-  </Tab>
-  <Tab>
-    Include our CSS file in the root layout to make sure the components look right!
+    </Tab>
 
-    ```svelte
-    <script lang="ts">
-        import "@uploadthing/svelte/styles.css";
-    </script>
-    ```
+    <Tab>
+      If you're using Tailwind v4 with CSS configuration, you can use our plugin like this:
+
+      ```css
+      @import "tailwindcss";
+
+      @import "uploadthing/tw/v4";
+      @source "../node_modules/@uploadthing/react/dist"; /** <-- depends on your project structure */
+      ```
+    </Tab>
+
+    <Tab>
+      Include our CSS file in the root layout to make sure the components look right!
+
+      ```tsx
+      import "@uploadthing/react/styles.css";
+      ```
+
+    </Tab>
 
-  </Tab>
 </Tabs>
 
 ## Use the FileRouter in your app