Presets
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:
sh
npm install @twind/core @twind/preset-tailwind
Add the preset to your 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).
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 },
}),
],
})