Not necessarily TW specific, but does anyone have specific rules as to the order you write your TW classes within the markup?
Or any preferences on this? to make easier to digest?
e.g
alphabetically,
mobile first,
group - layout or visual classes or all rw:classes
i.e
class="sm:w-full // md:w-1/2 // lg:w-auto //// mb-4 // mr-4 // pr-4 //// text-grey // text-lg"
It’s hard to be consistent when you are pro-trying/playing so it might be one that needs to be refactored, once blocks are completed.
I tend to group certain classes into spacing (margin/padding), typography, mobile first for structure.
I know it is down to personal preference to some degree. Personally I find adding in the // helps, it is something I have done for a while now and it does make the classes more readable. Using TW I have thought to have the //// to split the different groupings.
edit: a link regarding this grouping from Harry Roberts. https://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/
An example based on the article above.
class="[sm:w-full // md:w-1/2 // lg:w-auto] [mb-4 // mr-4 // pr-4] [text-grey // text-lg]"
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4