tswind

tswind is a styling library for React with CSS-in-JS like api, powered by tailwindcss.

Motivation

Tailwindcss allows you to write more css rules with as less as possible amount of meaningful key strokes. E.g typing 3 characters long p-2 yields to same result with typing 14 characters long padding: 2rem;. If creating UI components is a part of our daily job, it becomes exponentially more efficient when we need to do this hundred of times in daily basis.

But not everything is for free. Having a lot of class names inside your jsx, makes it harder to focus on logic part of your component. Especially if the appeareance of an element changes based on internal state which is the case most of the time. $

Example

import { wind } from "tswind";

const Button = wind.button(
  {
    variant: {
      primary: "bg-red-100",
      secondary: "bg-transparent border-2 border-red-100",
    },
    size: {
      normal: "py-4 text-sm",
      large: "py-8",
    },
  },
  "font-bold tracking-wide px-8"
);

const Buttons = () => (
  <>
    <Button>Primary</Button>
    <Button size="large">Primary Large</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="secondary" size="large">
      Secondary Large
    </Button>
  </>
);

Installation

npm i tswind

Prerequisites

Tailwindcss has to be set up in the project. Please follow this instructions.

Usage

Basic component

const Button = wind.button("bg-indigo-700 rounded-md shadow-md text-white");

Component with flags

const Button = wind.button(
  { variants: { primary: "bg-red-100", secondary: "bg-green-100" } },
  "px-4 py-2"
);

Extending Components

const LinkButton = wind.extend(Button).a("text-semibold");

Using Theme

const wind = createWind({
  color: {
    text: "text-gray-800",
    textDark: "text-gray-900",
  },
  bgColor: {
    primary: "bg-indigo-700",
    secodary: "bg-green-700",
  },
});

const Button = wind.button({
  variant: {
    primary: [$.color.white, $.bgColor.primary],
    secondary: "$bgColor.secondary $color.textDark",
  },
});

Extending the theme

const {
  ThemeProvider,
  useTheme,
  theme: $,
} = wind.createTheme({
  dark: {
    color: {
      text: "text-gray-100",
      textDark: "text-gray-400",
    },
    bgColor: {
      primary: "bg-green-300",
      secondary: "bg-indigo-300",
    },
  },
});

const App = () => {
  const { preferDarkMode } = useDeviceSettings();
  const [theme, setTheme] = useTheme(preferDarkMode ? "dark" : "default");
  return (
    <ThemeProvider theme={theme}>
      <Button
        onClick={() =>
          setTheme((theme) => (theme === "dark" ? "default" : "dark"))
        }
      >
        Toggle Theme
      </Button>
    </ThemeProvider>
  );
};