@twind/preact

Twind integration for Preact which allows to use the tw property, css property and className (shim without shim).

Installation

npm install @twind/preact

Usage

You must call setup during the app initialization.

import { setup } from '@twind/preact'

// Must call
setup({
  // Optional define props to use
  props: {
    // tw: false, // to disable
    // css: false, // to disable
    // className: true, // to enable
  },
  /* other twind configuration options */
})

const App = () => (
  <main
    tw="h-screen bg-purple-400 flex items-center justify-center"
    css={
      {
        /* CSS Object */
      }
    }
  >
    <h1 tw="font-bold text(center 5xl white sm:gray-800 md:pink-700)">This is Twind!</h1>
  </main>
)

Shim-like usage but without the shim

import { setup } from '@twind/preact'

setup({
  props: {
    // tw: false, // to disable
    // css: false, // to disable
    className: true, // to enable – suppports `class` property as well
  },
  /* other twind configuration options */
})

const App = () => (
  <main className="h-screen bg-purple-400 flex items-center justify-center">
    <h1 class="font-bold text(center 5xl white sm:gray-800 md:pink-700)">This is Twind!</h1>
  </main>
)

Styled API

Coming soon! In the mean time try @twind/react with aliasing React to Preact

License

MIT