Proposal for config non-breaking Typescript definitions [WIP]

[arpadgabor]

Type definitions for the config file would be an awesome addition to TailwindCSS as it would help tremendously while making different changes to the config. I've put together a "small" .ts file to see how easy it is.

How it would work

A new file would be created in src/types/index.ts. Then, to make things easy for users, a new function in /useConfig.js is created that takes as parameter the config and then returns it back for backwards compatibility.

// useConfig.js

/** @typedef {import('./src/types').Config} Config */

/**
 * @param {Config} config
 * @returns {Config}
 */
function useConfig(config) {
  return config
}

module.exports = useConfig

The user would import this function and export the value it returns, so there is no need for any other internal Tailwind changes.

// tailwind.config.js
 
const useConfig = require('tailwindcss/useConfig')

// types will be available
// people upgrading will not need to change the file as it is backwards compatible
module.exports = useConfig({
  theme: {},
  purge: {},
  // etc.
})

Preview in editor

---

Ok so I'm no expert, but I guess this would be an easy way to integrate types into the config file without changing other internal code or processes.

A huge advantage that I see here is that by adding JSDocs into the types, links to the documentation would improve the experience of both new users and old, and it would also improve the discoverability of different features and/or experimental features.

---

Open for feedback, help and critique.

PS: I saw that other discussion about type definitions but it's pretty stale, so I thought it would be a good idea to come up with a new one and actual content to discuss on.