Berbagai Cara Membuat Kondisional Class Component / CSS di Emotion dan Tailwind Macro

CSS Apr 03, 2021

Pembuka

twin.macro atau yang bisa kita sebut sebagai Twin's telah saya gunakan cukup lama. Seiringnya waktu pun, saya menemukan beberapa hal yang cukup menjadi challenge bagi saya sendiri. Salah satunya adalah permasalahan kondisional class / kondisional style pada component di NextJS.

Kalau kita menggunakan Tailwind biasa, kita bisa menggunakan tenary pada class, misalnya :

<div className={active ? "px-8 text-xl font-bold text-brand-400 " : " px-4 text-base font-semibold text-brand-600"}>
...
 </div>

atau menggunakan dependencies seperti classnames yang membantu dalam logic class.

Lantas, bagaimana dengan Twin's?

Permasalahan

Ketika kita menggunakan Twin's, kita tidak bisa menggunakan tenary pada Twin’s tw prop, karena tw hanya bisa menerima string. Juga, kita tidak bisa menggunakan className untuk memberikan nama class karena Twin's menggunakan tw props atau css props untuk pemberian style / Tailwind Class pada jsx element.

Solusi

Menggunakan css props

import tw from 'twin.macro'

const Input = ({ hasHover }) => (
  <input css={[tw`border`, hasHover && tw`hover:border-black`]} />
)

Menggunakan styled Import

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

const StyledInput = styled.input(({ hasBorder }) => [
  `color: black;`,
  hasBorder && tw`border-purple-500`,
])
const Input = () => <StyledInput hasBorder />

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

const Btn = styled.button`
  ${props =>
    props.active
      ? tw`bg-brand-500 text-brand-500`
      : tw`bg-brand-300 text-brand-300`}
`

const Button = () => {
  return <Btn active={showButton}>Button Show</Btn>
}

export default Button

Selain bisa menggunakan props untuk bisa kondisional style, bisa pula digunakan untuk kondisional variable.

import tw, {styled} from "twin.macro";

const PostImage = styled.div`
  ${props => css`background-image: url("${props.imageSrc}");`}
  ${tw`h-64 sm:h-80 bg-center bg-cover rounded-t`}
`;

export default () => {
	return (
  		<PostImage imageSrc={post.postImageSrc} />
	)
}

Beberapa cara tersebut yang bisa kita lakukan dalam melakukan kondisional style saat menggunakan Twin's. Kalau mungkin teman-teman memiliki cara tersendiri, silahkan mention ke @f2ladi ya!

Semoga Membantu!