Find a better way to preview Tailwind

[davestewart]

I was wondering if it was possible to open Tailwind code in Tailwind Playground

Whilst not possible to do directly, a simple Chrome extension could act as a bridge.

The steps would be as follows:

• Figma plugin opens new window, either the Tailwind Playground URL directly (or maybe a chrome extension page)
• the Tailwind HTML would be encoded in the URL
• the extension could (I think?) run javascript in the main page using the MAIN execution context:

const url = new URL(location.href)
const html = url.searchParams.get('html')
if (html) {
  MonacoEditor.getModel().setValue(html)
}

Have done a quick experiment, and the code does set the Tailwind Playground code, would just have to confirm the extension could access the MonacoEditor global.

[bernaferrari]

Maybe tailwind playground is not doable, but codepen/codesandbox/replit/others would be doable?

[davestewart]

I've been thinking through this a bit more, and actually it might just be better to render Tailwind directly in the responsive preview.

See also:

• 116

[bernaferrari]

If you know how, I would accept.. But I don't know how.

[davestewart]

I think it might be possible using the Play CDN:

• https://tailwindcss.com/docs/installation/play-cdn

For arbitrary rules, a custom config can be created injected (see further down page).

I don't know if it's possible to run inside the Figma environment, but might be an option.

Have also seen some solutions where classes were generated, but it adds about 1.2MB to the size of the CSS. For arbitrary classes (size, color) could probably parse the markup and add styles dynamically.

Another option might be to see how Tailwind Config Viewer does it:

• https://github.com/rogden/tailwind-config-viewer

Happy to take a look.

[bernaferrari]

Play cdn won't work because plugin has no internet connection. Could flex that a bit,allow and see if it works well, but I don't know.. What do you think? 1mb is probably too much for Figma. I don't know how to fix this in a good way.

On Sat, Jul 13, 2024, 11:56 Dave Stewart @.***> wrote:

I think it might be possible using the Play CDN:

• https://tailwindcss.com/docs/installation/play-cdn

For arbitrary rules, a custom config can be created injected (see further down page).

I don't know if it's possible to run inside the Figma environment, but might be an option.

Have also seen some solutions where classes were generated, but it adds about 1.2MB to the size of the CSS. For arbitrary classes (size, color) could probably parse the markup and add styles dynamically.

Happy to take a look.

— Reply to this email directly, view it on GitHub https://github.com/bernaferrari/FigmaToCode/issues/114#issuecomment-2226941479, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACVXFJXFFGD37S4DFEILCLZME5ZTAVCNFSM6AAAAABKVMLLLSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRWHE2DCNBXHE . You are receiving this because you commented.Message ID: @.***>

[davestewart]

I've had a few attempts to make this work and coming up short.

Attempt 1: Use a precompiled Tailwind v2 source

I grabbed the Tailwind 2 CSS from a CDN.

This mainly works, but I know there's a few changes from v2 to v3, esp with colors.

Attempt 2: Compile Tailwind using Post CSS

I got Tailwind compiling with JIT via Post CSS in Node, but I can't get it to run in the Figma build env.

Seems to be problems with built-ins like FS which I can't seem to get around, even though I've tried multiple polyfills etc.

Going to pause effort on this for now.

Attempt 3:

Not tried this yet, but think could be an option to:

• identify the finite classes needed, such as layout, default colours, etc
• build this set of classes using some of the techniques above
• also possibly leverage Tailwind's default config (see packages/backend/node_modules/tailwindcss/stubs/config.full.js)
• create additional arbitrary classes (size, colors) on the fly

I think for now – as I need to get back to work – I'm going to pause this, but think it's worth exploring. 

If you fancy generating a base set of Tailwind class names (colors, sizes, borders, etc) that you think FigmaToCode can output, I can PR the script above, and we could at least use that as a build step to generate a TW config that we could load into the Plugin UI, as step 1.

Might even be easier to do this with code, seeing as you have a lot of the sizes already mapped.

LMK and I can PR the core code.

[bernaferrari]

