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

VIEW DEMO

$ npm i -g yarn

$ yarn

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

$ yarn dev

$ yarn build

$ yarn generate

$ yarn start

• 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

• 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 bymattlee.com