将清除后的 tailwindcss 加载到 iFrame

Posted 2023-03-07

【中文标题】将清除后的 tailwindcss 加载到 iFrame

【英文标题】：loading purged tailwindcss into an 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>

【参考方案1】：

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

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