Styling with Tailwind.css
In this section, we will learn how to implement Tailwind styling in our Gatsby project:
- To start using Tailwind, we will need to install it along with a few other dependencies. Open a terminal at the
rootfolder 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. - Modify your
gatsby-config.jswith 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.
- In order to use PostCSS, it requires
postcss.config.jsto be present...