Iman Sugirman

Setup Gridsome Menggunakan Tailwindcss Versi 2

23 Februari 2022

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