Styling with Tailwind.css

In this section, we will learn how to implement Tailwind styling in our Gatsby project:

1. To start using Tailwind, we will need to install it along with a few other dependencies. Open a terminal at the root folder of your project and run the following:

   npm install postcss gatsby-plugin-postcss tailwindcss

   Here, we are installing PostCSS, its associated Gatsby plugin, and tailwindcss. PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. In the case of Tailwind, there is a specific tailwind plugin for PostCSS that we will be implementing.

2. Modify your gatsby-config.js with the following:

   module.exports = {
     plugins: [
       'gatsby-plugin-postcss'
     ],
   };

   Here, we are updating our Gatsby configuration to let it know to make use of the Gatsby PostCSS plugin.

3. In order to use PostCSS, it requires postcss.config.js to be present...