Under the Hood

The story begins with us creating every frontend UI React library boilerplate with Next.js. Now, we are heading towards other React frameworks. So, it’s time to think about the architecture and installation processes we need to follow.

Installing plugins and Tailwind CSS

In today’s story, we will install Tailwind CSS on our Gatsby site. The first step is to create our Gatsby project. You can read my article to get started with Gatsby or you can directly download the ready-to-use code.

Once that is completed, we will install Tailwind and some post CSS plugins that will help the server-side rendering web application to load CSS.

yarn add gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest

Activating plugins for CSS in the server-side

After installing plugins, we just need to configure them for our Gatsby project. So, start by creating tailwind.config.js and postcss.config.js. You can either create the files manually or using the below command.

npx tailwindcss init -p

If you are creating the files manually make sure you add them to the root directory. The next step is to add Tailwind CSS in configurations. In the tailwind.config.js file add the following code.

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
 plugins: [],
}

Add the following code in postcss.config.js file.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

And Inside the gatsby.config.js file activate the postcss gatsby plugin by adding the following code:

module.exports = {
  siteMetadata: {
    title: "GatsbyIntroduction",
   },
  plugins: ["gatsby-plugin-styled-components, gatsby-plugin-postcss"],
};

These 3 steps will configure the tailwind CSS on the server-side.

Importing CSS & its applications

The last step will be including Tailwind in our global CSS for our project. Inside src in the styles folder create a global style file and add the following code in it.

/* ./src/styles/global.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Make sure the directory is the same as mentioned because tailwind will swap these directories at build time and make them available on the server-side. The final and last step is providing global styles location to our gatsby which then imports the CSS from the directories during build time.

#gatsby #web-development #technology #javascript