Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

twind

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

twind

The core engine without any presets.

1.0.0-next.27
Source
npm

Version published: 3 years ago

Weekly downloads: 7.9K; decreased by-14.66%

Maintainers: 2

Weekly downloads

Created: 4 years ago

Source

twind

READ THIS FIRST!

Twind v1 is still in beta. Expect bugs!

Utility-first CSS without any build step right in the browser or any other environment like Node.js, deno, workers, ...

Twind does not include any core utilities — use one of the existing presets:

@twind/tailwind to get a full Tailwind v3 experience. It includes the following presets:
- @twind/preset-autoprefix
- @twind/preset-tailwind
@twind/preset-tailwind-forms to get Tailwind v3 and Tailwind Forms.
@twind/preset-ext

Here are some examples of how to write your own rules or variants:

preset-tailwind: rules and variants
preset-ext: rules and variants

Additionally we provides several integrations:

Gatsby — gatsby-plugin-twind
SvelteKit — @twind/sveltekit

To get you started, take a look at the examples.

Usage

npm install twind@next

import { setup } from 'twind'

// You must call setup at least once, but can call it multiple times
setup({
  /* options */
})

Incase you are not using SSR to inject the pre-computed styles apply the following pattern to prevent FOUC:

<body class="!block" style="display: none">
  <!-- ... -->
</body>

If any element has the autofocus attribute, Twind will focus it after all styles are injected.

Usage with a script tag

Add this line to your index.html:

<head>
  <script src="https://cdn.jsdelivr.net/npm/twind@next" crossorigin></script>
  <script>
    twind.setup({
      /* options */
    })
  </script>
</head>

To add presets add their ids to the script src attribute:

<head>
  <!-- ... -->
  <script
    src="https://cdn.jsdelivr.net/npm/twind@next,npm/@twind/preset-tailwind@next"
    crossorigin
  ></script>
  <script>
    twind.setup({
      presets: [twind.presetTailwind()],
      // ...
    })
  </script>
  <!-- ... -->
</head>

API

If you are using the script tag these methods are available via the twind global object (eg twind.setup).

`setup(config [, sheet [, target]])`

Initializes Twind and can be called as many times as you want.

import { setup } from 'twind'

// can be called as many times as you want.
const tw = setup({
  /* config */
})
// -> tw === import { tw } from 'twind'

`tw(...tokens)` — the current Twind instance

import { tw } from 'twind'

tw`underline`
tw({ underline: true })

tw.theme('colors.blue.500', 'blue')

`cx`

import { cx } from 'twind'

// Set a className
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

`css`

TDB

`style`

TDB

`extract(html, tw)`

Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps) — powered by consume(html, tw)

Note: Consider using inject instead.

Note: This clears the Twind instance before processing the HTML.

import { setup, extract, tw } from 'twind'

// can be in a different file — but should be called at least once
setup({
  /* config */
})

function render() {
  const { html, css } = extract(renderApp(), tw)

  // inject as last element into the head
  return html.replace('</head>', `<style data-twind>${css}</style></head>`)
}

Low-Level API

`twind`

TDB

`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 { setup, tw, consume, stringify } from 'twind'

// can be in a different file — but should be called at least once
setup({
  /* config */
})

function render() {
  const html = renderApp()

  // clear all styles
  tw.clear()

  // generated markup
  const markup = comsume(html, tw)

  // create CSS
  const css = stringify(tw.target)

  // inject as last element into the head
  return markup.replace('</head>', `<style data-twind>${css}</style></head>`)
}

Keywords

FAQs

What is twind?

Is twind popular?

Is twind well maintained?

Package last updated on 28 Jan 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

twind

READ THIS FIRST!

Usage

API

setup(config [, sheet [, target]])

tw(...tokens) — the current Twind instance

cx

shortcut

css

style

extract(html, tw)

Low-Level API

twind

consume(html, tw)

Keywords

Related posts

Malicious npm Package Exploits WhatsApp Authentication with Remote Kill Switch for File Destruction

PyPI Introduces Digital Attestations to Strengthen Python Package Security

`setup(config [, sheet [, target]])`

`tw(...tokens)` — the current Twind instance

`cx`

`shortcut`

`css`

`style`

`extract(html, tw)`

`twind`

`consume(html, tw)`