@twind/tailwind NPM

@twind/tailwind

READ THIS FIRST!

Twind v1 is still in beta. Expect bugs!

The full Tailwind CSS experience without any build step right in the browser or any other environment like Node.js, deno, workers, ...

The following presets are included out-of-the-box:

Used within the following examples:

Usage

npm install twind@next @twind/tailwind@next

import { setup } from '@twind/tailwind'

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

To add other presets add them to the presets array:

import { setup } from '@twind/tailwind'
import presetTailwindForms from '@twind/preset-tailwind-forms'

setup({
  presets: [presetTailwindForms(/* 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.

Add this line to your index.html:

<head>
  <script
    src="https://cdn.jsdelivr.net/combine/npm/twind@next,npm/@twind/tailwind@next"
    crossorigin
  ></script>
</head>

To configure Twind add a script block after the previous one (optional):

<script>
  twind.setup({
    /* options */
    /* config */
  })
</script>

If you are not using any Twind API (like cx, css, ...) you can use the optimized @twind/cdn package.

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

<head>
  <script
    src="https://cdn.jsdelivr.net/combine/npm/twind@next,npm/@twind/tailwind@next,npm/@twind/preset-tailwind-forms@next"
    crossorigin
  ></script>
  <script>
    twind.setup({
      /* options */
      presets: [twind.presetTailwindForms(/* options */)],
      /* config */
    })
  </script>
</head>

API

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

The following options from @twind/preset-tailwind are available:

darkMode: 'media' | 'class' = 'media' — whether to use dark mode media queries or class names
enablePreflight: boolean = true — whether to enable the preflight

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

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

import { setup } from '@twind/tailwind'

const tw = setup({
  // this are the defaults
  darkMode: 'media',
  enablePreflight: true,
  /* config */
})
// -> tw === import { tw } from 'twind'

`defineConfig([config])`

Used to define the configuration within twind.config.{js,ts,mjs,cjs}.

import { defineConfig } from '@twind/tailwind'

export default defineConfig({
  // this are the defaults
  darkMode: 'media',
  enablePreflight: true,
  /* config */
})

Then use the following script to initialize Twind:

// not setup using '@twind/tailwind' as that would add the built-in presets twice
import { setup } from 'twind'
import config from './twind.config'

setup({
  /* config */
})

twind tw-in-js tailwind tailwindcss tailwind-in-js

@twind/preset-autoprefix @twind/preset-tailwind @swc/helpers

@everything-registry/sub-chunk-942 @infinitebrahmanuniverse/nolb-_tw @zalastax/nolb-_tw

1.0.0-next.39

2 years ago

0.0.0-canary-3f42963d

2 years ago

1.0.0-next.38

2 years ago

1.0.0-next.37

2 years ago

1.0.0-next.36