tailwind-styled-components

Tailwind-Styled-Component

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

Install

# using npm
npm i -D tailwind-styled-components

# using yarn
yarn add -D tailwind-styled-components

Usage

Import

import tw from "tailwind-styled-components"

Basic

You can use tailwind-styled-components without using styled components

const Container = tw.div`
    flex
    items-center
    justify-center
    flex-col
    w-full
    bg-indigo-600
`

Will be rendered as

<div class="flex items-center justify-center flex-col w-full bg-indigo-600">
  <!-- children -->
</div>

Conditional class names

Set tailwind class conditionaly with the same syntaxt as styled components

const Button = tw.button`
    flex
    ${p => p.primary ? "bg-indigo-600" : "bg-indigo-300"}
`

---

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"}

---

<Button primary={true} />

Will be rendered as

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

and

<Button primary={false} />

Will be rendered as

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

Extends

const RedContainer = tw(Container)`
    bg-red-600
`

Will be rendered as

<div class="flex items-center justify-center flex-col w-full bg-red-600">
  <!-- children -->
</div>

Overrides the parent background color class

Extends Styled Component

Extend styled components

const StyledComponentWithCustomJs = styled.div`
    filter: blur(1px);
`

const  = tw(StyledComponentWithCustomJs)`
   flex
`

Will be rendered as

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

Example

import React from "react"
import tw from "tailwind-styled-components"
import styled from "styled-components"

const Container = tw.div`
    flex
    items-center
    justify-center
`

// Create a <Title> react component that renders an <h1> which is
// indigo and sized at 1.125rem
const Title = tw.h1`
  ${p => p.large ? "text-lg": "text-base"}
  text-indigo-500
`

// Create a <SpecialBlueContainer> react component that renders a <section> with
// a special blue background color
const Container = styled.section`
  background-color: #0366d6;
`

// Create a <Container> react component that extends the SpecialBlueContainer to render
// a tailwind <section> with the special blue background and adds the flex classes 
const Container = tw(SpecialBlueContainer)`
    flex
    items-center
    justify-center
    w-full
`

// Use them like any other React component – except they're styled!
<Container>
  <Title large={true}>Hello World, this is my first tailwind styled component!</Title>
</Container>