Programmatically generate minimal styles from markup/strings?

[pjrundle]

Hi 👋

Big Tailwind fan here 🕺 - thanks for making life so much easier!

My colleague and I are working on a website builder app. We're using Tailwind throughout and it’s working great as usual. However, as per the discussion title, we have an issue when trying to harness Tailwind for user generated content.

The basic gist of what we think we need, is the ability to run JIT/Tailwind on smaller pieces of markup and generate a minimal set of styles from them - containing only the Tailwind classes that are present in those pieces of markup (see example below).

For more info about the use case, we have a site with a css bundle that is precompiled from the app source, main.css, which is generated with Tailwind. Then we have pieces of user-generated HTML which we need to be able to display on the site. If we run Tailwind on the user code, we end up with a separate piece of compiled css, let’s call this user.css, which includes all the Tailwind boilerplate, whereas what we actually need is often just a handful of CSS rules (which apply the Tailwind classes that appear in the user code which do not appear in main.css).

Plus, if you do the above and include both main.css and user.css, then ordering issues cause rules from user.css to override main.css, causing layout/styling bugs.

Here’s a sketch of how we imagine this might be done in code (pseudocode) using some imagined utlities:

import {jit, dedupe, uniqued} from 'tailwind-jit'

const markupA = `
 <div class="bg-[red] text-white p-4">
   <h1 class="md:bg-custom-color-300">Hello world</h1>
 </div>
`
const resultA = jit(markupA, projectTailwindConfig)
/*
 .bg-[red] {background-color: red;}
 .text-white {color: #ffffff;}
 .p-4 {padding: 1rem;}
 .md\bg-custom-color-300 {
   @media (min-width: 768px) {
     background-color: #d1d5db;
   }
 }
*/

const markupB = `
 <div class="bg-[red] text-black p-6">
   <h1 class="md:bg-different-custom-color-700">Hello world</h1>
 </div>
`
const resultB = jit(markupB, projectTailwindConfig)
/*
  .bg-[red] {background-color: red;}
  .text-black {color: #000000;}
  .p-6 {padding: 1.5rem;}
  .md\bg-custom-color-300 {
    @media (min-width: 768px) {
      background-color: #d1d5db;
    }
  }
*/

const dedupedCss = dedupe([resultA, resultB])
/*
  .bg-[red] {background-color: red;}
  .text-white {color: #ffffff;}
  .text-black {color: #000000;}
  .p-4 {padding: 1rem;}
  .p-6 {padding: 1.5rem;}
  .md\bg-custom-color-300 {
    @media (min-width: 768px) {
      background-color: #d1d5db;
    }
  }
*/

const uniqued = uniquedCss(resultA, resultB)
// All the styles in resultB that aren't in resultA
 /*
  .text-black {color: #000000;}
  .p-6 {padding: 1.5rem;}
*/

Is it possible to achieve something like the above this using anything that you provide, or plan to provide in the near future?