Getting Started Tailwindcss with Gridsome Without Using Plugin
Tags: javascript, vue, gridsome, tailwindcss
Published: 2019-09-18 20:46:12

---
title: Getting Started Tailwindcss with Gridsome Without Using Plugin
published: true
description: Tutorial how to set-up tailwindcss on gridsome without using plugin
tags: javascript, vue, gridsome, tailwind
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7ah9nyvz52hx7rsr5exd.png
---



[Tailwindcss](https://tailwindcss.com/) 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](https://gridsome.org) 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](https://gridsome.org/plugins/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](https://tailwindcss.com/docs/configuration)
- `npx tailwind init`
- or add new file `tailwind.config.js` to root folder

```javascript
// 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`

```css
/* /src/assets/css/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- Then import `global.css` in your `main.js` file.

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

### **6. Add tailwindcss to gridsome configuration file**
```javascript
// 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`
```html
<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` 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/egyerkgk9s18kqo39zs5.PNG)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/n044ur0slkonnpmgm9du.PNG)


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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2j7yecgype5v71vkpzx9.PNG)

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

**[Source Code](https://github.com/purwnt/vue-gridsome-tailwindcss-example)**