TypeScript Definitions for Tailwind Plugins

[jhechtf]

I am just wondering if there is a plan to include a typescript definition for the definition of a TailwindCSS plugin function? It would be nice to include so that people creating stand alone or one-off plugins could have that assistance in their code editor.

[JNavith]

[Disclaimer: I made this] It needs a lot of rough edges to be smoothed out but you can try importing from tailwindcss-plugin-author-types to get autocompletion and some validation when writing your own plugin in TypeScript.

Some plugins using it now:
tailwind-capsize
tailwindcss-custom-native
tailwindcss-theme-variants (mine)

[JNavith]

tailwindcss-theming also has self-written types

[jhechtf]

Is there any particular reason you wouldn't have added the definitions to something like the DefinitelyTyped repo so that people could install it from somewhere that garners a bit more trust? I personally am hesitant to install types from sources outside of definitelytyped unless I am either the author or I happen to get a good look thru their work before hand.

[JNavith]

I give you full permission to and appreciation for cleaning things up, typing the entire Tailwind API beyond just stuff to help plugin authors, and going through the proper channels to get it on @types/tailwindcss in a way that won't conflict with Tailwind Labs ever writing official types or having to deal with the hassle of supporting something they have nothing to do with.

[jhechtf]

Hmm.... well I'll see what I can do then.

[dolanmiu]

I have created high quality type definitions for tailwind:

DefinitelyTyped/DefinitelyTyped#50921

It will be downloadable by doing npm i @types/tailwindcss once this is merged!

Enjoy!

[dolanmiu]

There will be!

Check out: DefinitelyTyped/DefinitelyTyped#50921

It will be downloadable by doing npm i @types/tailwindcss once this is merged!

[dolanmiu]

Could you show me the documentation for that?

Or perhaps make a PR into the repo?

[jschaf]

See Jake's comment above. I haven't found good docs on plugin types. Jake's typings are the best docs I've found.

[Disclaimer: I made this] It needs a lot of rough edges to be smoothed out but you can try importing from tailwindcss-plugin-author-types to get autocompletion and some validation when writing your own plugin in TypeScript.

[dolanmiu]

When I find time, I will merge @JakeNavith's types into the DefinatelyTyped types!

[JNavith]

When I find time, I will merge @JakeNavith's types into the DefinatelyTyped types!

I would recommend against this. I think they need an extreme overhaul.

[tettoffensive]

Any update on this?

[MuhammadMinhaj]

Is there any official update for TypeScript definitions for Tailwind plugins?

[jofjro]

Hello there!

I think this type is already included. This is how I made the PluginsConfig (included in tailwindcss) type to work on my setup:

import type { PluginsConfig } from 'tailwindcss/types/config';

export const plugin: PluginsConfig[0] = {
    config: {
        theme: {
          //...
        }
    }
    handler() {
       // ...
    }
}

It seems a bit "hacky" to me because the type PluginsConfig is defined as an array of plugins so, it seems made up to be used inside the caller's config file only and not for the plugin development itself but, it works.

I'm using tailwindcss@3.4.1.

[MuhammadMinhaj]

@jofjro Thank you for sharing! I believe there's a more effective approach to utilize this in tailwindcss@3.3.0 and above. You can simply import PluginCreator from "tailwindcss/types/config" as demonstrated below:

import type { Config } from 'tailwindcss';
import { PluginCreator } from 'tailwindcss/types/config';

const containerPlugin: PluginCreator = ({ addComponents }) =>
  addComponents({
    '.container': {
      maxWidth: '1480px',
      margin: 'auto',
      paddingLeft: '20px',
      paddingRight: '20px'
    }
  });

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {},
  corePlugins: {
    container: false
  },
  plugins: [containerPlugin]
};
export default config;

[jofjro]

Thanks @MuhammadMinhaj!

You are probably right, but in that case you end up exporting a config and not a plugin, isn't it?

[MuhammadMinhaj]

Yes, I'm exporting as a config, not a plugin.