tailwind-styled-components weekly downloads statistics

Tailwind-Styled-Component

Create tailwind css react components like styled components with classes name on multiple lines

[![NPM version][npm-image]][npm-url]

Before 😬

After 🥳

Features

♻️ Reusable

🧩 Extendable

💅 Compatible with Styled Components

⚡️ Use props like every React Component

🤯 Stop editing 400+ characters lines

🧘 Cleaner code in the render function

Install

Using npm

Using yarn

*⚠️ This extension requires TailwindCSS to be installed and configured on your project too. Install TailwindCSS*

[Optional] Configure IntelliSense autocomplete on VSCode

First, install Tailwind CSS IntelliSense VSCode extension

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Then add these user settings (How to edit VSCode settings?)

Usage

Import

Basic

Create a Tailwind Styled Component with Tailwind rules that you can render directly

Will be rendered as

Conditional class names

Set tailwind class conditionally with the same syntax as styled components

*Tailwind Styled Components supports Transient Props*

*Prefix the props name with a dollar sign ($) to prevent forwarding them to the DOM element*

Will be rendered as

and

Will be rendered as

Be sure to set the entire class name

✅ Do ${p => p.$primary ? "bg-indigo-600" : "bg-indigo-300"}

❌ Don't bg-indigo-${p => p.$primary ? "600" : "300"}

Extends

Will be rendered as

Extends Styled Component

Extend styled components

*Css rule filter is not supported by default on TailwindCSS*

Will be rendered as

Polymorphic Components

If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the $as prop to do this at runtime.

Will render as

Example

Description from the npm listing.