Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

ByMattLee Nuxt Starter Screenshot

ByMattLee Nuxt Starter

A starter boilerplate powered by Vue, Nuxt, Sanity and Tailwind CSS.



1. Install Node 16.17.1 LTS:
2. Install Yarn
$ npm i -g yarn
3. Install all dependencies
$ yarn


In nuxt.config.js, update Sanity options and environment URLs for project compilation.


Serve With Hot Reload
$ yarn dev
Build For Production
$ yarn build
Build Static Files
$ yarn generate
Launch Server
$ yarn start

General Features

  • Utilizes Nuxt's 'static' mode to generate HTML files for every page
  • Data is coming from the Sanity Cloud API. This pairs perfectly with the ByMattLee Sanity Studio Starter
  • Features Tailwind CSS with PurgeCSS for production builds
  • Includes RSS feed, robots.txt, sitemap.xml generation

Tailwind CSS Notes

  • All Tailwind settings can be found in ./tailwind.config.js
  • Most styles should be written as utility classes in the template markup but custom SCSS can be used for unique properties and/or magic numbers
  • Utilize the @apply directive when writing custom SCSS for efficiency:
svg {
  @apply inline-block fill-current;
  • Tailwind settings can be accessed with the theme() function:
.button {
  animation-duration: theme('transitionDuration.normal');
  • Media queries can be used with the shorthand screen() function:
.button {
  margin-right: 2.8rem;
  @screen sm {
    margin-right: 4.2rem;


  • Matt Lee - @bymattlee on most platforms
  • Visit my website at

Twitter Follow