1. Installing Vuepress

# install globally
yarn global add vuepress # OR npm install -g vuepress

2. Use a base

git clone https://github.com/newsbielt703/vuepress-blog-template.git

reference : Intro to VuePress blog theme and plugin

3. Put in tailwindcss

yarn add @silvanite/vuepress-plugin-tailwind

yarn add -D sass-loader node-sass

reference : vuepress-plugin-tailwind is from (vuepress-plugin-tailwind)

Create src/.vuepress/config.js

module.exports = {
  title: "Default Title",
  description: "Default Description",
  plugins: ["@silvanite/tailwind"]
};

Create src/.vuepress/styles/index.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

Create src/.vuepress/themes/layouts

Layout.vue

<template>
  <div class="theme-container">
    <Content />
  </div>
</template>

404.vue

<template>
  <div class="theme-container">
    <div class="theme-default-content">
      <h1>404</h1>
      <blockquote>{{ getMsg() }}</blockquote>
      <router-link to="/">Take me home.</router-link>
    </div>
  </div>
</template>

<script>
const msgs = [
  `There's nothing here.`,
  `How did we get here?`,
  `That's a Four-Oh-Four.`,
  `Looks like we've got some broken links.`
];

export default {
  methods: {
    getMsg() {
      return msgs[Math.floor(Math.random() * msgs.length)];
    }
  }
};
</script>