Skip to content

Conversation

@bkrmendy
Copy link
Contributor

@bkrmendy bkrmendy commented Dec 9, 2024

Resolves: #24

This PR exposes the getClassOrder function from Tailwind, and adds a test suite to showcase how it can be used.

getClassOrder can be used to implement functionality in the browser that's similar to what https://github.com/tailwindlabs/prettier-plugin-tailwindcss does. The concrete use cases for this could be

  • Sorting tailwind classes in a text editor that's running in the browser
  • Finding out what CSS properties and values will be applied to a given element. Sorting is relevant here, because if an element has conflicting props (for example left-1 inset-x-2, where left-1 set the left property, and inset-x sets both left and right), we need to know in what order Tailwind will apply these classes to which TW class takes effect.

@mhsdesign mhsdesign changed the title Expose getClassOrder from Tailwind FEATURE: Expose getClassOrder from Tailwind Dec 9, 2024
Copy link
Owner

@mhsdesign mhsdesign left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the excellent work and including the tests.

i like that this is still fairly simple and does not increase bundle size worth mentioning:

dist/module.esm.js 315.6kb

after:

dist/module.esm.js 316.1kb

@mhsdesign mhsdesign merged commit e1fe30c into mhsdesign:main Dec 9, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Expose getClassOrder from Tailwind

2 participants