Community Plugin
View plugin on GitHub

gatsby-plugin-twind

READ THIS FIRST!

Twind v1 is still in beta. Expect bugs!


A Gatsby plugin for Twind with built-in server-side rendering support.

Used within the following examples:

Installation

Install from npm:

npm install twind gatsby-plugin-twind@next

Usage

Please see examples/gatsby for detailed usage example.

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-twind`,
    // {
    //   resolve: `gatsby-plugin-twind`,
    //   options: {
    //     config: `./path/to/twind.config`
    //   }
    // },
  ],
}

twind.config.js

import { defineConfig } from 'twind'
// import { defineConfig } from '@twind/tailwind'

export default defineConfig({
  /* config */
)

gatsby-plugin-twind will use hashed class names in production by default. If you don’t want this, you can use the hash config option:

export default defineConfig({
  hash: false,
  /* config */
})

Options

This plugin assumes a twind.config.js file in the root of your project.

You can use the config option to specify a different path to a twind config file:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-twind`,
      options: {
        config: `./path/to/twind.config`,
      },
    },
  ],
}
© 2022 Gatsby, Inc.