How to type tailwind.config.js?

[danpacho]

Adjust config at tailwind.config.js

For @jbs-marcus's temporary solution, we can easily type the Tailwindest for your own project.

// tailwind.config.ts
import { type Config } from "tailwindcss";

const config = {
    content: ["./index.html", "./src/**/*.{ts,tsx}"],
    theme: {
        extend: {
            colors: {
                //
            },
            screens: {
                //
            }
        },
        fontFamily: {
            //
        },
    },
    plugins: [ ],
} as const satisfies Config;

export default config;

// src/wind.ts
import { createTools, type Tailwindest } from "tailwindest";
import type Config from "../tailwind.config";

export type YourTailwind = Tailwindest<
    {
        color: keyof typeof Config["theme"]["extend"]["colors"];
        screens: keyof typeof Config["theme"]["extend"]["screens"];
    },
    {
        fontFamily: keyof typeof Config["theme"]["fontFamily"]
    }
>;

const tw = createTools<WindTypes>();

export default tw;