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 |
