Using arbitrary values

[Vladyslav Kotsiuba]

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>
)

[Vladyslav Kotsiuba]

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>
)

[Fernanda Mesquita]

I believe the second syntax makes more sense and I absolutely love it. Would spare a lot of time and it's cleaner.

[Mathias Gilson]

Have you tried to use @tailwindcss/nesting ?