Claas

A React Higher Order Component library to assign classNames to components, looks like styled-components

Why

I always liked to use Tailwind and wanted to extend it to use it to build as a Design System for simple and small projects. I know there is the @apply feature and there’s Twin, but just wanted something simpler.

Installation

npm install claas

Usage

import { claas } from 'claas'

const Button = claas.button`bg-blue-400`

const DangerButton = claas.custom(Button)`bg-red-400`

function App() {
    return (
        <div>
            <Button className="text-white">
                Hello
            </Button>
            <DangerButton>  
                Danger
            </DangerButton>
        </div>
    )
}

API

• claas.custom
• claas.button
• claas.div
• claas.h1
• claas.h2
• claas.h3
• claas.h4
• claas.h5
• claas.h6

GitHub

View Github