loading purged tailwindcss into an iFrame

Question

I have a vuejs component where I render a dynamic component inside an iFrame, but I don't know how to load my tailwindcss file in it....

At the moment I am creating an extra css file where I add all the styles I need by hand. I load this file with the raw loader and then append the string into the style tag, this works, but is a lot of work.

Or is there a way how I can generate a purged css file? I found only a cli command to build all classes based on my config file. npx tailwindcss build src/assets/css/tailwind.css -o dist/assets/css/index.css. But this is huge like 4MB and kills my browser.

My code

<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>

Answer 1

Make sure to set NODE_ENV=production on the command line when building your CSS. This ensures Tailwind removes any unused CSS from the file.

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