How to install Tailwind CSS in Gridsome

Tailwind is a CSS framework that gives you lots of classes carefully thought to design your website easily without thinking about styles, conventions or cross-browser support. It's called a utility framework because it provides precisely that: CSS utilities for you 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 in Tailwind CSS website.

How to install Tailwind CSS in Gridsome

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 normally using the cli gridsome create my-project and then you can follow these simple steps. If you already have an existing Gridsome project, that's ok too! Just follow the same instructions:

1. 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.

2. 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 remove all the CSS classes you don't use in your project automatically. This means the final CSS bundle will be very lightweight because it's not importing classes you are not using in your website. For example if you are not using green backgrounds, rounded borders or underlines anywhere in your website then this plugin will remove those lines of code from Tailwind in your final bundle. Pretty neat right?

3. 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.

4. 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);
}

5. 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's going to have everything you need.

6. 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
      }
    }
  }
};

7. Finally, for the last step, create a purgecss.config.js file in the root of your project 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 be able to add Tailwind CSS classes to your elements and enjoy the benefits of this amazing framework.

Installing Tailwind UI in Gridsome

Tailwind UI is an amazing product by the authors of Tailwind CSS that provide you with HTML snippets that already have all the CSS classes included to build a website fast. Actually gauztech.com is built with Tailwind UI.

The steps to install Tailwind UI in Gridsome are exactly the same steps described above. At the end you just need to run two or three commands provided to you when you purchase Tailwind UI. If you want to learn more or have any questions just send me an email at [email protected] or using the contact form.

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