Type definitions for the configuration file

[arpadgabor]

This PR adds a new index.d.ts file that contains type definitions for the configuration object in tailwind.config.js.

With this change every property can be quickly documented so developers can prototype faster instead of looking through the documentation for property names.

• Usage:

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    theme: {
      screens: { ... },
    }
  }

• Features:
  Types and interfaces for most (if not all) config properties + variations (e.g. font size with line height)
  Links to documentation for most properties
  Variants with auto-complete in the string array
  Update to stubs to include the JSDoc annotation in new projects

Screenshots

Disclaimer: This is my first ever PR, changes should be non-breaking, there may be typos.

[adamwathan]

Wow thanks for this! I've asked someone on our team who is better with TypeScript to review this and compare it with what we use for types on Tailwind Play, we can probably unify this work somehow 👍🏻 Will hear back from us again in a week or two, sorry for the delay!

[arpadgabor]

Thanks for the reply! I lack the necessary time at the moment but there are a couple other things I thought could be addressed with this PR:

• Type definitions for the plugin development API
• A way for plugin developers to add type definitions to the plugins configs

I'm no expert in typescript (hence why I didn't use declare module because I couldn't get it to work the way I want), but there must be a way of actually extending the base definitions and add new rules based on what plugins we have registered.

I guess one possible way would be with generics and the definitions would be added to theme?.extend and variants:

/**
  @type {import('tailwindcss').Config<
    PluginDefinitions & PluginDefinitions2
  >}
*/

Anyways, this is just something I came up with and did not test at all, maybe the other week if I find some time.

[iamandrewluca]

We are using this package for types at the moment
https://www.npmjs.com/package/@types/tailwindcss
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/tailwindcss

/**
 * @type {import('tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  // ...
}

[alvis]

@adamwathan @arpadgabor are there any missing pieces the community can help to get this integrated?

[arpadgabor]

@alvis at the moment the definitions must be updated to match new utilities from the last few updates. I'd be willing to update the PR if @adamwathan or someone else in the team is interested in merging this.

[adamwathan]

Hey! We ended up adding types ourselves in March in this PR: #7891

I completely forgot this one was open otherwise we would have built it on top of yours — so sorry about that 🤦🏻‍♂️ Thank you so much for the PR regardless, hope you continue to contribute in the future.

[arpadgabor]

Haha, no worries 🙈, haven't noticed so it's good you mentioned. Thanks!