feat: add tailwind class function

src/functions/tailwind.spec.ts

@@ -0,0 +1,24 @@
+import {twClassNameFn} from './tailwind'
+
+describe('Tailwind', () => {
+  it('should create a class function', () => {
+    const inputClasses = twClassNameFn(['bg-white', 'text-green', 'm-auto'])
+
+    expect(inputClasses()).toBe('bg-white text-green m-auto')
+    expect(inputClasses(['bg-yellow'])).toBe('text-green m-auto bg-yellow')
+    expect(inputClasses(['border'])).toBe('bg-white text-green m-auto border')
+  })
+
+  it('should override correctly', () => {
+    const inputClasses = twClassNameFn(
+      'w-full border border-gray-300 rounded p-2 xl:p-4 mt-2 mb-4 shadow'
+    )
+
+    expect(inputClasses()).toBe(
+      'w-full border border-gray-300 rounded p-2 xl:p-4 mt-2 mb-4 shadow'
+    )
+    expect(inputClasses('shadow-xl p-4')).toBe(
+      'w-full border border-gray-300 rounded xl:p-4 mt-2 mb-4 shadow-xl p-4'
+    )
+  })
+})

src/functions/tailwind.ts

@@ -0,0 +1,50 @@
+/**
+ * Provides a function for building Tailwind Class Strings. Define default classes that are then modified when the function is called.
+ *
+ * Example:
+ *
+ * ```
+ * const buttonClasses = twClassNameFn(['rounded', 'shadow'])
+ *
+ * buttonClasses() // 'rounded shadow'
+ * buttonClasses('shadow-xl bg-green') // 'rounded shadow-xl bg-green'
+ * ```
+ *
+ * @param twClasses A string or array of tailwind classes.
+ * @returns A function to add/replace classes in the class string.
+ */
+export const twClassNameFn = (twClasses: string[] | string) => {
+  const defaultClasses =
+    typeof twClasses === 'string' ? twClasses.split(' ') : twClasses
+
+  /**
+   * Add/Replace tailwind classes.
+   *
+   * @param classNames A string or array of tailwind classes.
+   * @returns A string of tailwind classes.
+   */
+  return (classNames: string[] | string = []) => {
+    const classes =
+      typeof classNames === 'string' ? classNames.split(' ') : classNames
+
+    let classesToApply = defaultClasses.map(className => {
+      const [prefix, value] = className.split('-')
+
+      return {prefix, value, className}
+    })
+
+    classes.forEach(className => {
+      const [prefix, value] = className.split('-')
+
+      classesToApply = classesToApply.filter(applicable => {
+        return applicable.prefix !== prefix
+      })
+
+      classesToApply.push({prefix, value, className})
+    })
+
+    return classesToApply.map(({className}) => className).join(' ')
+  }
+}
+
+// {twClassNameFn}