Presets

@twind/preset-tailwind

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

🤖 Try the playground
🧭 Explore the examples
📓 Consult the API reference
📜 Read the changelog

🤝 Compatibility

@twind/preset-tailwind	tailwindcss
`>=1.1.0 <1.2.0`	`3.2`
`>=1.0.0-next.39 <1.1.0`	`3.1`
`>=1.0.0-next.1 <1.0.0-next.39`	`3.0`

📦 Installation

with @twind/core

Install from npm:

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

Add the preset to your twind config:

twind.config.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/core@1,npm/@twind/preset-tailwind@1"
    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

🪄 Advanced

This presets allows to omit the default color palette to reduce the file size.

The following example selectively imports colors from the default palette but different colors can be used as well (see @twind/preset-radix-ui for an example).

twind.config.js

import { defineConfig } from '@twind/core'
import presetAutoprefix from '@twind/preset-autoprefix'
// Using @twind/preset-tailwind/base to exclude the default tailwind colors
import presetTailwind from '@twind/preset-tailwind/base'

// Selectively import colors
import {
  slate as gray,
  red,
  amber as yellow,
  emerald as green,
  indigo as blue,
} from '@twind/preset-tailwind/colors'

export default defineConfig({
  presets: [
    presetAutoprefix(),
    presetTailwind({
      colors: { gray, yellow, green, blue },
    }),
  ],
})