Using the Shim | twind

Seamless integration with existing Tailwind HTML. 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. The default twind/shim export 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.

💡 twind/shim can be used together with tw and every framework as it detects class changes. All Twind syntax features like grouping are supported.

Dynamic Extraction
Static Extraction

Dynamic Extraction

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

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>

How can I use twind/shim from javascript (Click to expand)

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

import 'twind/shim'

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

How to support legacy browser with the UMD bundles (Click to expand)

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>

Implementation Details (Click to expand)

twind/shim starts observing class attributes changes right after the DOM content has been loaded. For further details see twind/observe.

Static Extraction

If you wish to remove Twind's runtime overhead or you're interested in using Twind in a universal or "isomorphic" web app, twind/shim/server exports the dedicated twind/shim/server.shim function for performant processing of static HTML.

💡 You'll find more details and examples in the Extract Styles aka SSR guide.

import { setup } from 'twind'
import { virtualSheet, getStyleTag, shim } from 'twind/shim/server'

const sheet = virtualSheet()

setup({ ...sharedOptions, sheet })

function ssr() {
  // 1. Reset the sheet for a new rendering
  sheet.reset()

  // 2. Render the app to an html string and handle class attributes
  const body = shim(renderTheApp())

  // 3. Create the style tag with all generated CSS rules
  const styleTag = getStyleTag(sheet)

  // 4. Generate the response html
  return `<!DOCTYPE html>
    <html lang="en">
      <head>${styleTag}</head>
      <body>${body}</body>
    </html>
  `
}

In order to prevent harmful code injection on the web, a Content Security Policy (CSP) may be put in place. During server-side rendering, a cryptographic nonce (number used once) may be embedded when generating a page on demand:

// ... other code is the same as before ...

// Usage with webpack: https://webpack.js.org/guides/csp/
const styleTag = getStyleTag(sheet, { nonce: __webpack_nonce__ })

Continue to Customize the Theme