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 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/tailwind — ready to use Tailwind CSS
@twind/cdn — a drop-in replacement for Tailwind CSS Play CDN

Used within the following examples:

Playground

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/tailwind — ready to use Tailwind CSS

Already included in @twind/tailwind

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:

enablePreflight: boolean = true — whether to enable the preflight