# Tailwind-Styled-Component **Repository Path**: mirrors_floatdrop/Tailwind-Styled-Component ## Basic Information - **Project Name**: Tailwind-Styled-Component - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-07-02 - **Last Updated**: 2026-05-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 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 😬 ```
``` #### 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"}` --- ### Extends ```js const DefaultContainer = tw.div` flex items-center ` ``` ```js const RedContainer = tw(DefaultContainer)` bg-red-300 ` ``` Will be rendered as ```html
``` *Careful it does not overrides parent classes* ### Extends Styled Component Extend [styled components](https://github.com/styled-components/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
``` ## 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 // 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 <SpecialBlueContainer> react component that renders a <section> with // a special blue background color const SpecialBlueContainer = 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! render( <Container> <Title $large={true}>Hello World, this is my first tailwind styled component! ) ```