View TailwindCSS Classes in Preview

Features & ideas
1

I’ve been thinking about this feature for awhile and want to see if it is plausible. I also want to see if people would be interested. I’ve never built a plugin so it will be my first time and would love some guidance.

Idea
Being able to add tailwindcss utility classes to your notes and see it rendered or applied in the mark down preview.
ex:

<div class="text-red-400 bg-grey-200">
   <p> Hello World </p>
</div>
2

Hi Gracias,

Thanks for the question. I’m interested in it personally since I started using TailwindCSS in my projects.
I guess it’s technically possible by bundling those utilities into a CSS file somehow and loading it via a plugin.
You have to nest them all in a preview container class .mde-preview to avoid breaking other components outside the preview.
That being said, the CSS file could be huge and I don’t know how to solve it at the moment.

3

Yeah that makes sense. I wonder how big the CSS file would be and what would be the impact for performance on the app. I’ll look into it. Thanks for replying Takuya.

1 Like