@twind/core
Minimal implementation of a tailwind-compatible CSS-in-JS framework.
This package does not contain any Tailwindcss rules. These are defined in @twind/preset-tailwind.
READ THIS FIRST!
Twind v1 is still in beta. Expect bugs!
Installation
Install from npm:
npm install @twind/core@next
yarn add @twind/core@next
Usage
import { twind, cssom, observe } from '@twind/core'
const tw = observe(
twind(
{
theme: {
},
rules: [
],
},
cssom(),
),
)
API
twind
TDB
cx
import { cx } from '@twind/core'
element.className = cx`
underline
/* multi
line
comment
*/
hover:focus:!{
sm:{italic why}
lg:-{px}
-mx-1
}
// Position
!top-1 !-bottom-2
text-{xl black}
`
shortcut
TDB
style
TDB
Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps) — powered by consume(html, tw)
Note: This clears the Twind instance before processing the HTML.
import { twind, virtual, extract } from '@twind/core'
const tw = twind(
{
},
virtual(),
)
function render() {
const { html, css } = extract(renderApp(), tw)
return html.replace('</head>', `<style data-twind>${css}</style></head>`)
}
consume(html, tw)
Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
- parse the markup and process element classes with the provided Twind instance
- update the class attributes if necessary
- return the HTML string with the final element classes
import { twind, virtual, consume, stringify } from '@twind/core'
const tw = twind(
{
},
virtual(),
)
function render() {
const html = renderApp()
tw.clear()
const markup = comsume(html, tw)
const css = stringify(tw.target)
return markup.replace('</head>', `<style data-twind>${css}</style></head>`)
}