Infos

A quick template with all the basics needed to jumpstart a new project ⚡

What's in the box 🎁

Nuxt 3.x (latest)
TailwindCSS 3 (with PostCSS)
A default page & layout
Global style sheet
Some maybe useful components

Process

Creating a new Page

Create a new Vue file in /pages folder. The name of the file is also use for its path. For example, /pages/foo/bar.vue will be resolved as www.website.com/foo/bar.html
💡 More info here : nuxt.com/docs/getting-started/views#pages

Using Components

Calling a component should be done as follows:
/components/utils/FancyButton.vue should be called with <utils-fancy-button></utils-fancy-button>
💡 More info here : nuxt.com/docs/getting-started/views#components

Style

Global Style Sheet

The global style sheet is a postcss file in /assets/css/base.postcss
You can write and use basic CSS but prefer using @apply with Tailwind properties.
💡 All Tailwind properties here : tailwindcss.com/docs

Component Style

In-component style should be written using PostCSS and @apply to re-use Tailwind property as much as possible (also know as Atomic CSS).
Inside your component use the style tag as follows:

<style lang="postcss" scoped>
.button-red {
    @apply h-8 w-8;
    @apply bg-red-200 rounded;
}
</style>

📝 Note: scoped means your style won't leak into other components. Very usefull for Layouts components.
💡 More info here : vue-loader.vuejs.org/guide/scoped-css.html

Custom Tailwind Config

You can override or add new properties for Tailwind inside its config file /tailwind.config.js

To override properties, you can use this as an example: tailwindcss.com/docs/customizing-spacing#overriding-the-default-spacing-scale
To add (or extend) new properties you can use this example: https://tailwindcss.com/docs/customizing-colors#extending-the-defaults Pay attention to the extends: property at the beginning.

Layouts

💨 nuxt.com/docs/getting-started/views#layouts

Static vs Assets

To make things simple. Assets inside the /assets folder will be proccesed by some webpack module, like base.postcss for example. It can be images, JSON files,... Outputted files will have hashed name to facilitate cache management.
On the opposite side, /static files will be served as it is with no hash or handling whatsoever.

Tailwind Autocomplete

💨 https://tailwindcss.nuxtjs.org/tailwind/editor-support/

Building

# install dependencies
$ yarn install

# run dev server (w/ hot reloead)
$ yarn run dev

# build for production
$ yarn run generate

tinawng/nuxt-tailwind-static-template