1. Presets
  2. Tailwind CSS

Presets

@twind/preset-tailwind

MIT License Latest Release Github

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

🤝 Compatibility

@twind/preset-tailwindtailwindcss
>=1.0.0-next.39 <1.1.03.1
>=1.0.0-next.1 <1.0.0-next.393.0

📦 Installation

with @twind/core

Install from npm:

sh
npm install @twind/core @twind/preset-tailwind

Add the preset to your twind config:

twind.config.js
js
import { defineConfig } from '@twind/core'
import presetTailwind from '@twind/preset-tailwind'

export default defineConfig({
  presets: [presetTailwind(/* options */)],
  /* config */
})
Usage with a script tag
html
<head>
  <script
    src="https://cdn.jsdelivr.net/combine/npm/twind,npm/@twind/preset-tailwind"
    crossorigin
  ></script>
  <script>
    twind.install({
      presets: [twind.presetTailwind(/* options */)],
      /* config */
    })
  </script>
</head>

with Twind CDN

Already included in @twind/cdn

🙇 Usage

All utilities and variants from Tailwind CSS are available.

🔧 Options

This preset can be configured with the following options:

  • disablePreflight: boolean — allows to disable the preflight