twin.macro Sebagai Alternatif menggunakan TailwindCSS dan CSS-in-JS

CSS Mar 15, 2021

twin.macro adalah salah satu library yang dibuat oleh Ben Rogerson, menggunakan Tailwind dan mencampurkannya dengan CSS-in-JS menjadikan twin.macro sebagai salah satu alternatif untuk bisa menuliskan Tailwind dengan lebih mudah dan lebih bervariatif.

Apa itu twin.macro?

Salah satu pustaka yang merubah Tailwind class menjadi CSS object dengan menggunakan Emotion/styled-component yang memberikan kita beberapa keunggulan dengan menulis Styled Component.

Cara Install twin.macro

Ada beberapa cara untuk bisa melakukan install twin.macro. Untuk versi bahasa inggris (saya akan menulis versi bahasa indonesia) bisa melakukan dengan cara dari official twin.macro.

Light libraries

Preact
styled-components / emotion / goober
React
styled-components / emotion

Tooled libraries

Create React App
styled-components / emotion
Snowpack
styled-components / styled-components (ts) / emotion / emotion (ts)
Vite
styled-components (ts) / emotion

Advanced frameworks

Cara Menggunakan twin.macro

Kalau biasanya, tanpa twin.macro kita menggunakan ClassName, maka di twin.macro kita menggunakan tw props untuk menambahkan Tailwind classes ke jsx element.

import 'twin.macro'

const Input = () => <input tw="border hover:border-black" />

Conditional Style

import tw from 'twin.macro'

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

Menggunakan SaSS

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

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

Menggunakan Styled Components untuk styling component

import Reactfrom 'react';
import tw from 'twin.macro'

const Input = tw.input`border hover:border-black`

const ComponentInput = () => {
return (
	<Input name="name" />
	)
}

Bisa juga menjadikannya Reusable Component, terutama dalam kasus Styling Text.

import tw from 'twin.macro';

const TextBody = tw.p`text-black text-base leading-5`;

export default TextBody;

TextBody.js

Lalu, kita bisa menggunakan ulang component tersebut dan menambahkan beberapa styling yang kita custom. Misalnya

import React from 'react';
import tw from 'twin.macro';
import TextBody from '../components/misc/TextBody';

const Subtitle = tw(TextBody)`font-semibold my-2 mx-auto`;

const Paragraf = () => {
  return (
    <>
      <Subtitle>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quo at
        maiores molestias, est cum atque iusto, perspiciatis laudantium mollitia
        et facere ipsum in amet deserunt eaque, similique porro vero!
      </Subtitle>
    </>
  );
};

export default Paragraf;

paragraf.js

Menggunakan twin.macro dan Sass secara bersamaan pada sebuah komponen

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

const TextHeaderSix = styled.h6`
  ${tw`font-bold text-3xl text-center`}
  ${css`
    line-height: 1em;
  `}
`;

export default TextHeaderSix;

TextHeaderSix.js

Condition Styling Component di twin.macro pada Component

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

const TextHeaderOne = styled.h1(({ isCapitalize, isLarge }) => [
  tw`font-Playfair font-bold `,
  // Ternary
  isCapitalize && tw`capitalize`,
  isLarge ? tw`text-3xl` : tw`text-2xl`,
]);

export default TextHeaderOne;

TextHeaderOne.js

Variant- variant untuk Prefix

Kalau di Tailwind, hanya beberapa prefix yang disupport seperti active: hover: group: , focus: sedangkan pada twin.macro, ada banyak sekali variant yang disupport seperti :

Prefix before: and after: untuk style pseudo-elements
Prefix hocus: untuk style hover + focus pada saat yang sama
Style dengan extra group states seperti group-hocus: dan group-active:
Style form field states denganchecked:, invalid: dan required:
Stack up variants sm:hover:first:bg-black

Stack variant bisa berlaku untuk variant dengan banyak style menjadi seperti ini

import React from 'react';
import tw from 'twin.macro';

const Header = () => {
  return (
    <div tw="bg-blue-100 py-4 hover:(bg-blue-200 text-white py-2)">
      header Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut optio,
      sint, neque et veritatis expedita suscipit perspiciatis illum recusandae
      enim, libero tempora. Eveniet est excepturi doloremque error nobis
      dignissimos magnam.
    </div>
  );
};

export default Header;

Header.js

Menambahkan Class !important

Sebenarnya, kita sebisa mungkin menghindari penggunaan style !important namun, pada beberapa kasus kita membutuhkan. Nah, twin.macro juga mensupport hal tersebut.

import React from 'react';
import tw from 'twin.macro';

const Footer = () => {
  return <div tw="bg-blue-100 bg-blue-400!">footer</div>;
};

export default Footer;

Footer.js