Working with VuePress v0.10 and Tailwind CSS v0.6

4 min readJun 23, 2018

It only takes one README.md file to create and deploy a VuePress site. The simplicity is the beauty of the project. It’s also possible to vuepress eject and get a fully blown Vue site that compiles in components and works offline.

Sometimes you don’t need to reinvent the base template from scratch, but you want the power of a utility framework like Tailwind CSS.

Generate an initial VuePress site (assuming Mac OS)

# Install globally
npm install -g vuepress # OR yarn global add vuepress# Create the project folder
mkdir vuewind && cd vuewind# Create a markdown file
echo '# Hello VuePress' > README.md

# Start writing
vuepress dev# Open in a browser
open http://localhost:8080

Result

The CSS is 2.6 mb size in development mode, 20.9 kb in production.

Customizing the site

The site doesn’t do much yet, but let’s change a bit of the config:

# ./vuepress/config.jsmodule.exports = {
  title: "VueWind",
  themeConfig: {
    nav: [
      {
        text: "VuePress",
        link: "https://vuepress.vuejs.org/"
      },
      {
        text: "Tailwind CSS",
        link: "https://tailwindcss.com/"
      }
    ],
    sidebar: [["/", "Home"]]
  }
};

Now let’s add an initial package.json and tailwind

# Answer all the questions
npm init# Require Tailwind as a dev dependency
npm install tailwindcss --save-dev# Write the initial config file
./node_modules/.bin/tailwind init tailwind.config.js

.vuepress/override.styl

Before customizing the tailwind.config.js file let’s get the base classes building into the site.

# .vuepress/override.styl@tailwind preflight;
@tailwind components;
@tailwind utilities;

.vuepress/config.js

To build in Tailwind it needs to be added as a postcss plugin in the config of the site.

module.exports = {
  title: "VueWind",
  themeConfig: {
    ...
  },
  postcss: {
    plugins: [
      require("tailwindcss")("./tailwind.config.js"),
      require("autoprefixer")
    ]
  }
};

Display some colors on the homepage

To verify Tailwind is installed correctly.

# README.md<div class="rounded overflow-hidden md:w-3/5">
    <div class="text-black bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
        <div class="uppercase mb-6">Grey</div>
        <div class="flex justify-between">
            <span>Base</span>
            <span class="font-normal opacity-75">#B8C2CC</span>
        </div>
    </div>
    <div class="text-black bg-white px-6 py-3 text-sm font-semibold flex justify-between">
        <span>White</span>
        <span class="font-normal opacity-75">#FFFFFF</span>
    </div>
    ...
</div>

Let’s build

# Build and start a dev server
vuepress dev# Open the dev site
open http://localhost:8080

Result

Same looking site, but check out the app.js filesize now, a whopping 12.6 mb on dev!

Building for production

To see what the compiled css size is, let’s build for production.

# Build for production
vuepress build# Install browser-sync globally to view a local server
npm install -g browser-sync# Start a server from the '.vuepress/dist' directory
browser-sync start --server '.vuepress/dist' --files='**/*'

In the production build of the site we’re now down to 127 kb of CSS, which is acceptable, but let’s try to push it further.

Reducing the `tailwind.config.js` to only what’s needed

The first place to optimize is in the tailwind.config.js file, remove everything that you do not plan on using. The Tailwind site has a pretty extensive Controlling File Size section.

VuePress with Tailwind CSS after limiting the filesize

After reducing the colors and screen sizes in this specific project, the result is a 106 kb css file, only 86 kb larger than the initial VuePress site but with all the power of Tailwind.