Seems the only way is via the web. Thanks for looking trough. Another possibility would somehow be mapping Tailwind colors and attributes to html in a way. But don't worry.

On Mon, Jul 15, 2024, 10:10 Dave Stewart @.***> wrote:

I've had a few attempts to make this work and coming up short. Attempt 1: Grab the Tailwind 2 compiled source

This mainly works, but I know there's a few changes from v2 to v3, esp with colors.

CleanShot.2024-07-15.at.14.07.30.png (view on web) https://github.com/user-attachments/assets/41399694-e693-46e7-9e43-61774b595201 Attempt 2: Compile Tailwind using Post CSS

I got Tailwind compiling with JIT via Post CSS in Node, but I can't get it to run in the Figma build env.

CleanShot.2024-07-15.at.13.51.53.png (view on web) https://github.com/user-attachments/assets/5097c3e1-5523-4959-b3d3-b6f81cac7f15

Seems to be problems with built-ins like FS which I can't seem to get around, even though I've tried multiple polyfills etc.

Going to pause effort on this for now. Attempt 3:

Not tried this yet, but think could be an option to:

• identify the finite classes needed, such as layout, default colours, etc
• leverage Tailwind's default config (see packages/backend/node_modules/tailwindcss/stubs/config.full.js)
• build this set of classes using some of the techniques above
• create additional arbitrary classes (size, colors) on the fly

I think for now – as I need to get back to work – I'm going to pause this, but think it's worth exploring.

— Reply to this email directly, view it on GitHub https://github.com/bernaferrari/FigmaToCode/issues/114#issuecomment-2228469865, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACVXFPVNCGGXM2NQ7OPKILZMPC2ZAVCNFSM6AAAAABKVMLLLSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRYGQ3DSOBWGU . You are receiving this because you commented.Message ID: @.***>

[davestewart]

Check my updated comment above. I think we could successfully leverage Post CSS to build just the classes we're using in F2C.

[bernaferrari]

I liked approach 3 because if we make html output Tailwind colors somehow, then it is very easy. Only code would be potentially ugly.

[davestewart]

OK. I propose the PR would look something like this:

Build time:

