Introducing TW Classed v1.3

Its now been little over a month since TW-Classed was released in v1.0.0. TW-Classed version 1.3 has introduced some exciting new features and improvements.

New createClassed API

The most notable change is the introduction of the createClassed API, which allows users to create their own classed utility using a configuration object. This makes it easier to manage and reuse utility classes within a project. This is a future proofed API, which means that it will be able to support new features as they are added to TW-Classed. Currently only the merger prop is supported.

// classed.config.ts
import { createClassed } from "@tw-classed/react";
 
const noDuplicates = (classes: string[]) => [...new Set(classes)].join(" ");
 
export const { classed } = createClassed({
  merger: noDuplicates,
});

To read more about the createClassed API and how to use it, check out this guide.

Typescript interoperability between core & react

Another important addition is Typescript interoperability between the @tw-classed/core and @tw-classed/react packages. This allows developers to use @tw-classed/core in a framework-agnostic design system, and then use @tw-classed/react in their React application.

// Design system
import { classed } from "@tw-classed/core";
 
export const button = classed({
  base: "bg-blue-500 text-white",
  variants: {
    size: {
      sm: "px-2 py-1 text-sm",
      md: "px-3 py-2 text-base",
      lg: "px-4 py-3 text-lg",
    },
  },
});
 
// React application
import { button } from "design-system";
import { classed } from "@tw-classed/react";
 
export const Button = classed.button(button); // Variants & props are automatically inferred

Support for additional classnames in core

The @tw-classed/core package now supports additional classnames, which allows developers to add additional classes to a classed utility. This is useful for adding classes that are not part of the classed utility, such as one-off classes.

const button = classed("bg-blue-500 text-white");
 
() =>
  html`<button class="${button({ class: "flex items-center" })}">docs</button>`;
() =>
  html`<button class="${button({ className: "flex items-center" })}">
    docs
  </button>`;

Other improvements

Other improvements in this release include the export of the ClassedConfig and DerivedComponentType types, as well as fixes for issues with CJS modules in Node.js and updates to dependencies.

Overall, TW-Classed version 1.3 continues to provide excellent developer experience while taking full advantage of the powerful utility classes offered by Tailwind CSS.