Tailwind-Styled-Component

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

Before 😬

<div className=`flex ${primary ? "bg-indigo-600" : "bg-indigo-300"} inline-flex items-center border border-transparent text-xs font-medium rounded shadow-sm text-white hover:bg-indigo-700 focus:outline-none`>

After 🥳

<Button $primary={false}>

1const Button = tw.div`
2    ${(p) => (p.$primary ? "bg-indigo-600" : "bg-indigo-300")}
3
4    flex
5    inline-flex
6    items-center
7    border
8    border-transparent
9    text-xs
10    font-medium
11    rounded
12    shadow-sm
13    text-white
14
15    hover:bg-indigo-700
16    focus:outline-none
17`

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

1npm i -D tailwind-styled-components

Using yarn

yarn add -D tailwind-styled-components

⚠️ 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?)

1"tailwindCSS.includeLanguages": {
2    "typescript": "javascript", // if you are using typescript
3    "typescriptreact": "javascript"  // if you are using typescript with react
4},
5"editor.quickSuggestions": {
6    "strings": true // forces VS Code to trigger completions when editing "string" content
7},
8"tailwindCSS.experimental.classRegex": [
9    "tw`([^`]*)", // tw`...`
10    "tw\\.[^`]+`([^`]*)`", // tw.xxx<xxx>`...`
11    "tw\\(.*?\\).*?`([^`]*)" // tw(Component)<xxx>`...`
12]

Usage

Import

1import tw from "tailwind-styled-components"

Basic

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

1const Container = tw.div`
2    flex
3    items-center
4    justify-center
5    flex-col
6    w-full
7    bg-indigo-600
8`

1render(
2    <Container>
3        <div>Use the Container as any other React Component</div>
4    </Container>
5)

Will be rendered as

1<div class="flex items-center justify-center flex-col w-full bg-indigo-600">
2    <div>Use the Container as any other React Component</div>
3</div>

Conditional class names

Set tailwind class conditionally with the same syntax as styled components

1interface ButtonProps {
2   $primary: boolean
3}
4
5const Button = tw.button<ButtonProps>`
6    flex
7    ${(p) => (p.$primary ? "bg-indigo-600" : "bg-indigo-300")}
8`

Tailwind Styled Components supports Transient Props

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

1<Button $primary={true} />

Will be rendered as

1<button class="flex bg-indigo-600">
2    <!-- children -->
3</button>

and

1<Button $primary={false} />

Will be rendered as

1<button class="flex bg-indigo-300">
2    <!-- children -->
3</button>

---

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

1const DefaultContainer = tw.div`
2    flex
3    items-center
4`

1const RedContainer = tw(DefaultContainer)`
2    bg-red-300
3`

Will be rendered as

1<div class="flex items-center bg-red-300">
2    <!-- children -->
3</div>

Extends Styled Component

Extend styled components

1const StyledComponentWithCustomCss = styled.div`
2    filter: blur(1px);
3`
4
5const  = tw(StyledComponentWithCustomCss)`
6   flex
7`

Css rule filter is not supported by default on TailwindCSS

Will be rendered as

1<div class="flex" style="filter: blur(1px);">
2    <!-- children -->
3</div>

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.

1const Button = tw.button`inline-flex items-center p-2`
2
3<Button $as="a" href="#">Link</Button>

Will render as

1<a href="#" class="inline-flex items-center p-2">Link</a>

Example

1import React from "react"
2import tw from "tailwind-styled-components"
3import styled from "styled-components"
4
5// Create a <Title> react component that renders an <h1> which is
6// indigo and sized at 1.125rem
7interface TitleProps {
8    $large: boolean;
9}
10
11const Title = tw.h1<TitleProps>`
12  ${(p) => (p.$large ? "text-lg" : "text-base")}
13  text-indigo-500
14`
15
16// Create a <SpecialBlueContainer> react component that renders a <section> with
17// a special blue background color
18const SpecialBlueContainer = styled.section`
19    background-color: #0366d6;
20`
21
22// Create a <Container> react component that extends the SpecialBlueContainer to render
23// a tailwind <section> with the special blue background and adds the flex classes
24const Container = tw(SpecialBlueContainer)`
25    flex
26    items-center
27    justify-center
28    w-full
29`
30
31// Use them like any other React component – except they're styled!
32render(
33    <Container>
34        <Title $large={true}>Hello World, this is my first tailwind styled component!</Title>
35    </Container>
36)