tailwind-react

Tailwind CSS-in-JS solution without any downsides

💅   Straightforward styled components api

🏎   No runtime, zero-cost-abstraction

💆‍♀️   No setup, tooling or framework integration required, the npm package "just works"

🎨   Support for variants

💪   Full TypeScript support

Example

Render this button like so ↓

``tsx
import styled from "tailwind-react";

const Button = styled.button
text-white
font-semibold
bg-slate-900

h-12
px-6
w-full

rounded-lg;

const GetStarted = () => Get Started;
`

Installation

Install Tailwind CSS in your project and then run

`bash
npm i tailwind-react # yarn add tailwind-react
`

Usage

Create simple components with tailwind class names

`tsx
import styled from "tailwind-react";

const SimpleButton = styled.buttontext-sm text-gray-300 py-3 px-4 bg-gray-800 rounded-lg;
`

You can use multiple lines and spacing for readability

`tsx
import styled from "tailwind-react";

const FancyButton = styled.button
text-white
font-medium
text-sm
uppercase
leading-snug

py-4
px-14
bg-blue-600
rounded-full
shadow-md

hover:bg-blue-700
hover:shadow-lg

active:bg-blue-800
active:shadow-lg

focus:bg-blue-700
focus:shadow-lg
focus:outline-none
focus:ring-0
;
`

Create variants by passing a function instead of a template string

`tsx
import styled from "tailwind-react";

const Button = styled.button(
props =>
${props.variant === "primary" ? "text-white bg-sky-400" : "text-gray-300 bg-gray-700"}
text-sm
font-semibold
rounded-lg
);

const GetStarted = () => Get Started;
`

There is full TypeScript support

`tsx
import styled from "tailwind-react";

const Button = styled.button<{ variant?: "primary" }>(
props =>
${props.variant === "foobar" ? "text-white bg-sky-400" : "text-gray-300 bg-gray-700"}
^^^^^^ nope
text-sm
font-semibold
rounded-lg
);

const GetStarted = () => Get Started;
// ^^^^^^ also nope
`

Getting started

In this repo you will find many examples for using tailwind-react with various frameworks or for specific purposes

- Next.js

examples/next

- Create React App todo

examples/create-react-app

- Gatsby todo

examples/gatsby

- Storybook todo

examples/storybook

- Component Library with Microbundle

examples/component-library

- Preact todo`

examples/preact