• I push a script with the PostCSS generation code
• you work on the permutations for possible classes
• final script outputs all these classes to a static file which is imported in the Plugin UI (we could even prefix these classes with something like .preview, so .preview .bg-red-500 { ... }

Run time:

• design regexp to grab arbitrary class names (text|bg)-\[(.+?)\] (perhaps you can advise on TW class names)
• add functions to generate arbitrary classes (should be straightforward to copy TW code)
• process HTML code to grab tokens
• pass Tailwind code and additional Tailwind classes to Plugin UI from backend

I'm happy to take the Post CSS stuff if you want to take more of the client code?

[davestewart]

It looks like additional processing will also be needed for transparent colors too, as not only can /25 not be passed as a token to the compiler, but passing all those transparency variants would balloon the file size.

I think we can get somewhere which will work, but indeed, Tailwind is tricky!

[davestewart]

Some additional tweaks needed, but do seem to be getting somewhere:

[bernaferrari]

Yeah, I can help. Whatever you do, make it easy to update, because Tailwind 4 will come one day and it is going to be big.

So, are we kind of reverse-engineering tailwind to output html? Does it add 1mb or not?

[davestewart]

So, are we kind of reverse-engineering tailwind to output html

Kind of:

• pre-compiling 90% of the base classes
• generating the remaining 10% (mechanism TBC)

Suspect will need to generate from markup:

• arbitrary values
• arbitrary colors
• transparent colors

Have been tweaking classes in the devtools and it feels way better to be able to toggle TW classes than guess what they might be once they are copied and pasted elsewhere. Not perfect compared to an actual JIT compiler, but feels like it could certainly be better than the HTML stand-in.

FWIW, final-generated classes are:

/**
 * Add all combinations of class names
 *
 * Listed in order of Tailwind docs
 */
function makeClasses() {
  // layout
  add("block inline-block inline flex inline-flex grid inline-grid hidden"); // https://tailwindcss.com/docs/display
  add("static fixed absolute relative"); // https://tailwindcss.com/docs/position
  add("top", config.layoutSize); // https://tailwindcss.com/docs/top-right-bottom-left
  add("right", config.layoutSize);
  add("bottom", config.layoutSize);
  add("left", config.layoutSize);
  add("start", config.layoutSize);
  add("end", config.layoutSize);

  // flexbox
  add("basis", config.layoutSize); // https://tailwindcss.com/docs/flex-basis
  add("flex", "row row-reverse col col-reverse"); // https://tailwindcss.com/docs/flex-direction
  add("flex", "wrap"); // https://tailwindcss.com/docs/flex-wrap
  add("grow grow-0"); //https://tailwindcss.com/docs/flex-grow
  add("shrink shrink-0"); //https://tailwindcss.com/docs/flex-shrink
  add("gap", config.layoutSize); // https://tailwindcss.com/docs/gap
  add("gap-x", config.layoutSize);
  add("gap-y", config.layoutSize);

  // flexbox align
  add("justify", "normal start end center between around evenly stretch"); // https://tailwindcss.com/docs/justify-content
  add("justify-items", "start end center stretch"); // https://tailwindcss.com/docs/justify-items
  add("justify-self", "auto start end center stretch"); // https://tailwindcss.com/docs/justify-self
  add("content", "normal center start end between around evenly baseline stretch"); // https://tailwindcss.com/docs/align-content
  add("items", "start end center baseline stretch"); // https://tailwindcss.com/docs/align-items
  add("self", "auto start end center stretch baseline"); // https://tailwindcss.com/docs/align-self

  // spacing
  add("p", config.layoutSize); // https://tailwindcss.com/docs/padding
  add("px", config.layoutSize);
  add("py", config.layoutSize);
  add("m", config.layoutSize); // https://tailwindcss.com/docs/margin
  add("mx", config.layoutSize);
  add("my", config.layoutSize);
  add("space-x", config.layoutSize); // https://tailwindcss.com/docs/space
  add("space-y", config.layoutSize);

  // sizing
  add("w", config.layoutSize); // https://tailwindcss.com/docs/width
  add("min-w", config.layoutSize); // https://tailwindcss.com/docs/min-width
  add("max-w", config.layoutSize); // https://tailwindcss.com/docs/max-width
  add("h", config.layoutSize); // https://tailwindcss.com/docs/height
  add("min-h", config.layoutSize); // https://tailwindcss.com/docs/min-height
  add("max-h", config.layoutSize); // https://tailwindcss.com/docs/max-height
  add("size", config.layoutSize); // https://tailwindcss.com/docs/size

  // typography
  add("text", config.fontSize); // https://tailwindcss.com/docs/font-size
  add("italic not-italic"); // https://tailwindcss.com/docs/font-style
  add("font", config.fontWeight); // https://tailwindcss.com/docs/font-weight
  add("tracking", config.letterSpacing); // https://tailwindcss.com/docs/letter-spacing
  add("leading", config.lineHeight); // https://tailwindcss.com/docs/line-height
  add("text", "left center right justify start end"); // https://tailwindcss.com/docs/text-align
  add("text", config.color); // https://tailwindcss.com/docs/text-color
  add("uppercase lowercase capitalize normal-case"); // https://tailwindcss.com/docs/text-transform
  add("text", "wrap nowrap balance pretty"); // https://tailwindcss.com/docs/text-wrap
  add("align", "top middle bottom"); // https://tailwindcss.com/docs/vertical-align

  // backgrounds
  add("bg", config.color); // https://tailwindcss.com/docs/background-color

  // borders
  add("rounded", config.borderRadius); // https://tailwindcss.com/docs/border-radius
  add("border", " 0 2 4 8"); // https://tailwindcss.com/docs/border-width
  add("border", config.color); // https://tailwindcss.com/docs/border-color
  add("border", "solid dashed dotted double hidden none"); // https://tailwindcss.com/docs/border-style

  // effects
  add("shadow", config.shadow); // https://tailwindcss.com/docs/box-shadow
  add("shadow", config.color); // https://tailwindcss.com/docs/box-shadow-color
  add("opacity", config.opacity); //https://tailwindcss.com/docs/opacity

  // filters
  add("blur", config.blur); // https://tailwindcss.com/docs/blur
}

This basically generates custom @apply classes which are then extracted and renamed as per the original TW classes and output as a CSS file:

#preview .border-slate-950 {
  --tw-border-opacity: 1;
  border-color: rgb(2 6 23 / var(--tw-border-opacity));
}

