tailwind css的类型匹配实用程序和主题

kqqjbcuj  于 12个月前  发布在  其他
关注(0)|答案(3)|浏览(157)

我正在尝试使用Tailwind插件,但出现了TypeScript error。matchUtilities和主题的类型是什么?

const plugin = require('tailwindcss/plugin')
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette')
import type { Config } from 'tailwindcss'

type colo = ["wh","bla","ora","gra"];
const config: Config = {
  plugins: [
    plugin(function ({ matchUtilities, theme } : { matchUtilities : any, theme : any }) {
      matchUtilities(
        {
          'my-custom-class': (value : colo) => ({
              backgroundColor: value,
              color: theme('colors.white') 
          }),
        },
        { values: flattenColorPalette(theme('colors')) } 
      )
    }),
  ],
}
export default config

字符串

2lpgd968

2lpgd9681#

我觉得你需要的是:

import type { PluginAPI } from "tailwindcss/types/config";

字符串

wqsoz72f

wqsoz72f2#

如果你的tailwind文件是js格式的,

/** @type {import('tailwindcss').Config} */
module.exports = {
...
};

字符串

ufj5ltwl

ufj5ltwl3#

对于matchUtilitiestheme类型,您需要使用PluginAPI
下面是你的例子:

const plugin = require('tailwindcss/plugin')
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette')
import type { PluginAPI } from "tailwindcss/types/config";

type colo = ["wh","bla","ora","gra"];
const config: Config = {
  plugins: [
    plugin(function ({ matchUtilities, theme } : { matchUtilities : PluginAPI["matchUtilities"], theme : PluginAPI["theme"] }) {
      matchUtilities(
        {
          'my-custom-class': (value : colo) => ({
              backgroundColor: value,
              color: theme('colors.white') 
          }),
        },
        { values: flattenColorPalette(theme('colors')) } 
      )
    }),
  ],
}
export default config

字符串

相关问题