Package Exports

@twind/preset-tailwind
@twind/preset-tailwind/colors
@twind/preset-tailwind/defaultTheme
@twind/preset-tailwind/package.json
@twind/preset-tailwind/preflight
@twind/preset-tailwind/rules
@twind/preset-tailwind/variants

Readme

@twind/preset-tailwind

READ THIS FIRST!

Twind v1 is still in beta. Expect bugs!

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

This preset is included out-of-the-box in @twind/cdn — a drop-in replacement for Tailwind CSS Play CDN

Used within the most examples.

Installation

Install from npm:

npm install twind@next @twind/preset-tailwind@next

Installation

with twind

import { setup } from 'twind/core'
import presetTailwind from '@twind/preset-tailwind'

setup({
  presets: [presetTailwind(/* options */)],
  /* config */
})

Usage with a script tag

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

with Twind CDN — a drop-in replacement for Tailwind CSS Play CDN

Already included in @twind/cdn

Usage

This preset can be configured with the following options:

disablePreflight: boolean — allows to disable the preflight