Setup a Gatsby Project to Use Recipes

Create a Custom Gatsbyjs Recipe for Installing NPM Packages

Add a Gatsby Plugin using a Gatsbyjs Recipe

Add Files using a Gatsby Recipe

Getting Started with Gatsbyjs recipes

In [Create a Custom Gatsbyjs Recipe for Installing NPM Packages](https://egghead.io/lessons/gatsby-install-an-npm-package-using-a-gatsbyjs-recipe?pl=getting-started-with-gatsbyjs-recipes-c79a) you learned how to write a Gatsby Recipe to install an NPM Package. For gatsby plugins and themes, there is a config step as well.

In this lesson we will create a new step within a recipe that will install the `gatsby-plugin-postcss` package and configure it within `gatsby-config.js` using the `GatsbyPlugin` component. NOTE: Options support for [configuring plugins](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/README.md#recipe-api) coming soon.

Khaled Garbaya: [0:00] To add a Gatsby plugin, let's first create a new [inaudible] . Here we'll add a description. Let's install the NPMPackage over the plugin. Next, let's use the GatsbyPlugin component to configure Gatsby to use that plugin. We will give it a name. The name will be gatsby-plugin-postcss. Let's hit Save and run our recipe again.

[0:28] First step is installing Tailwind CSS. The second step is adding this gatsby-plugin-postcss. Now that's done, if we go to our gatsby-config.js, all the way down, you can see here we added that plugin. It's also installed as a dependency right here.

[1:03] In review, to add a GatsbyPlugin through recipe, you need to install it using the NPMPackage component, and then use the GatsbyPlugin component to add that to the Gatsby config.

Course

Getting Started with Gatsbyjs recipes

Add a Gatsby Plugin using a Gatsbyjs Recipe

Share this video with your friends