Setting up Tailwindcss in Gridsome Framework

What is Tailwindcss and why should we use this?

Tailwindcss is a CSS framework that gives you all of the building blocks you need to build. Why not use Bootstrap or Bulma or any other CSS framework you are using?

Well in Tailwindcss you barely have to write any custom CSS and you don’t need to fight with ui boilerplate from other CSS frameworks to make a custom design. You can use Tailwind’s predefined classes, and only use exactly what you need, rather than being forced to use additional styling that comes with bulky frameworks like Bootstrap and Bulma.

Anyway, in the end, we need to learn everything and it all depends on us which framework are we comfortable with. But for this tutorial, we will talk about setting up Tailwindcss in your Gridsome project.

Installation

1. Instal Gridsome cli

  • using Yarnyarn global add @gridsome/cli
  • using NPMnpm install --global @gridsome/cli

2. Create new Gridsome project

After gridsome-cli installed on your machine, create project to generate boilerplate and start developing your website.

  • gridsome create my-gridsome-site
  • cd my-gridsome-site

3. Install Tailwindcss

  • npm i tailwindcss

4. Add Tailwind config file

To learn more about configuration file on Tailwind, go to docs here

  • npx tailwind init
  • or add new file tailwind.config.js to root folder
// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: []
}

5. Import Tailwind to Gridsome

  • Create new folder on assets/css and add new file global.css
/* /src/assets/css/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Then import global.css in your main.js file.

// main.js
import "./assets/css/global.css";

6. Add tailwindcss to gridsome configuration file

// gridsome.config.js

const tailwindcss = require("tailwindcss")

module.exports = {
  siteName: 'Gridsome',
  plugins: [],
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          tailwindcss
        ],
      },
    },
  }
}

You’re now ready to use Tailwindcss.

For more information about Tailwindcss, you can always check their documentation which is very easy to follow.

Check out this simple To-do App project which is using Gridsome and Tailwindcss framework. Tutorial on how to build this app will be posted soon. https://maizek-todo-app.netlify.com/

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox