Tailwind-Styled-Component
Create tailwind css react components like styled components with classes name on multiple lines
Before
😬
<div className=`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
🥳
<Button $primary={false}>
const Button = tw.div`
${(p) => (p.$primary ? "bg-indigo-600" : "bg-indigo-300")}
flex
inline-flex
items-center
border
border-transparent
text-xs
font-medium
rounded
shadow-sm
text-white
hover:bg-indigo-700
focus:outline-none
`
Features
Install
Using npm
npm i -D tailwind-styled-components
Using yarn
yarn add -D tailwind-styled-components
[Optional] Configure IntelliSense autocomplete on VSCode
First, install Tailwind CSS IntelliSense VSCode extension
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Then add these user settings (How to edit VSCode settings?)
"tailwindCSS.includeLanguages": {
"typescript": "javascript", // if you are using typescript
"typescriptreact": "javascript" // if you are using typescript with react
},
"editor.quickSuggestions": {
"strings": true // forces VS Code to trigger completions when editing "string" content
},
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)", // tw`...`
"tw\\.[^`]+`([^`]*)`", // tw.xxx<xxx>`...`
"tw\\(.*?\\).*?`([^`]*)" // tw(Component)<xxx>`...`
]
Usage
Import
import tw from "tailwind-styled-components"
Basic
Create a Tailwind Styled Component with Tailwind rules that you can render directly
const Container = tw.div`
flex
items-center
justify-center
flex-col
w-full
bg-indigo-600
`
render(
<Container>
<div>Use the Container as any other React Component</div>
</Container>
)
Will be rendered as
<div class="flex items-center justify-center flex-col w-full bg-indigo-600">
<div>Use the Container as any other React Component</div>
</div>
Conditional class names
Set tailwind class conditionally with the same syntax as styled components
interface ButtonProps {
$primary: boolean
}
const Button = tw.button<ButtonProps>`
flex
${(p) => (p.$primary ? "bg-indigo-600" : "bg-indigo-300")}
`
Tailwind Styled Components supports Transient Props
Prefix the props name with a dollar sign ($) to prevent forwarding them to the DOM element
<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>
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">
<!-- children -->
</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);">
<!-- children -->
</div>
Example
import React from "react"
import tw from "tailwind-styled-components"
import styled from "styled-components"
// Create a <Title> 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!</Title>
</Container>
)
Received `true` for a non-boolean attribute `block`
It seems like props are passed as an attribute and when I pass boolean, It throws error on the console. I am using next.js with typescript.
This is the error
Component looks like this
The workaround is using number as boolean
block ? 1 : 0v2.1.4 FATAL ERROR: Reached heap limit Allocation failed
Hello again. Thanks for the 2.1.2 version fix.
Unfortunately, upgrading to 2.1.4 and running
tscpresented an error on a whole different level:Not really sure where to begin debugging, since no other output is present. The JS itself works as expected, but
tscruns forever and then OOMs. Do you have any idea what might have caused it?Input onChange and onFocus props are not working
The props don't seems to be correctly propagated to the React Element.
Check the example directory for a reproducible example
Failed to parse source map from '(...)/src/tailwind.tsx`
Hi, first of all: Amazing Project! Thank you for building this!
So, when I run
npm startthe console spits out: can't find src/ folder but still serves the react app correctly o.0Not sure if simply publishing the
srcfolder to npm would fix this.Reproduction
Steps
npm i -D tailwind-styled-componentsThanks!
Typescript prop errors
Running into some type issues but a basic button that has props passed through
I'm using the default next.js typescript configuration
Using props does not work
Given the following code
it renders the following HTML
But the
w-[calc(100%-0.75rem)]part is not picked up by Tailwind JIT, so it has no effect. Am I doing something wrong here?v2.1.1 Typescript error: Property '$as' is missing in type
Hello. We have upgraded the package from 2.0.4 to 2.1.1 and received new typescript errors all over the codebase. Most of them indicate some kind of issue with the new
$asprop. For example:The source code is as simple as follows:
By looking at the library's source code I couldn't understand why is the
$asprop reported as missing, since it seems to be optional. Do you have any idea why this error occurs and how to fix it?Tailwind Styled Components not working on Tailwind CSS v3
I get the following error only when I try to use tailwind styled components:
I created my project following Tailwind CSS v3 documentation and Tailwind works fine in classNames, but whenever I try to use React Styled Components, although the styles are applied, the previous error pops up.
TypeScript Error: This expression is not callable
I'm getting the following TypeScript error when I use this package in a .tsx file.
TS2349: This expression is not callable. Not all constituents of type 'FunctionTemplate | undefined' are callable. Type 'undefined' has no call signatures.4.0.51.0.6TypeScript configuration:
Question / Feature Request: Ability to target children
First off I'd like to thank everyone involved for this library!
I've recently found myself trying to style components that come from other libraries and, while I can use
tw(ThirdPartyComponent), it adds Tailwind classes only to the "container" and can't use CSS selectors to target any children.Would an API like this be possible?
Where
selectorwould try to find any child matching the CSS selector passed.Feature: using tailwind-merge library to override parent classes
Hi! First of all, this is a great library as it makes working with Tailwind a lot easier, and I'm very thankful for that.
Like the documentation explains, this library doesn't override parent classes, it just concatenates the different classes and the result will depend on each case. Which brings to the following suggestion: how possible would it be to switch the use of the current library
tailwindcss-classnamestotailwind-merge(https://github.com/dcastil/tailwind-merge) as this other library already handles tailwind classes overriding?I understand that this might be a breaking change given the current state of the library (if it's a hard change, but maybe it could be configurable?). However I believe users would benefit a lot more if it were possible to override parent classes.
Thanks!
Question: Does this library add the css in at runtime or compile time?
Other similar libraries like twin.macro, convert the css-in-js to css at compile time. Wanted to know if this library does the same, or does it insert css at runtime like styled-components, since that is not mentioned anywhere in the README.
TypeError: default is not a function
I'm getting this in vitest jsdom tests. All the tests that import a file that contains a tw component fail with this error, regardless of tw(xxx) or tw.xxx.
An issue occurs when I customize font-size.
There is an error that results in priority when customizing the naming of the font size.
Normal
|tailwind-styled-components Tag|Normarl Tag|Result| |---|---|---| |
|
|
|
Customize
|tailwind-styled-components Tag|Normarl Tag| |---|---| |
|
|Result|tailwind.config.js| |---|---| |
|
|
Does anyone have the same issue as this?
TypeScript Error..
module.style.ts file import tw from "tailwind-styled-components";
import tw from "tailwind-styled-components";
export const Container = tw.div
bg-blue-600;export const Button = tw.button
p-2;index.tsx file import React from "react"; import { Button, Container } from "./module.navbarStyles";
type Props = {};
const index = (props: Props) => { return (
);
};
export default index;
Then I got this type of Error. Type instantiation is excessively deep and possibly infinite.ts(2589).
Polymorphic Component: "Type instantiation is excessively deep and possibly infinite"
When using the
$asprop of myStyledButton, typescript complains with the following error onStyledButton:Here's a small example: