Support class lists

[100phlecs]

A pattern in the Phoenix default components is to separate classes into a list. Previously on the forum it was suggested to split classes up, with a declaration order. This is also found within another guide.

The work foreseen to support lists:

1. Switch to using Phoenix Liveview HTML tokenizer as it would make selecting a class list trivial, most of the codebase is wrangling with Regex
2. Split tailwind classes out into 3 to 5 categories which, when an option is flicked on, will sort the classes into a list of lists from a long string
3. Fix any regressions

The main thing up in the air is deciding how to divide the CSS classes. Tailwind already comes with three potential separations.

Further details:

Tailwind organizes the styles it generates into three different “layers” — a concept popularized by ITCSS.

• The base layer is for things like reset rules or default styles applied to plain HTML elements.
• The components layer is for class-based styles that you want to be able to override with utilities.
• The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.

Being explicit about this makes it easier to understand how your styles will interact with each other, and using the @layer directive lets you control the final declaration order while still organizing your actual code in whatever way you like.

Suggestions welcomed

[rmand97]

This feature would be greatly appreciated! :D

[100phlecs]

Class lists are now supported, re: #34

The extra bits in this issue about sorting the classes to a specific order and may be split out into a separate issue if that is desired