Add sorting for modifier classes (`focus:`, `md:`...)

[phacks]

Hey everyone! This PR adds sorting for Tailwind modifier classes: md:w-12,hover:bg-gray-500...

The sort is as follows:

• Modifier classes are added after non-modifier classes, but before customClasses if those are appended
• For a given modifier (e.g. md:), the sort is the same as sortOrder
• Modifiers are sorted among one another in the order they appear in the Tailwind documentation.

This PR does not introduce all possible variations of all possible classes, but instead does the following:

• Get all classes with any modifier
• Split them out in one array per modifier
• Sort those individual arrays using sortOrder
• Flatten all the individual arrays

Example:

// Input:
"xl:mx-6 bg-gray-100 lg:mx-4 mt-1 sm:bg-gray-200 hover:bg-blue-100 lg:bg-gray-400 hover:text-blue-100 xl:bg-gray-600 sm:mx-2"

// Output:
"mt-1 bg-gray-100 hover:text-blue-100 hover:bg-blue-100 sm:mx-2 sm:bg-gray-200 lg:mx-4 lg:bg-gray-400 xl:mx-6 xl:bg-gray-600"

Closes #52, #104 and #142.

I’m not sure whether we should make the order of modifier classes, or modified vs. non-modified classes customizable. I’d suggest tackling this in a subsequent PR should we want to!

[AmirHosseinKarimi]

Hi. How is it going? Looks like the test has been failed. Can you guys fix it, please?

[phacks]

oops! Done!

[amritk]

Any word on a merge for this?

Edit: actually I gave it a try and it doesn't seem to work:

<View className='lg:text-black sm:text-black xl:text-black dark:bg-black flex-1 text-black bg-white'>

We would want the modifiers after the base classes