DEV Community: Sanna Jammeh

TW Classed - Make reusable Tailwind components

Sanna Jammeh — Fri, 09 Dec 2022 15:00:00 +0000

Earlier last month I wrote an article titled "Im merging css-in-js and Tailwind". A lot has happened since then, I've published the v 1.0.0 version of my library and received a ton of great feedback from the community. We are now at v1.3.0! It's time to give this library a proper announcement.

Introducing TW Classed V1

Tailwind CSS and CSS-in-JS, the best of both worlds. Great DX and user experience right out of the gate.

Full Documentation

Here is what it solves:

Simple encapsulation of class names
Toggle-able class names via props
Extending existing components
Fully typesafe all the way down to the HTML definitions

How does it work?

If you've used Stitches or Styled Components this will feel very familiar. TW Class does not inject any styles, it servers as a class toggler and component generator.

call classed and define what element you want to render
Add your class names
Add any variants (Stitches developers will feel right at home)
Render it!

Below are some examples of what can be done:

A simple component with color prop

import { classed } from "@tw-classed/react";
// classed("button", ...classes) is also possible
const Button = classed.button("px-4 py-2", {
  variants: {
    color: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-gray-500 text-white",
    },
  },
});

() => <Button color="primary">Primary</Button>
() => <Button color="secondary">Secondary</Button>

Multi argument support

TW Classed supports an infinite number of arguments. You can pass it any combination of strings (will be set as classes), variants (classes toggled by props) or even other classed components (current component will inherit all classes and props).

const Grid = classed.div(
  "grid gap-4", // Mobile first
  "md:grid-cols-2 md:gap-6", // Tablet
  "lg:grid-cols-3 lg:gap-8", // Desktop
  "xl:grid-cols-4" // Large desktop
);

const BlueGrid = classed(Grid, "bg-blue-500");

// Doesn't render Grid but grabs all classes and variants and injects into classed.section
const Section = classed.section("bg-blue-500", Grid)

Extending other components

// Link.tsx
import Link from "next/link";

const ClassedLink = classed(Link, "text-blue-500 hover:text-blue-700");

// In your App
() => <ClassedLink href="/docs">Go to docs</ClassedLink>;

// Or by overriding the rendered element
const Anchor = classed("a", "text-blue-500 hover:text-blue-700");

// In your App
() => <Anchor as={Link} href="/docs">Go to docs</Anchor>;

All this and more features like defaultVariants, compoundVariants, advanced class name merging, Tailwind Extension support and a framework agnostic library is available in the Documentation

The why?

Creating design systems with plain React components and Tailwind can be quite tricky. CSS in JS solved this perfectly, but many of us enjoy working with Tailwind.

Creating React components in a typesafe design system requires:

Creating TypeScript props
Extending the underlying element's props
Add Types for props controlling class names
Manually mapping the class names to certain prop values (which may or may not change...)
Adding forwardRef

I therefore made sure all this is handled out of the box in tw-classed. It's as close to a CSS in JS library as possible, but with pure classes.

Footnote

Thank you for reading this article! I have received great support from the community and tw-classed wouldn't have been as good as it is today without you guys! I always welcome any kind of feedback which can be sent here:

Github
Discord server

Im merging css-in-js and Tailwind

Sanna Jammeh — Tue, 15 Nov 2022 22:31:59 +0000

I'm merging css-in-js and Tailwind. Let me explain.

Why merge Tailwind with CSS-in-JS when twin.macro exists?

The first reason is reusability. Creating a button component which can vary via props requires manually mapping props to tailwind classnames. This gets very tiring very fast and makes it quite difficult to create React UI libraries with pure Tailwind.

The second reason is to improve my Typescript knowledge. It's not easy creating Typescript libraries, making them infer props, configurations all under the hood is even harder. And thus, my journey creating the library began.

The requirements

I made a list of requirements for this library, these are specific to challenges I faced developing UI libraries and React components with Tailwind.

