Setup Gridsome Menggunakan Tailwindcss Versi 2

Gridsome adalah Static Site Generator yang dibangun dengan bahasa pemrograman vue dengan Gridsome anda juga bisa membuat Blog dengan menggunakan markdown dan sangat intuitive dan sangat flexible. Untuk menginstallnya anda bisa menggunakan command line :

# jika anda menggunakan npm bisa menggunakan npm
npm install --global @gridsome/cli
# Atau bisa menggunakan yarn
yarn global add @gridsome/cli

Lalu anda bisa menggunakan command untuk membuat Static Page atau Blog dengan cara :

# Static Site
gridsome create my-gridsome-site
# Blog
gridsome create my-gridsome-site https://github.com/gridsome/gridsome-starter-blog.git

Menambahkan Tailwind ke Gridsome

Untuk menambahkan tailwind versi 2 anda bisa menggunakan 2 opsi dengan cara menambahkan plugins dari gridsome atau dengan cara manual. Saya lebih memilih opsi manual karena menurut saya lebih ringan. Baiklah sekarang kita mulai tambahkan.

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

buatlah folder css di dalam folder /src dan tambahkan file main.css dan menjadi /src/css/main.css dan edit file main.css menjadi seperti ini :

@tailwind base;

@tailwind components;

@tailwind utilities;

Dan sekarang kita akan mengimport main.css di main.js dengan cara menambahkan :

import '~assets/css/main.css';

Dan sekarang kita akan mempublish tailwind.config.js dengan cara memasukan perintah :

npx tailwind init

Edit lah file tailwind.config.js dengan seperti ini :

module.exports = {
  purge: {
    content: [
      './src/**/*.vue',
      './src/**/*.js',
      './src/**/*.jsx',
      './src/**/*.html',
      './src/**/*.pug',
      './src/**/*.md',
    ],
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Sekarang kita harus mengatur lagi file gridsome.config.js dengan menambahkan beberapa import dari tailwind dan autoprefixer seperti ini :

// Tambahkan 2 package ini diatasnya
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'BlogPost',
        path: './content/blog/**/*.md',
      },
    },
  ],
  templates: {
    BlogPost: '/blog/:slug',
  },
  // Dan tambahkan css loaderoption setelah templates
  css: {
    loaderOptions: {
      postcss: {
        plugins: [tailwindcss, autoprefixer],
      },
    },
  },
};

Dan selesai anda bisa membuat style menggunakan tailwind di template vue anda.

happy coding....