1. Use With
  2. Gatbsy

Use With

Gatbsy

MIT License Latest Release Github

Setting up Twind for seamless integration in a Gatsby project.

🤝 Compatibility

gatsby-plugin-twindgatsby
>=1.0.0-next.38 <1>=2 <5

📦 Installation

  1. Install from npm

    twind and gatsby-plugin-twind are available on npm and need to be installed together.

    sh
    npm install @twind/core gatsby-plugin-twind
  2. Define the configuration

    Using an extra file, twind.config.js, allows some tools like IntelliSense to find your configuration.

    twind.config.js
    js
    import { defineConfig } from '@twind/core'
    
    export default defineConfig({
      /* @twind/with-sveltekit will use hashed class names in production by default
       * If you don't want this, uncomment the next line
       */
      // hash: false,
    })
  3. Configure the plugin

    Add the plugin using its name to the plugins array.

    gatsby-config.js
    js
    module.exports = {
      plugins: [
        `gatsby-plugin-twind`,
        // 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:
        // {
        //   resolve: `gatsby-plugin-twind`,
        //   options: {
        //     config: `./path/to/twind.config`
        //   }
        // },
      ],
    }
  4. Optional: Install and configure the recommended presets @twind/preset-autoprefix and @twind/preset-tailwind.

    Install the presets

    All presets are available on npm.

    sh
    npm install @twind/preset-autoprefix @twind/preset-tailwind

    Configure the presets

    Each preset must be added to the presets array in the configuration.

    twind.config.js
    js
    import { defineConfig } from '@twind/core'
    import presetAutoprefix from '@twind/preset-autoprefix'
    import presetTailwind from '@twind/preset-tailwind'
    
    export default defineConfig({
      presets: [presetAutoprefix(), presetTailwind()],
    })
  5. Start using Twind in your pages and component

    Start using Twind classes to style your content.

    src/pages/index.js
    jsx
    export default function Hello() {
      return <h1 className="text-3xl font-bold underline">Hello world!</h1>
    }