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

kqqjbcuj 于 12个月前发布在其他

关注(0)|答案(3)|浏览(156)

我正在尝试使用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

字符串

css

来源：https://stackoverflow.com/questions/77411868/types-for-tailwind-css-match-utilities-and-theme

3条答案

按热度按时间

2lpgd9681#

我觉得你需要的是：

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

字符串

赞(0）回复(0）举报 12个月前

wqsoz72f2#

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

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

字符串

赞(0）回复(0）举报 12个月前

ufj5ltwl3#

对于matchUtilities和theme类型，您需要使用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

字符串

赞(0）回复(0）举报 12个月前

我来回答

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

3条答案

相关问题

热门标签

最新问答