Tailwind is a CSS framework that gives you lots of classes carefully thought to easily design your website without thinking about styles, conventions, or cross-browser support. It's called a utility framework because it provides precisely that: CSS utilities to add to your HTML elements.

For example, if you want to make a div blue, with vertical padding only and make it red in small devices, you just have to do: <div class="bg-red md:bg-blue py-2">. You can read a full explanation and a list of all utility classes on the official Tailwind CSS website.

How to install Tailwind CSS in Gridsome.js

If you still don't have a Gridsome project, but you are planning ahead and want to install Tailwind, don't worry, first create the project, usually using the CLI gridsome create my-project. Then you can follow these simple steps. If you already have an existing Gridsome project, that's ok too!

Just follow the same instructions:

Run npm install tailwindcss in your Gridsome project folder. This will take care of installing all the Tailwind assets and powerhouse to make it available for your website.
Run npm i -D @fullhuman/postcss-purgecss. This plugin is highly recommended (I would even say mandatory) for Javascript applications like yours. The PostCSS/PurgeCSS plugin will automatically remove all the CSS classes you don't use in your project. This means the final CSS bundle will be very lightweight because it's not importing classes you are not using on your website. For example, suppose you are not using green backgrounds, rounded borders, or underlines anywhere on your website. In that case, this plugin will remove those code lines from Tailwind in your final bundle. Pretty neat, right?
Create a main.css file in your /src directory and add the following:

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

This will officially include tailwind utilities and make them available in your Vue components.

Now import the main.css you just created file into the project. You can do this by adding require('~/main.css') in your main.js file. After doing so, your main.js file should look like this:

// Import global styles
require("~/main.css");

import DefaultLayout from "~/layouts/Default.vue";

export default function(Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component("Layout", DefaultLayout);
}

Run npx tailwind init. This will create a tailwind.config.js file in the root folder of your project. You don't need to worry about that file; by default, it will have everything you need.
Now your gridsome.config.js needs to be updated to add our TailwindCSS and PurgeCSS configuration:

const tailwind = require("tailwindcss");
const purgecss = require("@fullhuman/postcss-purgecss");

const postcssPlugins = [tailwind()];

if (process.env.NODE_ENV === "production")
  postcssPlugins.push(purgecss(require("./purgecss.config.js")));

module.exports = {
  siteName: "Gridsome",
  plugins: [],
  css: {
    loaderOptions: {
      postcss: {
        plugins: postcssPlugins
      }
    }
  }
};

Finally, for the last step, create a purgecss.config.js file in your project's root directory and add the following to it:

module.exports = {
  content: [
    "./src/**/*.vue",
    "./src/**/*.js",
    "./src/**/*.jsx",
    "./src/**/*.html",
    "./src/**/*.pug",
    "./src/**/*.md"
  ],
  whitelist: [
    "body",
    "html",
    "img",
    "a",
    "g-image",
    "g-image--lazy",
    "g-image--loaded"
  ],
  extractors: [
    {
      extractor: content => content.match(/[A-z0-9-:\\/]+/g),
      extensions: ["vue", "js", "jsx", "md", "html", "pug"]
    }
  ]
};

That should be it! You can now go to any page, template, layout, or Vue file and add Tailwind CSS classes to your elements and enjoy this amazing framework's benefits.

To learn more visi, https://gridsome.org/docs/assets-css/#tailwind