/tailwind-react

Tailwind CSS-in-JS solution without any downsides

Primary LanguageTypeScriptMIT LicenseMIT

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 ↓

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 = () => <Button>Get Started</Button>;

Installation

Install Tailwind CSS in your project and then run

npm i tailwind-react # yarn add tailwind-react

Usage

Create simple components with tailwind class names

import styled from "tailwind-react";

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

You can use multiple lines and spacing for readability

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

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 = () => <Button variant="primary">Get Started</Button>;

There is full TypeScript support

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 = () => <Button variant="foobar">Get Started</Button>;
//                                        ^^^^^^ also nope

Getting started

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