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

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:

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

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

to re-use Tailwind property as much as possible (also know as Atomic CSS).
Inside your component use the

style

tag as follows:

📝 Note:

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

• 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

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