Skip to content

preset-ext.md

Latest commit

 

History

History
85 lines (65 loc) · 1.68 KB

preset-ext.md

File metadata and controls

85 lines (65 loc) · 1.68 KB
Raw
section Presets
label Extensions
package @twind/preset-ext
excerpt Extension preset for twind providing utilities and variants that are not _yet_ part of [@twind/preset-tailwind](./preset-tailwind) eg Tailwind CSS.
next ./preset-line-clamp.md

📦 Installation

with @twind/core

Install from npm:

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

Add the preset to your twind config:

import { defineConfig } from '@twind/core'
import presetExt from '@twind/preset-ext'

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

with Twind CDN

<head>
  <script src="https://cdn.twind.style/ext" crossorigin></script>
  <script>
    twind.install({
      presets: [twind.presetExt()],
      /* config */
    })
  </script>
</head>

🙇 Usage

Short CSS

Allows any CSS properties to be added:

<div class="background-color[#1da1f1]" />

↓ ↓ ↓ ↓ ↓ ↓

.background-color\[\#1da1f1\] {
  background-color: #1da1f1;
}

When a value needs to contain a space, use an underscore (_) instead and Twind will automatically convert it to a space at build-time 1.

Footnotes

  1. Tailwind CSS › Adding Custom Styles › Handling whitespace ↩