nuxt.js - 在显示示例中为 vue-styleguidist 配置 @nuxt/tailwind

Question

我需要在 *.vue 文件项目中显示示例，我使用 Nuxt 和 @nuxtjs/tailwindcss 时使用标签加载我的示例样式不会加载。并在检查中显示

我需要为 vue-styleguid.config 配置我的 nuxtjs/tailwindcss。请给我一个配置来解决这个问题。这是我的 styleguide.config.js

// eslint-disable-next-line no-unused-vars
const { resolve } = require("path")

const { getWebpackConfig } = require("nuxt")
const FILTERED_PLUGINS = [
  "WebpackBarPlugin",
  "VueSSRClientPlugin",
  "HotModuleReplacementPlugin",
  "FriendlyErrorsWebpackPlugin",
  "HtmlWebpackPlugin"
]

const docSiteUrl =
  process.env.DEPLOY_PRIME_URL || "https://vue-styleguidist.github.io"

/** @type import("vue-styleguidist").Config */
module.exports = async () => {
  // get the webpack config directly from nuxt
  const nuxtWebpackConfig = await getWebpackConfig("client", {
    for: "dev"
  })

  const webpackConfig = {
    module: {
      rules: [
        ...nuxtWebpackConfig.module.rules.filter(
          // remove the eslint-loader
          (a) => a.loader !== "eslint-loader"
        )
      ]
    },
    resolve: { ...nuxtWebpackConfig.resolve },
    plugins: [
      ...nuxtWebpackConfig.plugins.filter(
        // And some other plugins that could conflcit with ours
        (p) => !FILTERED_PLUGINS.includes(p.constructor.name)
      )
    ]
  }

  return {
    components: "components/**/*.vue",
    ribbon: {
      text: "Back to examples",
      url: `${docSiteUrl}/Examples.html`
    },
    webpackConfig,
    usageMode: "expand",
    styleguideDir: "dist"
  }
}

我需要在顶部配置中添加@nuxt/tailwind。