It must be able to merge multiple classnames
It must have support for toggling different classnames based on input
It must be able to create JSX like button or span
First class TypeScript support

Inspiration

When trying to come up with a good API I only had to look in one direction. Stitches.js. In my opinion, this is the best CSS in JS library made to date, and as such, it had the exact API I was looking to create. Please check their library out and give Modulz/WorkOS the credit they deserve!

Introducing `@tw-classed/react` & `@tw-classed/core` public alpha

These are both in alpha stages as I'm still ironing out the Typescript types required to make them work. The types in core are not stable enough for advanced usage just yet.

@tw-classed/react is quite stable even for advanced Typescript usage, though I haven't performed any tsc performance tests nor heavy testing just yet. As such I've decided to only release these two libraries in a public alpha while I'm testing.

The full documentation is here. Below is a tiny introduction to the libraries.

`@tw-classed/core`

This is the framework agnostic core of the react library. It can be used standalone in vanilla JS to create dynamic Tailwind classes (or in other libraries when not using react). It simply acts as a class merger and toggler and can be used in any way imaginable.

import classed from "@tw-classed/core";

const simpleButton = classed(
  "flex items-center py-3",
  "hover:bg-gray-200 focus:bg-gray-200" // Accepts any number of arguments
);

console.log(simpleButton()); // => "flex items-center py-3 hover:bg-gray-200 focus:bg-gray-200"

const button = classed(
  "flex items-center", // Apply your base styles
  {
    // Define your variants
    variants: {
      size: {
        sm: "py-2 px-4",
        md: "py-3 px-6",
        lg: "py-4 px-8",
      },
      color: {
        primary: "bg-blue-500 text-white",
        secondary: "bg-gray-500 text-white",
      },
    },
    defaultVariants: {
      size: "md",
      color: "primary",
    },
  }
);

console.log(button()); // => "flex items-center py-3 px-6 bg-blue-500 text-white"
console.log(button({ size: "sm" })); // => "flex items-center py-2 px-4 bg-blue-500 text-white"
console.log(button({ size: "lg", color: "secondary" })); // => "flex items-center py-4 px-8 bg-gray-500 text-white"

`@tw-classed/react`

This is the React library. It's a wrapper around @tw-classed/core provides a React component creator similar to styled-components or stitches.js.

import classed from "@tw-classed/react";

const Button = classed("button", "flex items-center", {
  variants: {
    size: {
      sm: "py-2 px-4",
      md: "py-3 px-6",
      lg: "py-4 px-8",
    },
    color: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-gray-500 text-white",
    },
  },
  defaultVariants: {
    size: "md",
    color: "primary",
  },
});

const App = () => {
  return (
    <div>
      <Button>Default</Button>
      <Button size="sm">Small</Button>
      <Button size="lg" color="secondary">
        Large Secondary
      </Button>
    </div>
  );
};

Down the road

There is still lots of things to do with this library before I feel confident in releasing a V1 stable release. Please don't use it in production just yet. Here is a list of future things.

Class merger/differ (Omits classNames when a variant overrides)
compoundVariants - Stitches inspired API to toggle variants when other variants are defined
Typescript performance testing
Stable core typescript API - currently only react is stable
Improve TailwindCSS Extension class RegEx for intellisense

Footnote

Thank you for reading this article! I hope many will test the library and provide feedback as its essential to improving. Any PR's and issues are welcome!

Here is the GitHub

I can be reached at My Website or through Twitter

DEV Community: Sanna Jammeh

TW Classed - Make reusable Tailwind components

Introducing TW Classed V1

How does it work?

A simple component with color prop

Multi argument support

Extending other components

The why?

Footnote

Im merging css-in-js and Tailwind

Why merge Tailwind with CSS-in-JS when twin.macro exists?

The requirements

Inspiration

Introducing @tw-classed/react & @tw-classed/core public alpha

@tw-classed/core

@tw-classed/react

Down the road

Footnote

Introducing `@tw-classed/react` & `@tw-classed/core` public alpha

`@tw-classed/core`

`@tw-classed/react`