Add Support CSS properties code completion in addComponents & matchComponents

[strozw]

It's mentioned that addComponents and matchComponents allow defining components using JavaScript objects similar to Emotion.

Tailwind’s plugin system expects CSS rules written as JavaScript objects, using the same sort of syntax you might recognize from CSS-in-JS libraries like Emotion, powered by postcss-js under-the-hood.
https://tailwindcss.com/docs/plugins#css-in-js-syntax

However, looking at its type definition below, it appears that it does not provide the same developer experience as Emotion or similar libraries.

interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
  [key: string]: V | RecursiveKeyValuePair<K, V>
}
type CSSRuleObject = RecursiveKeyValuePair<string, null | string | string[]>

rev: https://github.com/tailwindlabs/tailwindcss/blob/master/types/config.d.ts#L11-L15

How about redefining CSSRuleObject using csstype, similar to Emotion and styled-components. For example, as shown below.

import * as CSS from "csstype"

export type CSSProperties = CSS.Properties<number | (string & {})>;

export type CSSPropertiesHyphen = CSS.PropertiesHyphen<number | (string & {})>;

export type CSSPseudos = { [K in CSS.Pseudos]?: CSSRuleObject };

export interface CSSRuleObject extends CSSProperties, CSSPropertiesHyphen, CSSPseudos {
  [key: string]:
  | CSSRuleObject
  | string
  | number
  | undefined;
}

I believe this could help bridge the gap that developers transitioning from CSS-in-JS to tailwindcss might feel.

[strozw]

For the time being, I created a package that provides helpers that utilize the above types for PoC.
https://github.com/strozw/tailwindcss-components-helper