@aplr/tailwind-components weekly downloads statistics

🌬 Tailwind Components

Tailwind-native react components. Just like styled-components, without the css.

Before 😵‍💫

After 🧖

Features

💅 Compatible with Styled Components

⚡️ Use it like any other React Component

🤯 No lines exceeding max line length

🧘 Cleaner code in the render function

Install

You have to install and configure Tailwind CSS to use this extension. Install TailwindCSS

VSCode IntelliSense

First, install Tailwind CSS IntelliSense VSCode extension

Then, add the following settings to your user or workspace settings (How to edit VSCode settings?)

Usage

Import the tw helper and use it to define React components styled with TailwindCSS.

HTML

Interpolations

Tailwind Components support interpolations in the template syntax. The most common use are conditional class names, as shown in the following example.

HTML

Be sure to set the entire class name

✅ ${({ $primary }) => $primary ? "bg-indigo-600" : "bg-indigo-300"}

❌ bg-indigo-${({ $primary }) => $primary ? "600" : "300"}

Transient props

Tailwind Components support transient props. Prefixing prop names with a dollar sign ($) prevents them being forwarded to the DOM.

Extend a Tailwind Component

HTML

Extend a Styled Component

HTML:

Polymorphic Components

In order to change the underlying component, you can pass the component to be rendered to the $as prop at runtime. The styles will stay the same, just the element is changed.

HTML

Advanced Example

Description from the npm listing.