Create a Custom Gatsbyjs Recipe for Installing NPM Packages
Gatsby Recipes use MDX files to specify what steps are taken, files are downloaded and plugins installed.
In this lesson we will set up a tailwindcss.mdx file that specifies what tailwind is and installs the package using the NPMPackage component through Gatsby Recipe cli.
Instructor: [0:00] To create a recipe, we need first to create an MDX file. I'm going to go to the root of my Gatsby project. You can create it anywhere. It doesn't need to be part of a Gatsby project. Here, I would like to create a recipe that will help me to set up Tailwind CSS with Gatsby. Let's call this tailwindcss.mdx and hit Enter. MDX is a markdown file that also supports JSX. That's how we would...
[0:32] First thing, let's have a title. Let's call this Setup Gatsby with Tailwind. Next, you can add some description for your recipe. In my case, I will paste the Tailwind CSS link in here and some description. The recipe is basically a set of steps that you walk the user through.
[0:54] To create your first step, you need to add three dashes. First thing we need to do is to install an npm package. To install npm package, we need to use the npm package component. Let's add the title of the step, which will be Install npm packages.
[1:09] To install the npm package, we need to use the npm package component. Here, we need to pass the name. Our package will be tailwindcss. Here, we need to close the component. Let's hit Save and go to our terminal and do Gatsby Recipes, and then here we need to give it the recipe path. In our case, it's tailwindcss.mdx.
[1:35] You can see here it's showing us the title and the description for Tailwind that we have here. If we hit Enter, it will go to the first step. It's the only step because we have only one section. It will tell us, "Hey, it will install the Tailwind CSS at latest." This one is the title of our step.
[1:57] If we hit Enter, and after this is done, if you go to the package.json and look through our dependencies, you can see here tailwindcss was installed.
[2:14] In review, to add an npm package using a recipe, first you need to create a step, put the title, and use the npm package component with the name of the dependency that you want to install.