vuepress-tailwind-starter
vuepress-tailwind-starter copied to clipboard
A boilerplate setup for VuePress with Tailwind CSS
VuePress Tailwind Starter Theme
This boilerplate repository is designed to serve as a starting point for creating custom websites with VuePress. Because it replaces the original theme entirely, a lot of out-of-the-box functionality you get with the default VuePress installation is not available.
You can preview the live demo for this Github Repo hosted on Netlify.
PurgeCSS is used during the build process to keep the CSS bundle size as small as possible.
Why VuePress
The reason for using VuePress over other platforms like Nuxt or Jigsaw is because VuePress offers a way to keep your content primarily in Markdown whilst providing a super lightweight tooling setup. It provides server side rendering (SSR) for search engine optimisation (SEO) and can easily be used with services like Netlify to automate the build and deployment process. Finally, you get the full power of Vue.js to build out any advanced functionality, even inside Markdown files.
How to use this starter theme
Clone the repository
git clone [email protected]:m2de/vuepress-tailwind-starter.git my-project
Re-initialise the git repository
cd my-project && rm -Rf .git && git init
Building for development
Run the project and access the site via http://localhost:8080
npm run dev
Building for production
npm run build
Roadmap
- [x] Fix dev build to run without Purge Css
- [x] Import Tailwind and Purge CSS through VuePress Plugins
- [ ] Compile into regular installable VuePress theme. Challenge will be the Tailwind config (also waiting for 1.0)
- [ ] Add more out of the box functionality like Nav and Search
Support
Any contributions to this package are welcome. Look me up on Twitter @m2de_io, I'd love to hear from anyone with feedback and see what you have created using VuePress and Tailwind.