Tailwind CSS Class Sorting

### Tailwind CSS Class Sorting Rules
#### Core Principles
* Classes should be sorted in a consistent and predictable order to improve code readability and maintainability.
* The order of classes should follow a logical structure, making it easier to find and modify specific styles.

#### Code Style Guidelines
##### Class Ordering
1. **Positioning**: Classes related to positioning, such as `absolute`, `relative`, `fixed`, `sticky`, etc.
2. **Display**: Classes related to display, such as `block`, `inline-block`, `flex`, `grid`, etc.
3. **Spacing**: Classes related to margin, padding, and gap, such as `m-`, `mx-`, `my-`, `p-`, `px-`, `py-`, `gap-`, etc.
4. **Sizing**: Classes related to width, height, and size, such as `w-`, `h-`, `max-w-`, `max-h-`, etc.
5. **Typography**: Classes related to font family, size, weight, and style, such as `font-`, `text-`, etc.
6. **Color**: Classes related to text color, background color, and border color, such as `text-`, `bg-`, `border-`, etc.
7. **Border**: Classes related to border width, style, and radius, such as `border-`, `rounded-`, etc.
8. **Effects**: Classes related to shadow, opacity, and other visual effects, such as `shadow-`, `opacity-`, etc.
9. **Interactivity**: Classes related to hover, focus, and active states, such as `hover:`, `focus:`, `active:`, etc.
10. **Misc**: Any other classes that don't fit into the above categories.

##### Naming Conventions
* Use the official Tailwind CSS class names and syntax.
* Avoid using custom class names that conflict with Tailwind's utility-first approach.

#### Best Practices
* Use a consistent ordering throughout the project.
* Keep the number of classes per element to a minimum.
* Use the `@apply` directive to extract repeated styles into custom classes.
* Use a preprocessor or plugin to automate class sorting and formatting.

#### Common Pitfalls to Avoid
* Inconsistent class ordering, making it hard to find specific styles.
* Overusing custom class names, leading to a bloated and unmaintainable CSS codebase.
* Not utilizing Tailwind's utility classes, resulting in duplicated styles and increased CSS file size.
* Not keeping the class list concise, making it harder to read and maintain the code.