Type Error with extract function in NextJS TypeScript Setup

I'm encountering a type error when using the extract function from fluid-tailwind in my NextJS, TypeScript, TailwindCSS, and ShadCN project. The error occurs when trying to assign extract in the content configuration of the Tailwind config.

Reproduction Steps:

Create a NextJS project with TypeScript, TailwindCSS, and ShadCN.
Install and configure fluid-tailwind as per the documentation.
Import fluid and extract from fluid-tailwind in tailwind.config.ts.

Set up the content field with the following configuration:


import type { Config } from "tailwindcss";
import fluid, { extract } from "fluid-tailwind";

const config: Config = { darkMode: ["class"], content: { files: [ "./src/pages//*.{js,ts,jsx,tsx,mdx}", "./src/components/*/.{js,ts,jsx,tsx,mdx}", "./src/app//*.{js,ts,jsx,tsx,mdx}", ], extract, }, plugins: [fluid], };

export default config;


Expected behavior: The extract function should work without any TypeScript errors, as specified in the documentation.

Actual behavior: The following type error is raised:

Type '{ (content: string): string[]; (options: ExtractorOptions): ExtractorFn; }' is not assignable to type 'string | RawFile'.ts(2322)


Environment Details:
Next.js Version: v14.2.13
TypeScript Version: v5
TailwindCSS Version: v3.4.1
fluid-tailwind Version: v1.0.3
ShadCN Version: v2.1.0
Node.js Version: v20.17.0
PNPM Version: v9.12.0

Solution: The problem lies with how the content field is structured. Instead of defining content as an array, the correct approach is to use an object with a files field, like this:

```ts
content: {
  files: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  extract,
},

By changing the structure, the TypeScript error is resolved, and the configuration works as expected.

Why this should be updated: This oversight might confuse others, as the documentation currently suggests an incorrect structure. I recommend updating the docs or providing a clarification to help users avoid this issue.

barvian / fluid-tailwind

Type Error with extract function in NextJS TypeScript Setup #48