fix: nuxt module tailwind support

.changeset/little-boxes-taste.md

@@ -0,0 +1,6 @@
+---
+"uploadthing": patch
+"@uploadthing/nuxt": patch
+---
+
+fix: dynamically add either stylesheet or tailwind plugin based on whether `@nuxtjs/tailwindcss´ is installed

packages/nuxt/package.json

@@ -36,6 +36,7 @@
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/schema": "^3.11.2",
     "@nuxt/test-utils": "^3.12.0",
+    "@nuxtjs/tailwindcss": "^6.12.2",
     "@uploadthing/eslint-config": "workspace:*",
     "eslint": "^8.57.0",
     "h3": "^1.11.1",

packages/nuxt/playground/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>Playground</div>
+  <div class="text-lg font-bold">Playground</div>
   <UploadButton
     :config="{
       endpoint: 'videoAndImage',

packages/nuxt/playground/nuxt.config.ts

@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["../src/module"],
+  modules: ["../src/module", "@nuxtjs/tailwindcss"],
   telemetry: false,
 });

packages/nuxt/playground/package.json

@@ -9,6 +9,7 @@
     "generate": "nuxi generate"
   },
   "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.12.2",
     "nuxt": "^3.11.2"
   }
 }

packages/nuxt/src/module.ts

@@ -1,21 +1,33 @@
 import { existsSync } from "node:fs";
-import { resolve } from "node:path";
+import { dirname, resolve, sep } from "node:path";
 import {
   addComponent,
   addImports,
   addServerHandler,
+  addTemplate,
   createResolver,
   defineNuxtModule,
+  hasNuxtModule,
   resolvePath,
   useLogger,
 } from "@nuxt/kit";
+import type { Resolver } from "@nuxt/kit";
+import type { Nuxt } from "@nuxt/schema";
 import defu from "defu";
 
 import type { RouteHandlerConfig } from "uploadthing/internal/types";
 
 // Module options TypeScript interface definition
 export type ModuleOptions = RouteHandlerConfig & {
   routerPath: string;
+  /**
+   * Injects UploadThing styles into the page
+   * If you're using Tailwind, it will inject the
+   * UploadThing Tailwind plugin instead.
+   *
+   * @default true
+   */
+  injectStyles: boolean;
 };
 
 export default defineNuxtModule<ModuleOptions>({
@@ -28,6 +40,7 @@ export default defineNuxtModule<ModuleOptions>({
   },
   defaults: {
     routerPath: "~/server/uploadthing",
+    injectStyles: true,
   },
   async setup(options, nuxt) {
     const logger = useLogger("uploadthing");
@@ -70,8 +83,10 @@ export default defineNuxtModule<ModuleOptions>({
       name: "UploadDropzone",
       filePath: resolver.resolve("./runtime/components/dropzone"),
     });
-    // FIXME: Use Tailwind Wrapper if the user has Tailwind installed
-    nuxt.options.css.push("@uploadthing/vue/styles.css");
+
+    if (options.injectStyles === true) {
+      await injectStyles(options, nuxt, resolver);
+    }
 
     addImports({
       name: "useUploadThing",
@@ -85,3 +100,53 @@ export default defineNuxtModule<ModuleOptions>({
     });
   },
 });
+
+async function injectStyles(
+  moduleOptions: ModuleOptions,
+  nuxt: Nuxt,
+  resolver: Resolver,
+) {
+  /**
+   * Inject UploadThing stylesheet if no Tailwind is installed
+   */
+  if (!hasNuxtModule("@nuxtjs/tailwindcss", nuxt)) {
+    nuxt.options.css.push("@uploadthing/vue/styles.css");
+    return;
+  }
+
+  /**
+   * Else we install our tailwind plugin
+   */
+
+  const vueDist = await resolver.resolvePath("@uploadthing/vue");
+  const contentPath = dirname(vueDist) + sep + "**";
+
+  const template = addTemplate({
+    filename: "uploadthing.tailwind.config.cjs",
+    write: true,
+    getContents: () => `
+      const { uploadthingPlugin } = require('uploadthing/tw');
+
+      module.exports = {
+        content: [
+          ${JSON.stringify(contentPath)}
+        ],
+        plugins: [
+          require('uploadthing/tw').uploadthingPlugin
+        ]
+      }
+    `,
+  });
+
+  // @ts-expect-error - Help pls
+  const twModuleOptions = (nuxt.options.tailwindcss ??= {}) as {
+    configPath?: string | string[];
+  };
+  if (typeof twModuleOptions.configPath === "string") {
+    twModuleOptions.configPath = [twModuleOptions.configPath, template.dst];
+  } else if (Array.isArray(twModuleOptions.configPath)) {
+    twModuleOptions.configPath.push(template.dst);
+  } else {
+    twModuleOptions.configPath = template.dst;
+  }
+}

packages/uploadthing/src/tw.ts

@@ -7,6 +7,34 @@ import plugin from "tailwindcss/plugin";
  */
 const PACKAGES = ["react", "solid", "svelte", "vue"];
 
+/**
+ * UploadThing Tailwind plugin which injects custom variants
+ * for the built-in UI components
+ * @see https://docs.uploadthing.com/concepts/theming#theming-with-tailwind-css
+ *
+ * When using this, you need to specify `content` manually. For automatic
+ * detection, see {@link withUt}.
+ */
+export const uploadthingPlugin = plugin(({ addVariant }) => {
+  // Variants to select specific underlying element
+  addVariant("ut-button", '&>*[data-ut-element="button"]');
+  addVariant("ut-allowed-content", '&>*[data-ut-element="allowed-content"]');
+  addVariant("ut-label", '&>*[data-ut-element="label"]');
+  addVariant("ut-upload-icon", '&>*[data-ut-element="upload-icon"]');
+  addVariant("ut-clear-btn", '&>*[data-ut-element="clear-btn"]');
+
+  // Variants to select specific state
+  addVariant("ut-readying", '&[data-state="readying"]');
+  addVariant("ut-ready", '&[data-state="ready"]');
+  addVariant("ut-uploading", '&[data-state="uploading"]');
+});
+
+/**
+ * HOF for Tailwind config that adds the
+ * {@link uploadthingPlugin} to the Tailwind config
+ * as well as adds content paths to detect the necessary
+ * classnames
+ */
 export function withUt(twConfig: Config) {
   const contentPaths = PACKAGES.map((pkg) => {
     try {
@@ -41,25 +69,11 @@ export function withUt(twConfig: Config) {
     twConfig.content.files.push(...contentPaths);
   }
 
-  const utPlugin = plugin(({ addVariant }) => {
-    // Variants to select specific underlying element
-    addVariant("ut-button", '&>*[data-ut-element="button"]');
-    addVariant("ut-allowed-content", '&>*[data-ut-element="allowed-content"]');
-    addVariant("ut-label", '&>*[data-ut-element="label"]');
-    addVariant("ut-upload-icon", '&>*[data-ut-element="upload-icon"]');
-    addVariant("ut-clear-btn", '&>*[data-ut-element="clear-btn"]');
-
-    // Variants to select specific state
-    addVariant("ut-readying", '&[data-state="readying"]');
-    addVariant("ut-ready", '&[data-state="ready"]');
-    addVariant("ut-uploading", '&[data-state="uploading"]');
-  });
-
   if (!twConfig.plugins) {
     twConfig.plugins = [];
   }
 
-  twConfig.plugins.push(utPlugin);
+  twConfig.plugins.push(uploadthingPlugin);
 
   return twConfig;
 }