Better DX for using twind, having IDE autocompletions OOTB with VSCode

After generating a new project and answering that I would like to use twind

Do you want to use 'twind' (https://twind.dev/) for styling? [y/N] y

IDE auto completions doesn’t work OOTB.

Considering you’re a VSCode user, there are two other things that need to be added:

1. Installation of the extension
2. having a tailwind.config.js or tailwind.config.cjs (see installation)

To solve this, we can consider the following:

1. use the extensions.json file in order to recommend the tailwind extension. (another point is that we can use this file in order to recommend the deno extension as well)
2. generate a tailwind.config.js file when choosing the --twind option

---

If you’ll decide that these are good changes, I’d be happy to contribute

[timfee]

I worked around this by adding twind.config.ts in my project root:

// ./twind.config.ts
import { Configuration } from 'twind';

export const config: Configuration = {
  darkMode: 'class',
  mode: 'silent',
  theme: {
    extend: {
      fontFamily: {
        'hairline': 'Bungee Hairline',
      },
    },
  },
};

and then importing that in main.ts and in utils/twind.ts:

./utils/twind.ts

import { IS_BROWSER } from '$fresh/runtime.ts';
import { setup } from 'twind';
export * from 'twind';
import { config } from '../twind.config.ts';

if (IS_BROWSER) setup(config);

./main.ts

// snip
import { setup } from '@twind';
import { config } from './twind.config.ts';
// snip

The plugin author says it looks in root, public, src or config – seems like maybe a FR for them would be to allow us to specify custom directories to look for this file (util)

[ranyitz]

Yes @RileyMShea, I did the same. The idea of this issue is to create this file on project generation, including the relevant annotations to make the autocompletions works OOTB.