How to use tailwind inside an iframe?

@lew 

To use Tailwind inside an iframe, you will need to include the Tailwind CSS file in the HTML document that is being displayed inside the iframe. Here are the steps to do so:

Step 1: Include Tailwind CSS in the parent document

In the parent document that contains the iframe, add the following link tag to include the Tailwind CSS file in the head section of the document:

1

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

Step 2: Create the iframe element

In the parent document, create an iframe element and set the source attribute to the URL of the document where you want to use Tailwind CSS:

1

<iframe src="path/to/your/document.html"></iframe>

Step 3: Include Tailwind CSS in the iframe document

In the document inside the iframe (document.html in this example), add the following link tag to include the Tailwind CSS file:

1

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

Now, when you load the parent document in a web browser, the document displayed inside the iframe will also have access to the Tailwind CSS styles. You can then use Tailwind utility classes to style the content inside the iframe as needed.