Tailwind-Styled-Component
Tailwind-Styled-Component copied to clipboard
Using arbitrary values
Hello, it would be nice to have this in your library, or is it already there?
Example of using arbitrary variants to style elements with a custom selector:
import tw from 'tailwind-styled-components'
const Button = tw.button`
bg-black
[> i]:block
[> span]:(text-blue-500 w-10)
[div.container]:(grid m-8)
`
const Component = () => (
<Button>
<i>Icon</i>
<span>Label</span>
<div className="container">Container</div>
</Button>
)
Or even in such structure to implement same logic:
import tw from 'tailwind-styled-components'
const Button = tw.button`
bg-black
i {
block
}
span {
text-blue-500
w-10
}
div.container {
grid
m-8
}
`
const Component = () => (
<Button>
<i>Icon</i>
<span>Label</span>
<div className="container">Container</div>
</Button>
)
I believe the second syntax makes more sense and I absolutely love it. Would spare a lot of time and it's cleaner.
Have you tried to use @tailwindcss/nesting ?