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. -
Define the configuration
Using an extra file,
twind.config.js
, allows some tools like IntelliSense to find your configuration. -
Add the plugin using its name to the
plugins
array. -
Optional: Install and configure the recommended presets
@twind/preset-autoprefix
and@twind/preset-tailwind
.Install the presets
All presets are available on npm.
Configure the presets
Each preset must be added to the
presets
array in the configuration. -
Start using Twind in your pages and component
Start using Twind classes to style your content.