Is there a class order convention?

[pak11273]

I really like the idea of this library but the one bottleneck I'm having is when I go back to refactor a component, I find I spend most of my time having to search through all the classes in that component. Is anyone using a systematic approach to applying tailwind classes? eg. structure styles first then skin styles or just alpha. Is this even an issue for anyone?

[J-Cake]

No, I see where you're coming from. I've def thought about this too. I do this with regular CSS as well; I tend to go from as broad as possible to as specific. That means that things that will have the largest impact on appearance go first. I also tend to split layout and styling into separate files, but since that's not an option here, I'll omit that. Anyway. I'd start with layout, then move onto colours wherever applicable (background, foreground, borders, images etc) then onto finer detail (text underlines, font styles, border radii, animations etc.

Hope that helps

[pak11273]

@J-Cake This is what I've been doing, but it's kind of irritating that I have to search through the classes to put stuff in the right place, especially with components that have a lot of classes. With stylesheets I never worried about such things because you can autosort.

[J-Cake]

yes, I agree. Unfortunately, the only other thing I can recommend is applying classes programatically.

Specify an array in JS for layout, one for colour or however you want to lay out your styling system, then join the arrays, loop over it and apply each class sequentially.

That method is wayyyy overkill and I doubt whether it's actually gonna save time, but otherwise, I got nothing.

[J-Cake]

Unless you wanted to specify a JSON stylemap where you would specify certain element types and give them objects containing your types of styles which are arrays containing classes. It's still overkill and I think unnecessary but might be worth a shot

[pak11273]

I just had an idea! Something that could definitely solve the bloated html and unorganized classes. So TailwindCSS's mantra is "No more writing css". How about we include "No more looking at it either!" Let's combine speechrecognition technology with tailwind. You never have to worry about what classes a component consists of. Here's an example scenario:

"Siri create a container. Make it 960 pixels height and center it to the viewport."

You get the idea. Back to the real world. I think if I just get to know the classses more better then it won't be as bad. Cheerios!

[J-Cake]

That's a fantastic idea! Ugh, Elon will Love you! Don't forget me when you're under his employ okay? 🤣 🤣

[jlarmstrongiv]

I’ve been using https://github.com/heybourn/headwind to sort styles 😄

[J-Cake]

Nah, I prefer @pak11273 's suggestion - use Siri 😆😆. But seriously, that's a really good find. Thanks so much

[pak11273]

Good find indeed Thanks @jlarmstrongiv