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

New Get the coolest t-shirts from our brand new store

Informational message

Some additional text to explain said message.

``` 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)**

purwnt

Getting Started Tailwindcss with Gridsome Without Using Plugin

Join Our Newsletter. No Spam, Only the good stuff.