Proposal : Tailwind config matching

[kctdfh]

Hey! Thanks for the amazing plugin!

I have a feature idea: it would be cool to be able to respect our Tailwind config so that the resulting code uses our custom colors and such.

There are two possible implementations (as I see it):

1) Upload config file

Using this approach, I'd provide a config file to the plugin before doing anything. It'd then match my config values against my styles. So if I have a color style called "Light Blue" with the HEX value of #BFDBFE and a color in my config file called "blue-faint" with the same HEX code, then the plugin would generate .bg-blue-faint whenever it sees an element that has "Light Blue" applied as the fill style.

2) Respect style names

If I have a button with a fill color style called lightBlue, then the code should give me .bg-lightBlue. It would be my responsibility to make sure my Tailwind config file defines a lightBlue color.

Now, how would it work with text styles? For the first option, if I have a text style defined in my config file as such:

// tailwind.config.js module.exports = { theme: { fontSize: { 'small': ['11px', { letterSpacing: '0em', lineHeight: '14px', }], } } }

The plugin would apply the .text-small class to my generated code whenever it sees a text element that has 11px size, 0% spacing, and 14px line-height. Be it due to an applied style or not.

For the second option, the plugin would look at the text style I've applied to the element and just use that name for the Tailwind code. So if my text style is called Small, it would apply the .text-small class to my generated code. Although text styles have font weight applied to them as well, Tailwind text presets don't support that. The plugin already recognizes this and applies .font-{weight} beautifully.

A fancy option would be ignoring any words or numbers that allude to the weight when extracting text styles from the element. So if my applied text style is called "Small Semibold" or "Small 700", the plugin would just create .text-small and ignore "Semibold" or "700".

Again, thanks for the amazing plugin! I'd help myself but I'm primarily a designer and don't have the skills required to achieve this!

[bernaferrari]

