Gatbsy

🤝 Compatibility

gatsby-plugin-twind	gatsby
>=1.0.0 <2	>=2 <5

📦 Installation

1. Install from npm

   @twind/core 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.

   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.

   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.

   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.

   jsx ✓ ✗

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