Stylewind

Styled Components API for Tailwind CSS in just 427 B

Create components by passing Tailwind properties to the styled api

import React from "react";
import styled from "stylewind";

const Button = styled.button({
  text: "white",
  font: "bold",
  rounded: "sm",
  shadow: "md",
  bg: "purple-500",
  p: 4,
});

export default () => <Button>My Button</Button>;

the rendered result will be a component with the corresponding classNames.

<button class="text-white font-bold rounded-sm shadow-md p-4 bg-purple-500 hover:bg-purple-400 focus:outline-none">
  My Button
</button>

And will look like this

Installation

yarn add stylewind # npm i stylewind

stylewind generates components that have Tailwind's class names applied, but it does not add Tailwind CSS to your project. This way, you can decide how you want to add Tailwind to your project, but in order to see its styles, you need to add it to you project.

To learn how to install Tailwind CSS, follow the guides on tailwindcss.com.

Usage

import React from "react";
import styled from "stylewind";

// You can create components with specific tags similar to the styled components API
const Headline = styled.h1();

// Instead of passing a template string of CSS, you provide an object of Tailwind properties
const Button = styled.button({
  text: "white",
  font: "bold",
  bg: "purple-500",
});

// Sometimes you need to add multiple values for one property, for this, you'll pass an array
const Blockquote = styled.blockquote({
  text: ["purple-700", "opacity-75"],
});

// The same goes for responsive props, just use prefixes to your values
const Grid = styled.section({
  grid: ["sm:cols-1", "md:cols-3"],
  gap: 4,
});

// States like hover and active work the same way
const Link = styled.a({
  text: ["purple-500", "hover:purple-400", "active:purple-100"],
});

// You can add multiple prefixes, just like with "native" Tailwind CSS
const Link = styled.a({
  text: ["purple-500", "hover:purple-400", "md:hover:purple-200"],
});

Prop Names and Values

The prop names and their values are based on Tailwind and follow this pattern;

Each Tailwind CSS class has the following parts, and exept for the name all of them are optional

md:hover:text-purple-500
^^^^^^^^
prefixes

md:hover:text-purple-500
         ^^^^
         the property name

md:hover:text-purple-500
              ^^^^^^^^^^
              the value

For stylewind you now would pass

const Link = styled.a({
  name: prefixes + ":" + value,

  // so md:hover:text-purple-200 becomes
  text: "md:hover:purple-200",
});

For an overiew of the all props, you can read the definitions in their TypeScript definitions file

Typescript

The API and the generated components have full TypeScript support

Questions & Support

Please feel free to submit an issue for questions or bugs / problems you found.

You can try to ping me on Twitter at @luke_schmuke, but I will be a dad soon and might not be able to respond immediately.

License

MIT