tw-styled

tw-styled is a React library for quickly creating reusable components utilizing Tailwind CSS. It provides a straightforward and intuitive API, allowing you to integrate Tailwind CSS into your components seamlessly. This library supports all HTML elements and function components, ensuring that you can style your components effortlessly with the full power of Tailwind CSS at your disposal.

Features

• 🚀 Efficient Styling: Rapidly create styled components with Tailwind CSS.
• 💅 Complete Flexibility: Supports all HTML elements and React function components.
• 🛠️ Simple Integration: A straightforward API for integrating Tailwind CSS into your project.

Prerequisites

Before using tw-styled, ensure that Tailwind CSS is properly integrated into your project. If you haven't already set up Tailwind CSS, please refer to the official Tailwind CSS installation guide.

Installation

Install tw-styled via npm:

npm install tw-styled tailwind-merge

If you need to use tw-styled with a customized merge function without installing the tailwind-merge package:

npm install tw-styled

Getting Started

Using tw-styled with built-in merge functionality

Start by importing the tw function from tw-styled:

import { tw } from 'tw-styled'

Creating Components with Tailwind CSS

Use the tw function to create a component styled with Tailwind CSS classes:

const Button = tw.button`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded`

or using function component to create a styled component:

const Component = ({ className }) => (
  <div className={className}>Function Component</div>
)

const StyledComponent = tw(
  Component,
)`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded`

Using Components in Your Project

You can now use the styled component just like any other React component:

function App() {
  return (
    <div className='App'>
      <Button>Click me</Button>
    </div>
  )
}

Using tw-styled with custom classnames merge functionality

import { create } from 'tw-styled/create'

const merge = (classNames, propsClassNames) =>
  `${classNames} ${propsClassNames}`

const tw = create(merge)

API

tw

A Proxy object for creating styled components with Tailwind CSS utility classes. It supports all HTML tags and React function components.

Usage

const StyledComponent = tw.Tag`tailwind-class-names`
const StyledComponent = tw.Tag('tailwind-class-names')

const FunctionComponent = ({ className }) => (
  <div className={className}>Function Component</div>
)

const StyledComponent = tw(FunctionComponent)`tailwind-class-names`
const StyledComponent = tw(FunctionComponent)('tailwind-class-names')

• Tag: An HTML tag (like div, span, button) or a React function component.
• tailwind-class-names: A Template String of Tailwind CSS classes.

Contributing

Contributions are always welcome! If you have any suggestions, issues, or want to make improvements, please feel free to open an issue or submit a pull request.

License

MIT