#preview .border-gray-50 {
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity));
}

...

#preview .px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

#preview .px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

#preview .px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

...

Does it add 1mb or not?

178K at the mo, which is manageable.

it is going to be big

Big, in what way?

[davestewart]

Morning update...

Tailwind classes:

• have added all supported TW classes; TW size is now 178K
• could potentially output CSS as JSON, and add classes to preview on demand (vs adding the whole stylesheet)
• could also potentially generate the current tailwindConfig.ts file using values (though, hardcoded is still fine)

Preview generation:

• am successfully sending Tailwind preview markup from backend
• have arbitrary colors, opacities and sizes (w h p m px py mx my gap) working

Here's how it's looking right now (outline just for debugging purposes):

Next steps:

• use this preview to wrap up the work on #113
• push PR for #116 (if you're happy with going in that direction? it is more useful)
• push PR for Tailwind preview (would be a WIP, and need a bit more work, but close, I would say)

[bernaferrari]

Looks fantastic. Do you need any help?

On Tue, Jul 16, 2024, 09:15 Dave Stewart @.***> wrote:

Morning update...

Tailwind classes:

• have added all supported TW classes; TW size is now 178K
• could potentially output as JSON, and just add classes as needed (vs adding the whole stylesheet)

Preview generation:

• am successfully sending TW to preview from backend
• have arbitrary colors, opacities and sizes (w h p m px py mx my gap) working

Here's how it's looking right now (outline just for debugging purposes):

CleanShot.2024-07-16.at.13.13.04.png (view on web) https://github.com/user-attachments/assets/1515e636-483a-46e4-8d17-4319752667cb

— Reply to this email directly, view it on GitHub https://github.com/bernaferrari/FigmaToCode/issues/114#issuecomment-2230741013, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACVXFJE6MZ7DEBACB4G6GTZMUFF5AVCNFSM6AAAAABKVMLLLSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMZQG42DCMBRGM . You are receiving this because you commented.Message ID: @.***>

[davestewart]

Probably for QA!

Also, hoping to get all three over the line ASAP. How are you fixed for reviews in the next day or so?

And, would be great to get the various updates published sooner rather than later so my team can use them.

[davestewart]

Question regarding left and top values.

In the tailwind builder, size values pass through the conversion tables / rounding function, but position values do not.

Just checking that this is intentional?

(I wonder if at some point in the future there might be more granular control over which properties get rounded).

[davestewart]

OK, so FINALLY got all the flexbox layout code working, along with the new Tailwind renderer, and updated preview renderer:

It's pretty cool; the new renderer now shows real Tailwind, with the rounding of sizes, colors, as well as user colors (variables).

The reason why user colors are showing as stripes above, is because I'm working to add Figma's codeSyntax property, which will mean we won't have to fall back to deriving TW names names from variable names, the user will be able to specify them in the UI:

Overall... very nearly there!

[bernaferrari]

Amazing!

[bernaferrari]

In the tailwind builder, size values pass through the conversion tables / rounding function, but position values do not.

I don't know lol I think it wasn't intentional, but maybe I found it easier that way, because you have top-4 left-[17px], quickly becomes weird, could be that.. I don't remember. Feel free to fix it!

Edit: oh, I think I know. There wasn't top-[17px] before, so it was too much work to switch between JSX and Tailwind, I simplified.

[davestewart]

With the initial work on variables done, I'll look to implement them for numbers soon, then the choice to use exact values or rounded values can be chosen per-property.