Tailwind-Styled-Component
Create tailwind css react components like styled components with classes name on multiple lines
Before
😬
">
After
🥳
">
<button class="flex bg-indigo-600"> button>
and
<Button $primary={false} />
Will be rendered as
">
<button class="flex bg-indigo-300"> button>
Be sure to set the entire class name
${p => p.$primary ? "bg-indigo-600" : "bg-indigo-300"}
bg-indigo-${p => p.$primary ? "600" : "300"}
Extends
const DefaultContainer = tw.div`
flex
items-center
`
const RedContainer = tw(DefaultContainer)`
bg-red-300
`
Will be rendered as
<div class="flex items-center bg-red-300"> div>
Careful it does not overrides parent classes
Extends Styled Component
Extend styled components
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
<div class="flex" style="filter: blur(1px);"> div>
Example
react component that renders an
which is // indigo and sized at 1.125rem interface TitleProps { $large: boolean; } const Title = tw.h1
which is // indigo and sized at 1.125rem interface TitleProps { $large: boolean; } const Title = tw.h1
` ${(p) => (p.$large ? "text-lg" : "text-base")} text-indigo-500 ` // Create a
react component that renders a
with // a special blue background color const SpecialBlueContainer = styled.section` background-color: #0366d6; ` // Create a
react component that extends the SpecialBlueContainer to render // a tailwind
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! render(
Hello World, this is my first tailwind styled component!
) ">
import React from "react"
import tw from "tailwind-styled-components"
import styled from "styled-components"
// Create a react component that renders an which is
// indigo and sized at 1.125rem
interface TitleProps {
$large: boolean;
}
const Title = tw.h1<TitleProps>`
${(p) => (p.$large ? "text-lg" : "text-base")}
text-indigo-500
`
// Create a
react component that renders a
with
// a special blue background color
const SpecialBlueContainer = styled.section`
background-color: #0366d6;
`
// Create a
react component that extends the SpecialBlueContainer to render
// a tailwind
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! render( <Container> <Title $large={true}>Hello World, this is my first tailwind styled component!</Title> </Container> )
import React from "react" import tw from "tailwind-styled-components" import styled from "styled-components" // Create areact component that renders an which is // indigo and sized at 1.125rem interface TitleProps { $large: boolean; } const Title = tw.h1<TitleProps>` ${(p) => (p.$large ? "text-lg" : "text-base")} text-indigo-500 ` // Create a
react component that renders a with // a special blue background color const SpecialBlueContainer = styled.section` background-color: #0366d6; ` // Create a react component that extends the SpecialBlueContainer to render // a tailwindwith 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! render( <Container> <Title $large={true}>Hello World, this is my first tailwind styled component!</Title> </Container> )
