Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Gatsby plugin which wraps the vanilla-extract project for easy use in Gatsby.


npm install gatsby-plugin-vanilla-extract @vanilla-extract/css @vanilla-extract/webpack-plugin

Add to your site’s gatsby-config.js.

module.exports = {
  plugins: [`gatsby-plugin-vanilla-extract`],

You can also pass any vanilla-extract configuration object to the plugin.

module.exports = {
  plugins: [
      resolve: `gatsby-plugin-vanilla-extract`,
      options: {
        identifiers: `short`,

How to use

See the vanilla-extract website for full documentation.


import * as React from "react";

import { className } from "../styles/index.css.ts";

export default function Index() {
  return <div className={className}>Pizza</div>;


import { style } from "@vanilla-extract/css";

export const className = style({
  background: "red",

Example Project

Kick off your project using Gatsby’s example project

© 2023 Gatsby, Inc.