feat: add cn utility

Release-As: 0.2.0

README.md

@@ -14,8 +14,8 @@
 is has **zero dependencies**. ofc you need to have `tailwindcss` set up
 in your project.
 
-currently it has only one plugin: `ligatures`. more might be added in
-the future.
+currently it has only one plugin `ligatures` and one utility `cn`. more
+might be added in the future.
 
 ## usage
 
@@ -28,6 +28,10 @@ bun add @latehours/tailwind
 yarn add @latehours/tailwind
 ```
 
+### `ligatures` plugin
+
+define how ligatures should behave.
+
 in your `tailwind.config.mjs`:
 
 ```typescript
@@ -55,6 +59,19 @@ in your `file.html` or `component.tsx`:
 <div class="ligatures-no-contextual">no contextual ligatures</div>
 ```
 
+### `cn` utility
+
+merge classnames together.
+
+first add `clsx` and `tailwind-merge` to your deps then you can use `cn`:
+
+```typescript
+import { cn } from "@latehours/tailwind/cn";
+
+const padding = "p-4";
+const classes = cn("text-red-500", "bg-blue-500", padding);
+```
+
 ## development
 
 To install dev dependencies:

package.json

@@ -14,7 +14,10 @@
   "keywords": [
     "tailwind",
     "tailwind plugin",
-    "ligatures"
+    "ligatures",
+    "cn",
+    "classnames",
+    "tailwindcss"
   ],
   "author": "jozan <johan@latehours.net>",
   "sideEffects": false,
@@ -24,16 +27,19 @@
       "types": "./dist/dts/ligatures.d.ts",
       "import": "./dist/esm/ligatures.js",
       "default": "./dist/esm/ligatures.js"
+    },
+    "./cn": {
+      "types": "./dist/dts/cn.d.ts",
+      "import": "./dist/esm/cn.js",
+      "default": "./dist/esm/cn.js"
     }
   },
-  "files": [
-    "./dist/**/*.js",
-    "./dist/**/*.d.ts",
-    "./dist/**/*.map"
-  ],
+  "files": ["./dist/**/*.js", "./dist/**/*.d.ts", "./dist/**/*.map"],
   "devDependencies": {
     "@biomejs/biome": "1.7.1",
     "@types/bun": "latest",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.0.0"
   },

src/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}