class-order
is a JavaScript library that provides a unique approach to CSS class precedence, allowing HTML developers to control class precedence based on the order of classes within the class
attribute. This library is designed to offer an alternative to the traditional method where CSS rules defined later in the source override earlier rules.
You can install the library using npm:
npm install class-order
In React applications, you can use the merge
function from the class-order
library to control class precedence. Here's an example of how to use it:
import { merge } from 'class-order';
// ...
<div className={merge("classA classB ...")} /* other props */>
{/* Your component content */}
</div>
merge
takes a space-separated list of class names and arranges them in the order they appear within the class
attribute.
For Svelte applications, you can use the classOrder
directive provided by the class-order
library. Here's an example of how to use it:
<script>
import { classOrder } from 'class-order';
</script>
<div use:classOrder class="classA classB ..." /* other props */>
<!-- Your component content -->
</div>
classOrder
ensures that classes are applied in the order they appear within the class
attribute.
You can also import from class-order/tailwind-merge
if you just want to have a directive for this battle tested library.
-
Fine-grained Control: With
class-order
, you can explicitly determine class precedence by the order of classes in theclass
attribute. -
Drop-in Replacement: The library is designed to be a seamless replacement for
twMerge
in Tailwind CSS setups and can be easily integrated into existing projects. For a detailed comparison betweenclass-order
andtailwind-merge
, check out vs_twMerge.md.
You can import forceMerge
or forceClassOrder
respectively if you want to completely enforce class precedence in your class
attribute โ this will also override !important
properties, so your layout might break in multiple ways.
Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
Give class-order
a try and take control of CSS class precedence like never before! If you have any questions, feedback, or concerns, don't hesitate to reach out.