Solid
Changelog

@tw-classed/solid

1.7.1

Patch Changes

1.7.0

Patch Changes

1.7.0-canary.2

Patch Changes

1.7.0-canary.1

Patch Changes

1.7.0-canary.0

Patch Changes

1.6.0

Patch Changes

1.5.2

Patch Changes

1.5.1

Patch Changes

1.5.0

Minor Changes

  • #105 (opens in a new tab) 233bddfd (opens in a new tab) Thanks @Xiot (opens in a new tab)! - Adds support for matched variants to appear as dataAttributes

    Example

    const Button = classed("button", {
  variants: {
    color: {
      blue: "bg-blue-100",
      red: "bg-red-100",
    },
  },
  defaultVariants: {
    color: "red",
  },
  dataAttributes: ["color"],
});
 
<Button color="blue" />
// Rendered html will be
<button data-color="blue" />
 
<Button>
// Rendered html will be
<button data-color="red /> // From default variants

Patch Changes

1.5.0-canary.0

Minor Changes

  • #105 (opens in a new tab) 233bddfd (opens in a new tab) Thanks @Xiot (opens in a new tab)! - Adds support for matched variants to appear as dataAttributes

    Example

    const Button = classed("button", {
  variants: {
    color: {
      blue: "bg-blue-100",
      red: "bg-red-100",
    },
  },
  defaultVariants: {
    color: "red",
  },
  dataAttributes: ["color"],
});
 
<Button color="blue" />
// Rendered html will be
<button data-color="blue" />
 
<Button>
// Rendered html will be
<button data-color="red /> // From default variants

Patch Changes

1.4.4

Patch Changes

1.4.0

Patch Changes

1.4.0-canary.5

Patch Changes

1.4.0-canary.1

Patch Changes

1.3.2-canary.0

Patch Changes

  • #70 (opens in a new tab) a5763359 (opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Add Solid.js library

    @tw-classed/solid is a library that allows you to create classed components in Solid.js. It has 1-1 API parity with @tw-classed/react, but with Solid specific internals. Follow the React guide to learn more about the API.

    import { classed } from "@tw-classed/solid";
 
const Button = classed.button("bg-blue-500 text-white p-2 rounded");
 
() => <Button>Click me</Button>;
Introduction