将清除后的 tailwindcss 加载到 iFrame答案

【问题标题】：loading purged tailwindcss into an iFrame将清除后的 tailwindcss 加载到 iFrame
【发布时间】：2021-07-03 18:50:14
【问题描述】：

我有一个 vuejs 组件，我在 iFrame 中渲染一个动态组件，但我不知道如何在其中加载我的 tailwindcss 文件......

目前我正在创建一个额外的 css 文件，在其中手动添加我需要的所有样式。我使用原始加载程序加载此文件，然后将字符串附加到样式标记中，这可行，但工作量很大。

或者有什么方法可以生成一个清除的 css 文件？我发现只有一个 cli 命令可以根据我的配置文件构建所有类。 npx tailwindcss build src/assets/css/tailwind.css -o dist/assets/css/index.css。但这就像 4MB 一样大，会杀死我的浏览器。

我的代码

<template>
  <iframe ref="iFrame"></iframe>
</template>

<script>
import Vue from 'vue'
export default {
  
  props: {
    component: {
      type: String,
      required: true
    }
  },
  computed: {
    isComponent() {
      return () => import(`@/design-system/${this.component}.vue`)
    },
  },
  mounted() {
    const styles = require('!!raw-loader?esModule!@primitives/styles.css').default

    const iFrame = this.$refs.iFrame
    const style = document.createElement('style')
    const wrapper = document.createElement('div')
    style.appendChild(document.createTextNode(styles))
    style.appendChild(document.createTextNode(fonts))

    iFrame.contentWindow.document.head.appendChild(style)
    iFrame.contentWindow.document.body.appendChild(wrapper)

    new Vue({
      el: wrapper,
      render: h => h(this.isComponent)
    })
  }
}
</script>

【问题讨论】：

标签： vue.js iframe tailwind-css

【解决方案1】：

确保在构建 CSS 时在命令行中设置 NODE_ENV=production。这可确保 Tailwind 从文件中删除所有未使用的 CSS。

NODE_ENV=production npx tailwindcss build src/assets/css/tailwind.css -o dist/assets/css/index.css

【讨论】：