Skip to main content
npm install better-styled

​
Requirements

  • ⚛️ React 18+ or React Native
  • 🎨 Tailwind CSS (required)
  • 📘 TypeScript 5.0+ (recommended)

​
Tailwind CSS Setup

better-styled uses className for styling. You need Tailwind CSS configured in your project.
Follow the Tailwind CSS installation guide for your framework (Next.js, Vite, etc.).

​
That’s it ✨

✅ No extra configuration. No providers to wrap. No build plugins. Just import and use: 
import { styled } from "better-styled";

​
Smart Class Merging

better-styled uses tailwind-merge under the hood to handle class conflicts intelligently: 
const Button = styled("button", {
  base: { className: "px-4 py-2 rounded" },
  variants: {
    size: {
      sm: { className: "px-2 py-1 text-sm" },  // overrides px-4 py-2
      lg: { className: "px-6 py-3 text-lg" },  // overrides px-4 py-2
    },
  },
});

Quickstart

Build your first component

React Native Guide

Using with Expo and React Native