Getting Started Tailwindcss with Gridsome Without Using Plugin

#javascript #vue #gridsome #tailwindcss

Tailwindcss is a new css framework to develop a web applications with powerful mindset. While other framework (Bootstrap, Bulma, etc) focus on using boilerplate to make some UI, Tailwind is more focus on utility-first CSS framework for rapidly building custom designs.

It's mean that we don't need to fight with ui boilerplate from other CSS framework to make custom design, we just using some reusable class design our web component like mt-4 for margin-top, shadow-xl for box-shadow, bg-red-500 for red background. Even define responsive breakpoint for some screen size for each class, that's very powerful.

In the other side Gridsome is a static site generator based on Vue.js. Since the advent of JAMstack, a static site generator is a rising star on how we develop and deliver a website, especially for Landing Page or Documentation site.

In this post, we will try to using Tailwindcss using Gridsome. Instead of using the plugin, we will set-up Tailwind manually in order to reduce file-size other dependencies. But if you want to use plugin you can skip this post and go here (gridsome-plugin-tailwindcss).

1. Instal Gridsome cli

using Yarn: yarn global add @gridsome/cli
using NPM: npm 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
        ],
      },
    },
  }
}

Done, tailwindcss is already set-up on gridsome project. Lets try to add some example code.

Add code below to your index file src/pages/Index.vue

<div class="bg-indigo-900 text-center py-4 lg:px-4 mt-10">
  <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
    <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
    <span class="font-semibold mr-2 text-left flex-auto">Get the coolest t-shirts from our brand new store</span>
    <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
  </div>
</div>

<div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 mt-10" role="alert">
  <p class="font-bold">Informational message</p>
  <p class="text-sm">Some additional text to explain said message.</p>
</div>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-10">
  Button
</button>

<button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow ml-3">
  Button
</button>

Start the development server with command gridsome develop

Go to http://localhost:8080 on your browser and see the result

For production you need to run build gridsome build and serve file in dist folder to your web server, Amazon S3 or Google Cloud Storage.

This is my first post on dev.to If there is some mistake please let me know. Thank you.

Source Code

Top comments (9)

Hugo Torzuoli • Sep 18 '19

Interesting and easy way to add Tailwind.css to Gridsome project. I've achieved this some weeks ago doing this :

module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule("postcss-loader")
      .test(/.css$/)
      .use(["tailwindcss", "autoprefixer"])
      .loader("postcss-loader");
  }
}