Correctly type annotate the config for the tailwind.config.ts

[AdrianGonz97]

Topic

tailwindcss

Description

When using the tailwindcss adder while also having typescript installed, the adder will create a tailwind.config.ts file. This is normally fine, however the type annotation that's added for the config uses JSDoc, which won't correctly annotate the config object.

To reproduce:

1. git clone https://github.com/AdrianGonz97/svelte-add-tailwind-layout-repro
2. pnpm install
3. pnpm dlx @svelte-add/tailwindcss@latest --typography false
4. Select pnpm for the dependency install option
5. Go to tailwind.config.ts and try to get autocompletions to trigger when editing the config object (it won't work)

Describe the solution you'd like

There are a couple of ways to fix this.

Normal type annotation:

import type { Config } from "tailwindcss";

const config: Config = { ... }

export default config;

Using as or satisfies:

import type { Config } from "tailwindcss";

export default { ... } as Config;

// or...
export default { ... } satisfies Config;

Or we can just keep it as a .js file. However, type-saftey won't be enforced unless the file includes a // @ts-check at the top, or if the file is included in the includes field of the tsconfig.json.

[manuel3108]

Absolutely true!

What would be your preferred way? I think I would personally prefer the first way with const config: Config = { ... }.

According to https://astexplorer.net/ this should be doable with our current setup, although they might require some ast manipulations.

[AdrianGonz97]

What would be your preferred way? I think I would personally prefer the first way with const config: Config = { ... }.

Whichever is easiest to implement since the outcome in types will be the same 🙂. The only thing that comes to mind with using const config: Config is the assumption of the name of the config object in existing config files. Declaring an anonymous object with default export does seem to skirt the issue of modifying existing configs altogether without having to guess the name of the existing object.