speakincode / vuepress-tailwind

vuepress tailwind css

Vuepress Tailwind CSS starter

A simple Vuepress starter

Demo: https://vuepress-tailwind.netlify.com/

Features

• Tailwind CSS v1.0
• Theme Switcher with Dark Mode
• @vuepress/plugin-pwa
• Blog
• Accordion component

Installation

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

# clone or download repository

# install dependencies
yarn # OR npm install

# start writing
yarn develop

# build
yarn build

# upgrade dependencies
yarn upgrade --latest

Notes

• Check out these other Gridsome Starters where I got some ideas from:
  • Gridsome Starter Blog - I got a lot of design inspiration from this starter theme.
  • Gridsome Portfolio Starter

Custom

Colors

src/.vuepress/theme/styles/config.styl

CSS Variables	Vuepress Variables	Tailwind	Note
--body-color	$textColor	primary
--accent-color	$accentColor	accent
--accent-hover		accenthover
--border-color	$borderColor	borderColor-primary
--bg-color		background-primary
--bg-content		background-content
--bg-code	$codeBgColor	background-code