Tailwind @screen directive equivalent

[saeedPadyab]

Hello
I want to know how can I use tailwind directives with twin?

[ben-rogerson]

Which directives are you interested in using?

[saeedPadyab]

Thanks for your response. The most important which is @screen

[saeedPadyab]

it seems i can have something like this.
const Wrapper = styled.div
${themescreens.xl} {
${twbg-red-500}
}

[ben-rogerson]

You could use the tw import for that example:

const Wrapper = tw.div`xl:bg-red-500`;

But if you're writing conditional styles or regular css then you'll need to use the styled import (or css prop).

If you want to work with the config breakpoints, you could make reusable functions to help sync them with tailwind:

import tw, { css, theme } from 'twin.macro'

const minXl = content => css`
  @media (min-width: ${theme`screens.xl`}) {
    ${content}
  }
`

const xlStyles = minXl(`
  ${tw`block`}
  color: red;
`)

const StyledButton = styled.button(() => [
    tw`bg-black`,
    xlStyles,
])

As of 1.12.0, the theme import allows you to grab the screens object from the config (as opposed to a single value).
This means it's now possible to map over screens to make a dynamic breakpoint helper.

[saeedPadyab]

Thanks for the response, I did exactly the way you said.