Tailwind-Styled-Component

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

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

[npm-image]: http://img.shields.io/npm/v/tailwind-styled-components.svg?style=flat-square
[npm-url]: http://npmjs.org/package/tailwind-styled-components

#### Before 😬

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 🥳
`
and
`jsx

`
---
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"}
---
$3
`js
const DefaultContainer = tw.div
    flex
    items-center

`
`js
const RedContainer = tw(DefaultContainer)
    bg-red-300

`
Will be rendered as
`html

    

`
$3
Extend styled components`js
const StyledComponentWithCustomCss = styled.div
    filter: blur(1px);
const  = tw(StyledComponentWithCustomCss)
   flex

`
Css rule filter is not supported by default on TailwindCSS
Will be rendered as
`html

    

`
$3
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.
`js
const Button = tw.buttoninline-flex items-center p-2

`
Will render as
`html
Link
`
Example
`tsx
import React from "react"
import tw from "tailwind-styled-components"
import styled from "styled-components"
// Create a  react component that renders an <h1> which is<br />// indigo and sized at 1.125rem<br />interface TitleProps {<br />    $large: boolean;<br />}</p><p class="my-3">const Title = tw.h1<TitleProps></code><br />  ${(p) => (p.$large ? "text-lg" : "text-base")}<br />  text-indigo-500<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">// Create a <SpecialBlueContainer> react component that renders a <section> with<br />// a special blue background color<br />const SpecialBlueContainer = styled.section</code><br />    background-color: #0366d6;<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">// Create a <Container> react component that extends the SpecialBlueContainer to render<br />// a tailwind <section> with the special blue background and adds the flex classes<br />const Container = tw(SpecialBlueContainer)</code><br />    flex<br />    items-center<br />    justify-center<br />    w-full<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">// Use them like any other React component – except they're styled!<br />render(<br />    <Container><br />        <Title $large={true}>Hello World, this is my first tailwind styled component!
    
)
``

tailwind-styled-components

Tailwind-Styled-Component

`Features`

`Install`

`Usage`

`$3`

`$3`

$3

`$3`

$3

$3

`Example`