loading...
Cover image for Getting Started Tailwindcss with Gridsome Without Using Plugin

Getting Started Tailwindcss with Gridsome Without Using Plugin

purwnt profile image Purwanto ・3 min read

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

Alt Text

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

Alt Text

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

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

Source Code

Discussion

pic
Editor guide
Collapse
zooly profile image
Hugo Torzuoli

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");
  }
}
Collapse
kamalhm profile image
Kamal

where should I go to add purgecss on build process?

Collapse
zooly profile image
Collapse
purwnt profile image
Purwanto Author

Thank you Hugo, It looks like the code above is interesting. I'll try to implement that and update on this post.

Collapse
daveit profile image
Dave Porter

Works a treat - been meaning to check out Tailwind, now I have no excuse...
Thanks so much Purwanto !

Collapse
purwnt profile image
Purwanto Author

Thank you Dave. Actually, this post is not over yet. Still need to add purgecss

Collapse
jarod51 profile image
Arnaud Lecat

Hi. What are the pros and cons of not using the plugin ?

Collapse
alexzeitler profile image
Alexander Zeitler

Thanks, works like a charm!

Collapse
ronyevernaes profile image
Ronye Vernaes

Awesome!