Package Exports

tailwind-styled-components

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwind-styled-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>