That's actually a good idea and something I've thought before. The biggest issue is not the back-end, it is the front making sure I get the file and then pass to the back. I need more time (or possibly even help) to refine the UI :( .

[kctdfh]

I can help out with the ui but don't have any idea how the backend works. Started learning Svelt a couple of weeks ago as well so would probably be able to implement a ui without changing much. I could make some prototypes this week and we can decide where to go from there. Is that okay with you? Should I put them under this issue or email?

[bernaferrari]

Anywhere is fine. Here is fine, email is fine, whatever is best. I see Figma to Code migrating to a UI more like Scripter with a side-panel instead of top things.

I don't like svelte that much and I've thought about dropping it and using React instead, but right now we have the ability to just recompile the front-end/back-end, if we used webpack for everything, watch would be very slow. And since we are not doing almost anything in svelte, it is not helping or disrupting anything.

What I need help the most would be making a drag-and-drop(?) or file-picker(?) for the tailwind config file. If you can make that work, I can save it locally, and start working on taking care of the rest.

[kctdfh]

Hey! So I made some sketches, trying to be as close to the Figma native UI as possible. The Figma file is a mess but if you like the direction of this UX, I can create a Figma file with constraints, components, and empty states. What do you think?

I can code this Tailwind for you but I don't know any React. For config upload we can use a library like react-dropzone to make it work. There are dropzone components for Svelte as well, if you're not looking to migrate to React just yet.

Code view

Tokens view

Config view

[bernaferrari]

Wow! You are really good at design! I really like it!

I think in the Frameworks (left panel) I would add a "mobile" and "web" separators, so users can have a clear idea of what they want. I'm also going to support Compose in the future, so that's good.

I can code this Tailwind for you but I don't know any React

You are on a lucky day. Currently, the plugin uses Tailwind 2 + Svelte :P
If you could make a sketch in Tailwind, it could save me a lot of time.

Regarding the Figma file, yeah, go ahead, make it! Great idea.

[kctdfh]

Glad you like it! I'll get to work on this and will keep you updated.
Will probably be done in around 10 days!
Cheers!

[bernaferrari]

Thanks. If you have any questions or need anything, feel free to say.

[kctdfh]

Hey @bernaferrari ! So sorry I got caught up with a ton of work and haven't had the chance to code the UI for some time now. Finally managed to do it today! Have a look and let me know what you think

I'm going to add a little bit of interactivity as well. But wanted you to see the basic structure first.

Would you like me to extract the reused class lists into components with @apply or would you rather have the full class list on the markup?

Cheers and sorry again for the long delay!

[bernaferrari]

Hey @kctdfh, don't worry!

Yeah, that looks really awesome. There a few small things I would probably tweak (like About could be a single page) :P but overall I'm impressed and your work is very very good! It could probably be merged already.

Would you like me to extract the reused class lists into components with @apply or would you rather have the full class list on the markup?

I don't know 😂 do what you think is best. I have never used @apply, but if you think that's the right way (and it doesn't break syntax highlighter, because my switch breaks it), go ahead! If you instead prefer doing everything by hand, there is also no problem, the UI is not HUGE and there are not a lot of things can be reused. I'll let you take that decision :P

[kctdfh]

@bernaferrari !

About apply, I do agree that it's more useful for design systems and larger interfaces. It's probably easier to keep it this way! And yeah apply breaks CSS validation so you'll have to write your own validation rules with Stylelint.

This past week I started doing adjustments here and there and almost re-wrote 80 percent of the whole thing! Check out the new version available through the same repository. Pretty happy with this one and I think it's ready for the Svelte treatment!

The main changes are as such:

• The repository is set up to use the new tailwindcss/jit approach. I find it a lot faster to experiment with and thought to add it to this project too. The result is essentially the same but in addition to 100x faster compile times, we can also have custom classes like w-[500px] and chained variants like disabled:hover:focus:bg-red. Just run the Serve command and start typing class names in the HTML file. In >100ms your styles.css file will be updated to include the class. No config required. Run Production to get a fully purged file.
• Brough all the custom CSS into a <style> tag since we won't be using apply. It's also easier to keep track of them like this and styles.css becomes only for Tailwind generated classes.
• Added a Use just-in-time (coming soon) checkbox to the Tailwind options. I think it'd be a great addition but I'm not going to be able to build it (it's not out of beta yet either) and I don't know what your vision / roadmap is for this project so adding it is fully up to you. Check out the comments on the HTML file - you can easily bring back to old set of options.
• Took the About link from the left menu and put it as a button on the main header. Looks cleaner and opens the whole thing on one page.
• Fixed a ton of color, button style, and text style inconsistencies.
• Made all the header texts non selectable.
• Transitions are now a little bit animated to make the UI softer and friendlier.
• Never was a fan of Flutter's Tokens view so I reworked it a few different ways and arrived at this. The last iteration of this page was missing your contrast checker as well so I added that too. My data comes from this free API. Take out the &api from the end of the URL to see the browser tool. I'm sure you'd want to make it work offline so the implementation is up to you.
• The contrast ratings also have tooltips so the user isn't confused as to what their text color means. Just hover over one of the ratings to see it.
• The Tokens view didn't have an empty / unselected state so I made one. The same layout can be used for Tailwind's Tokens view as well.
• I had totally forgotten about notifications! Added the markup for a success and an error notification but didn't animate them cause I only know how to do it with jQuery and you'll be using Svelte.

This was really fun! Let me know if you find a bug or need me to change something!

[bernaferrari]

That was really incredible, thanks for the help.

Now I need to see how to make webpack work with it 😂. I tried last Sunday, but I couldn't. Even if I remove Svelte, that wouldn't a problem. If you are an expert in this, please let me know. But I'm going to try again this weekend.

[kctdfh]

Interesting! Tailwind JIT doesn't work? Unfortunately I haven't used Webpack at all and the config is such a world onto itself that I probably won't be able to troubleshoot your issue. Won't it work if you just include the CSS? Or use Snowpack/ Vite instead?

[bernaferrari]

hey @kctdfh, good news. I got JIT working and I have already ported part of your layout.

Bad news: I need your help here:

<div class="flex flex-row">
  <div class="w-36 flex-none bg-red-100">LEFT PANEL</div>
  <div class="flex-grow flex flex-col bg-green-100">
    Code | Token
    <div class="">
      <div class="overflow-scroll text-sm whitespace-pre-wrap">
        ksdfijokdsfijoijodsifsdijodsfjioaIJUSJSDFIJOFDDSIiojjfsdfijodsfjsdiojfdsijofdsjiodfijosfijodsfijods
        ojfdijos jodisfijos dfijosdjiofdsoijf dijosfjo isdoifsdijofijodsjio
      </div>
    </div>
  </div>
</div>;

How do I get this working? It needs to be self-contained, but it isn't.

[bernaferrari]

help

[kctdfh]

@bernaferrari sorry mate totally missed this! This is the code snippet, right? What do you mean by self contained?

[bernaferrari]

I don't want the text to overscroll to the right, and I can't seem to find a solution. That is the minimum reproducible example.

[kctdfh]

The way I got the code snippet to work was by putting a code tag inside a pre

Json is a class meant for the code highlighting library I used

[bernaferrari]

I know about that, but whitespace-normal doesn't work with code formatting, and then text goes to the right more than it should.

[kctdfh]

Ah okay I'll have a look tonight! Sorry was a bit confused! Give me 12 hours or so I'll find a solution

[bernaferrari]

Haha ok, thanks! I just want that code to work (probably using w-full/flex/something), but NOTHING I tried worked.

[kctdfh]

Okay I think I fixed it - you need to check though. I think it was a word-break issue. The code block needs to have a word-break: break-all CSS so that long text strings without any spaces wrap when there's no more horizontal space. In my repository, the issue is caused by the Highlight JS class that is added, called .hljs. You'll have to override the default styles.

Check out the new file I added to my repository called code-bug.html which has this fix. Try taking out the .hljs override to see how it breaks.

Whatever way you choose to highlight the code, the code block itself needs to have this word-break attribute.

[bernaferrari]

I'll check. Thanks. What if I want the code to go to the horizontal (i.e. not wrap)? I can't get the overscroll to fill the current screen.

[kctdfh]

Making the code block only vertically scrollable was a UX decision I made based on my experience extensively using the plugin. I think it's much easier to see the tag hierarchy and the class assignments if everything has the same width. Having to scroll horizontally means that you can't really see the generated code at a glance. Especially since you don't prettify the code.

But if you want to make it horizontally scrollable, then the only solution I found was making the width and height of the code block an absolute number. I pushed a new file that demonstrates this. The right section is now w-[533px] instead of w-full and the code block has a max height value equal to that of its parent element. Obviously, word break needs to be set to normal again as well.

To make the custom scrollbar work, I also added a height: 6px attribute to the scrollbar pseudo class since all of the scrollbars so far have been vertical.

[gabrielrinaldi]

Is there still a plan to support loading a custom theme into the plugin? With the addition of Figma variables (for light/dark modes) you lose the token when using dev mode (as the color becomes the variable name). It would be nice to get the name of the color based on the Tailwind configuration (which we customized), but right now it shows the class based on the default Tailwind configuration which is not helpful in our use case.

[bernaferrari]

Maybe. I had one month to play with dev mode before it was released. They didn't give me pre-access to variables, so I need to see how viable it is.

[boyankostov]

Is there any update on this? The default Tailwind config breaks particularly badly with custom typography even if all of the rest keeps up with the default Tailwind syntax. Would love to be able to upload a custom config in a simpler UI than what FireJet offers.