Skip to content

Files

Latest commit

Apr 26, 2021
f3a5a71 · Apr 26, 2021

History

History

preact

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Apr 26, 2021
Mar 12, 2021
Mar 13, 2021
Apr 26, 2021
Apr 26, 2021
Mar 12, 2021
Mar 12, 2021

README.md

@twind/preact Latest Release MIT License

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

Installation

npm install @twind/preact

Usage

Edit twind-preact

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

Edit twind-shim-preact

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