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 fileglobal.css
/* /src/assets/css/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
- Then import
global.css
in yourmain.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.
Top comments (9)
Interesting and easy way to add Tailwind.css to Gridsome project. I've achieved this some weeks ago doing this :
where should I go to add purgecss on build process?
You can see this issue: github.com/gridsome/gridsome/issues/9
Thank you Hugo, It looks like the code above is interesting. I'll try to implement that and update on this post.
Works a treat - been meaning to check out Tailwind, now I have no excuse...
Thanks so much Purwanto !
Thank you Dave. Actually, this post is not over yet. Still need to add purgecss
Hi. What are the pros and cons of not using the plugin ?
Thanks, works like a charm!
Awesome!