config @nuxt/tailwind for vue-styleguidist in show example <docs></docs>

268 Views Asked by At

I need show example in *.vue file project , I use Nuxt and @nuxtjs/tailwindcss when use tag for load my example style won't load. and show in inspect image

I need config my nuxtjs/tailwindcss for vue-styleguid.config. Please let me a config for resolve this solation. this is my 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"
  }
}

I need add @nuxt/tailwind in top config.

0

There are 0 best solutions below