babel-plugin-twobj

Integrate twobj and frontend frameworks

Basic Features

import { globalStyles, tw, theme, wrap } from "twobj"

const style = tw`block text-black`

const hocus = wrap`focus: hover:`

const value = theme`colors.blue.500`

console.log(globalStyles)

React

Apply component style by tw prop.

function ComponentA(props) {
  return <div tw="bg-black text-white ..." {...props} />
}

TypeScript

Add type definitions to your code.

Example for emotion, change your tsconfig.json:

{
  "compilerOptions": {
    "types": ["@emotion/react/types/css-prop", "babel-plugin-twobj/types/emotion"]
  }
}

VS Code Extension

Install via the Marketplace