Use With
Setting up Twind for seamless integration in a Gatsby project.
- 📝 Inspect the example
- 📓 Consult the API reference
- 📜 Read the changelog
🤝 Compatibility
gatsby-plugin-twind | gatsby |
---|---|
>=1.0.0 <2 | >=2 <5 |
📦 Installation
-
Install from npm
@twind/core
andgatsby-plugin-twind
are available on npm and need to be installed together.shnpm install @twind/core gatsby-plugin-twind
-
Define the configuration
Using an extra file,
twind.config.js
, allows some tools like IntelliSense to find your configuration.twind.config.js jsimport { 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, })
-
Add the plugin using its name to the
plugins
array.gatsby-config.js jsmodule.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` // } // }, ], }
-
Optional: Install and configure the recommended presets
@twind/preset-autoprefix
and@twind/preset-tailwind
.Install the presets
All presets are available on npm.
shnpm 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 jsimport { defineConfig } from '@twind/core' import presetAutoprefix from '@twind/preset-autoprefix' import presetTailwind from '@twind/preset-tailwind' export default defineConfig({ presets: [presetAutoprefix(), presetTailwind()], })
-
Start using Twind in your pages and component
Start using Twind classes to style your content.
src/pages/index.js jsxexport default function Hello() { return <h1 className="text-3xl font-bold underline">Hello world!</h1> }