Search code examples
typescriptpluginstailwind-css

`require` return is not typed properly (is `any`)

I'm trying to move tailwind custom plugin logic to a separate TypeScript file, but getting typing error:

require function is returning type any for plugin function.

I've tried assertion with PluginCreator type, which I declared in tailwind, but getting error: Cannot find name 'PluginCreator'.

Will appreciate any example.

enter image description here

Solution

  • The proper syntax for using require in Typescript is

    import const_name = require('pachage_name')

    which will compile to

    // js
const const_name = require('pachage_name')

    In your case, use

    import plugin = require('tailwindcss/plugin')

    If you can use the modern import syntax, it's better to use it already - require is slowly becoming outdated.

    // the modern ESModule import syntax:
import plugin from 'tailwindcss/plugin'

    which is compiled roughly to into the same js

    // actuall js will have some compability wrappers
// if tsconfig `esModuleInterop` is `true` this will work the same 
const plugin = require('tailwindcss/plugin')