feat: add tailwind v4 plugin (#1138)

Co-authored-by: Mark R. Florkowski <[email protected]>
pingdotgg · Jan 25, 2025 · ad75280 · ad75280
1 parent de6c992
commit ad75280
Show file tree

Hide file tree

Showing 17 changed files with 775 additions and 354 deletions.
diff --git a/.changeset/fair-rockets-beg.md b/.changeset/fair-rockets-beg.md
@@ -0,0 +1,13 @@
+---
+"uploadthing": minor
+---
+
+feat: add tailwind v4 css plugin
+
+Usage:
+```css
+@import "tailwindcss";
+
+@import "uploadthing/tw/v4";
+@source "../node_modules/@uploadthing/react/dist"; /** <-- depends on your project structure */
+```
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={["Tailwind v3", "Tailwind v4"]}>
+  <Tab value="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="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,20 @@ 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 */
+      ```
+
+      You can learn more about our Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
+    </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,33 @@ 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 */
+      ```
+
+      You can learn more about our Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
+    </Tab>
+
+    <Tab>
+      Include our CSS file in the root layout to make sure the components look right!
+
+      ```astro
+      ---
+      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,30 @@ 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 */
+      ```
+
+      You can learn more about our Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
+    </Tab>
+
+    <Tab>
+      Include our CSS file in the root entry file to make sure the components look right!
+
+      ```tsx {{ title: "src/_app.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,30 @@ 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 */
+      ```
+
+      You can learn more about our Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
+    </Tab>
+
+    <Tab>
+      Include our CSS file in the root layout to make sure the components look right!
+
+      ```tsx {{ title: "app/root.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,30 @@ 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/solid/dist"; /** <-- depends on your project structure */
+      ```
+
+      You can learn more about our Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
+    </Tab>
+
+    <Tab>
+      Include our CSS file in the root layout to make sure the components look right!
+
+      ```tsx {{ title: "src/app.tsx"}}
+      import "@uploadthing/solid/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,32 @@ 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/svelte/dist"; /** <-- depends on your project structure */
+      ```
+
+      You can learn more about our Tailwind helper in the ["Theming" page](/concepts/theming#theming-with-tailwind-css)
+    </Tab>
+
+    <Tab>
+      Include our CSS file in the root layout to make sure the components look right!
+
+      ```svelte {{ title: "src/app.svelte"}}
+      <script lang="ts">
+          import "@uploadthing/svelte/styles.css";
+      </script>
+      ```
+
+    </Tab>
 
-  </Tab>
 </Tabs>
 
 ## Use the FileRouter in your app