Options
All
  • Public
  • Public/Protected
  • All
Menu

Module twind/shim

Documentation Github Module Size Typescript

Allows to copy-paste tailwind examples. This feature can be used together with your favorite framework without any additional setup.

The twind/shim module allows for the use of the class attribute for tailwind rules. If such a rule is detected, the corresponding CSS rule is created and injected into the stylesheet dynamically. twind/shim is intended for client-side usage and, without configuration, utilizes the default/global tw instance. For server-side usage, twind/shim/server exports a dedicated shim function that will parse and update a static HTML string while collecting the style rules into a sheet for further usage in your respective framework.

There is no need for tw but it can be used on the same elements as well. All Twind syntax features like grouping are supported within class attributes. See example/shim.html for a full example.

Usage

For runtime processing of your javascript-assisted HTML documents, simply include the twind/shim module and watch the magic happen.

<!DOCTYPE html>
<html lang="en" hidden>
  <head>
    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
  </head>
  <body>
    <main class="h-screen bg-purple-400 flex items-center justify-center">
      <h1 class="font-bold text(center 5xl white sm:gray-800 md:pink-700)">This is Twind!</h1>
    </main>
  </body>
</html>

🚀 live and interactive shim demo

The twind/shim module utilizes the twind/observe module internally, but it provides its own setup function for customizing the used tw instance and setting the target node to be shimmed. It also provides a disconnect function to stop shimming/observing all nodes.

import { setup, disconnect } from 'twind/shim'

setup({
  // node element to shim/observe (default: document.documentElement)
  target: document.querySelector('#__twind'),

  // All other setup options are supported
})

// stop shimming/observing all nodes
disconnect()

Customize tw instance

You can provide a <script type="twind-config">...</script> within the document. The content must be valid JSON and all twind setup options (including hash) are supported.

<!DOCTYPE html>
<html lang="en" hidden>
  <head>
    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
    <script type="twind-config">
      {
        "hash": true
      }
    </script>
  </head>
  <body>
    <main class="h-screen bg-purple-400 flex items-center justify-center">
      <h1 class="text(center 5xl white sm:gray-800 md:pink-700)">
        This is <span class="font-bold">Twind</span>!
      </h1>
    </main>
  </body>
</html>

Alternatively the following works:

import { setup } from "https://cdn.skypack.dev/twind/shim"

setup({
  target: document.body, // Default document.documentElement (eg html)
  ... // All other twind setup options are supported
})

It is possible to mix twind/shim with tw:

import 'twind/shim'
import { tw } from 'twind'

const styles = {
  center: tw`flex items-center justify-center`,
}

document.body.innerHTML = `
  <main class="h-screen bg-purple-400 ${styles.center}">
    <h1 class="font-bold ${tw`text(center 5xl white sm:gray-800 md:pink-700)`}">
      This is Twind!
    </h1>
  </main>
`

Prevent FOUC (flash of unstyled content)

To prevent FOUC (flash of unstyled content) it is advised to set the hidden attribute on the target element. twind/shim will remove it once all styles have been generated.

<!DOCTYPE html>
<html lang="en" hidden>
  <!-- ... -->
</html>

FAQ

You can click on each question to reveal the answer.

How can I use twind/shim from javascript?

Internally twind/shim uses twind/observe which may be useful on its own for advanced use cases.

import 'twind/shim'

import { setup, disconnect } from 'twind/shim'
How to support legacy browser with the UMD bundles?

You may need to provide certain polyfills depending on your target browser.

<script defer src="https://unpkg.com/twind/twind.umd.js"></script>
<script defer src="https://unpkg.com/twind/observe/observe.umd.js"></script>
<script defer src="https://unpkg.com/twind/shim/shim.umd.js"></script>
How does the shim work?

twind/shim starts {@link twind/observe.observer | observing} class attributes changes right after the DOM content has been loaded. For further details see twind/observe.

Index

Interfaces

Functions

Functions

Const disconnect

  • disconnect(): void

Const setup

  • Configure the default tw and starts observing the target element (default: document.documentElement).

    You do not need to call this method. As an alternativ you can provide a <script type="twind-config">...</script> element within the document. The content must be valid JSON and all twind setup options (including hash) are supported.

    Parameters

    Returns void

Generated using TypeDoc