using css and tw on react components

[saeedPadyab]

Hello,
I have a component that returns a styled-component.

import { Input } from "./styles"
const InputGroup = (props)=>{
  return <Input {...props}/>
}

I need to add more classes of tailwind once i use the InputGroup component. I tried with the css and tw props, but they did not help me to achieve my goal.

<InputGroup  tw="bg-gray-200" />
<InputGroup  css={[tw`bg-gray-200`]} />

[ben-rogerson]

What does the Input component look like?
It should style correctly if it's just something like this:

const Input = tw.input``
// or 
// const Input = styled.input``

export { Input }

[saeedPadyab]

it is like this

import styled from "styled-components";
import tw from "twin.macro";

export const Input = styled.input`
  ${tw`bg-gray-100`};
`;

It is okay when i add classes like this but the issue that i have to add more classes when i use the component
<InputGroup css={[twbg-gray-200]} />

i tried both of them but they don't set to Input. how can i fix this issue?

[ben-rogerson]

Just tested with preset="styled-components" and all seems okay, I was wondering if you were testing with light colors which made it hard to tell if they change?

Here's my test:

import React from 'react'
import tw, { styled } from 'twin.macro'

export const Input = styled.input`
  ${tw`bg-green-500`};
`

const InputGroup = (props) => {
  return <Input {...props} />
}

const App = () => (
  <>
    <InputGroup />
    <InputGroup tw="bg-blue-500" />
    <InputGroup css={[tw`bg-yellow-500`]} />
  </>
)

export default App

And the output:

[saeedPadyab]

thanks for making a sample.
I got the issue finally. try to do this sample modular

1. in styles.ts

import tw, { styled } from 'twin.macro'
export const Input = styled.input`
  ${tw`bg-green-500`};
`

2. in Form.tsx

import { Input }  from "./styles"
export const InputGroup = (props) => {
  return <Input {...props} />
}

3. use it inside App.tsx

import { InputGroup }  from "./components/form/Form.tsx" 
const App = () => (
  <>
    <InputGroup />
    <InputGroup tw="bg-blue-500" />
    <InputGroup css={[tw`bg-yellow-500`]} />
  </>
)

The point is that added extra styles on InputGroup won't be applied on input without importing styled from "twind.macro" .inside App component

[ben-rogerson]

Yeah you'll need to import twin in that third example otherwise the tw + css props aren't going to work.

When you use the tw prop:

import 'twin.macro'
const App = () => <input tw="bg-blue-500" />

When you use the css prop:

import tw from 'twin.macro'
const App = () => <input css={[tw`bg-yellow-500`]} />

This option will activate the tw prop too.