DEV Community

Igor Irianto
Igor Irianto

Posted on • Updated on • Originally published at irian.to

Setting up vuepress with tailwindcss

#vuepress #tailwindcss #vue #css

I have been looking for a simple Vue blog engine and decided to use vuepress. I also have been wanting to learn about tailwindcss. Why not use them together so I can learn both Vue framework and tailwindcss? That way I can kill two birds with one stone (or in Chuck Norris's world, kill two stones with one bird).

chuck norris approves

There are several guides (here and here) on vuepress + tailwindcss integration. They are very excellent guides - but it looks like these guides were written prior to tailwind v1.0.0 release and I could not get them to run (major changes were implemented between v0.x to v1.0).

I decided to write this article for users using recent tailwindcss v1.+ and vuepress v1.+ (I am using vuepress v1.0.3 and tailwindcss v1.1.2 at the time of this writing).

The repo for this article can be found here.

Setting up Vuepress

Ensure vuepress is installed in machine. It will help in the future to save it globally.

npm i -g vuepress
Enter fullscreen mode Exit fullscreen mode

Create your directory. I called mine tailwind-press.

mkdir tailwind-press && cd $_
Enter fullscreen mode Exit fullscreen mode

Start npm project. I used -y to skip questions.

npm init -y
Enter fullscreen mode Exit fullscreen mode

Install vuepress dependency.

npm i --save vuepress
Enter fullscreen mode Exit fullscreen mode

Per vuepress site, it is recommended to due customization inside /docs folder with /.vuepress directory and readme.md, so let's do that.

mkdir -p docs/.vuepress
mkdir docs/blogs/
touch docs/readme.md docs
touch docs/blogs/blog1.md docs/blogs/blog2.md
Enter fullscreen mode Exit fullscreen mode

Fill blogs/blog1.md, blogs/blog2.md, and readme.md with some content.

// readme.md
# tailwind-press
Hello!

// blogs/blog1.md
# Doc1
doc1 test

// blogs/blog2.md
# Doc2
doc2 test
Enter fullscreen mode Exit fullscreen mode

Your project should look like this now:

.
├─ docs
│  ├─ readme.md
│  ├─ blogs
│  │  ├─ blog1.md
│  │  └─ blog2.md
│  └─ .vuepress
│     └─ config.js
└─ package.json
Enter fullscreen mode Exit fullscreen mode

Test vuepress by running:

vuepress dev docs
Enter fullscreen mode Exit fullscreen mode

You should have a basic vuepress running at 8080. You can check out blog1 at http://localhost:8080/blogs/blog1.html.

Sweetness! Part one is done. Time to customize it by applying our own theme.

Overwriting default theme

Add config.js inside docs/.vuepress/ and put the following. This will add "blogs" nav with links to blog1 and blog2.

module.exports = {
  title: "Hello Tailwind-Press!",
  description: "Blog v0.0.1",
  themeConfig: {
    nav: [
      {
        text: "blogs",
        items: [
          { text: "blog1", link: "/blogs/blog1.md" },
          { text: "blog2", link: "/blogs/blog2.md" }
        ]
      }
    ]
  }
};
Enter fullscreen mode Exit fullscreen mode

Next is an important part of vuepress custom theme: to overwrite vuepress's default theme, you need to add /theme/Layout.vue in /.vuepress directory. Vuepress will automagically replace default theme to yours. Let's create /theme/Layout.vue inside /.vuepress. Your doc structure should look like the following:

.
├─ docs
│  ├─ readme.md
│  ├─ blogs
│  └─ .vuepress
│     └─ config.js
│     └─ theme
│        └─ Layout.vue
└─ package.json
Enter fullscreen mode Exit fullscreen mode

Put a basic Vue boilerplate inside Layout.vue:

<template>
  <div>
    <h1>{{ $site.title }}</h1> 
    <div>Your blog goes here</div>
  </div>
</template>

<script></script>

<style></style>
Enter fullscreen mode Exit fullscreen mode

Restart the server. Default theme should be overwritten now. Awesomeness!

Adding tailwindcss

Our last step is to add tailwindcss. Many steps on this article is taken from the installation steps provided by tailwind.

Npm install tailwindcss and autoprefixer.

npm i --save tailwindcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Then create config file for tailwind by running:

npx tailwind init
Enter fullscreen mode Exit fullscreen mode

We now have tailwind.config.js at root. Inside that file, you'll see something like this:

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}
Enter fullscreen mode Exit fullscreen mode

Go back to docs/.vuepress/config.js, add postcss config:

module.exports = {
  title: "Hello Tailwind-Press!",
  description: "Blog v0.0.1",
  themeConfig: {
    nav: [
      {
        text: "blogs",
        items: [
          { text: "blog1", link: "/blogs/blog1.md" },
          { text: "blog2", link: "/blogs/blog2.md" }
        ]
      }
    ]
  },
  postcss: {
    plugins: [
      require("autoprefixer"),
      require("tailwindcss")("./tailwind.config.js")
    ]
  }
};
Enter fullscreen mode Exit fullscreen mode

Next time server is run, it will run postcss and it will use both autoprefixer and tailwindcss plugins. Right now we haven't had any tailwindcss defined yet. Let's do that now.

Inside docs/.vuepress/theme, create a new css (styl) directory and file. I called the dir "styles" and the file "style.styl'. You can give them any name you want (mine is at docs/.vuepress/theme/styles/style.styl. Most/ all tutorials I've seen use .styl instead of .css. Per vuepress doc, it looks like you can use .css, but they use stylus, so that's what I am going with. I haven't tried it with .css.)

Insert the following inside style.styl:

@tailwind base;

@tailwind components;

@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Great. Our tailwindcss is ready to go. We just need to import it. Inside Layout.vue, add:

// Layout.vue

...

<style lang="stylus">
  @import './styles/style.styl';
</style>
Enter fullscreen mode Exit fullscreen mode

We haven't mentioned any tailwindcss classes yet. Let's style it up a bit more (btw, the snippet is mostly taken from tailwindcss site).

// Layout.vue

<template>
<nav class="flex items-center justify-between flex-wrap bg-blue-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
    <span class="font-semibold text-xl tracking-tight">{{ $site.title }}</span>
  </div>
</nav>
</template>

<script></script>

<style lang="stylus">
    @import './styles/style.styl';
</style>
Enter fullscreen mode Exit fullscreen mode

You should see tailwindcss styling. That's it! Now you are free to unleash the power of the dark side... I mean creative side.

vader impressed

Questions are always welcome. Happy hacking!

Top comments (2)

Collapse
 
ladislavsulc profile image
Ladislav Šulc •

Thanks!

Collapse
 
cypris75 profile image
cypris •

Thanks for the post. I went down this route as well and documented my learnings here:

amalytix.com/en/vuepress-tailwindc...

Read next

louisfacun profile image

How to Implement Sticky Navigation in Next.js/React.js with react-intersection-observer

Louis Facun -

darkwiiplayer profile image

How I write CSS selectors

𒎏Wii 🏳️‍⚧️ -

ridoy_hasan profile image

Responsive Design with Tailwind CSS

Ridoy Hasan -

hoainhoblogdev profile image

CSS 2024 Breakthrough: Redefining Animations with animation-timeline: view()

Hoài Nhớ ( Nick ) -