Inject tailwindcss into iFrame for design-system

[gregorvoinov]

Hi, I'm building a tool for creating design systems for my projects.

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

this is the 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>

At the moment I am creating an extra css file where I add all the styles I need by hand. This works, but is a lot of work.

How can I get the tailwindcss with my theme from the project into the iFrame?

What also would help would be a cli command where I get all used classes in my project. I only found a command where I get all classes npx tailwindcss build src/assets/css/tailwind.css -o dist/assets/css/index.cssbut this file is 3.3MB and kills my browser when loading.

When I build my project I was also searching for some css file, but this is inside some js files. so I can't use this.

I'm a UX/UI designer, so maybe this approach is completely wrong and real developers know better :) The reason for using iFrames is to get breakpoints work with the witdh of the container where the component lives.

I'm using "tailwindcss": "^2.0.3", and "vue": "^2.6.12".

[gregorvoinov]

Have updated to the new version 2.1 with Jit and now with npx tailwindcss build src/assets/css/tailwind.css -o dist/assets/css/index.cssit generates only the used classes... this helps a lot :)

But is this the best way to get all style to the iframe? First generate the file and then import with the raw-loader? Or is there a more webpack way, where I can link directly to the taiwindcss classes that I have used from my iframe?