fix: fix tailwind function for classes with multiple hyphens

Arcath · May 5, 2023 · 26bbcac · 26bbcac
1 parent 00ee772
commit 26bbcac
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/functions/tailwind.spec.ts b/src/functions/tailwind.spec.ts
@@ -21,4 +21,10 @@ describe('Tailwind', () => {
       'w-full border border-gray-300 rounded xl:p-4 mt-2 mb-4 shadow-xl p-4'
     )
   })
+
+  it('should support multi `-` classes', () => {
+    const gridClasses = twClassNameFn('grid grid-cols-3')
+
+    expect(gridClasses('grid-cols-4')).toBe('grid grid-cols-4')
+  })
 })
diff --git a/src/functions/tailwind.ts b/src/functions/tailwind.ts
@@ -28,13 +28,19 @@ export const twClassNameFn = (twClasses: string[] | string) => {
       typeof classNames === 'string' ? classNames.split(' ') : classNames
 
     let classesToApply = defaultClasses.map(className => {
-      const [prefix, value] = className.split('-')
+      const parts = className.split('-')
+
+      const value = parts.length > 1 ? parts.pop() : undefined
+      const prefix = parts.join('-')
 
       return {prefix, value, className}
     })
 
     classes.forEach(className => {
-      const [prefix, value] = className.split('-')
+      const parts = className.split('-')
+
+      const value = parts.length > 1 ? parts.pop() : undefined
+      const prefix = parts.join('-')
 
       classesToApply = classesToApply.filter(applicable => {
         return applicable.prefix !== prefix