---
title: "Cheat Sheet Nuxt x Tailwindcss x NuxtUI"
description: "Cheat sheet คำสั่งเริ่มโปรเจกต์ Nuxt พร้อม Tailwind CSS และ Nuxt UI ตั้งแต่ init จนตั้งค่าเสร็จ"
canonical_url: "https://iamthana.com/blogs/2025-05-23-nuxt-tailwindcss-nuxtui-setup"
---

> Index of every page on this site: [llms.txt](https://iamthana.com/llms.txt)

## Init NuxtJS

Docs: [https://nuxt.com/docs/getting-started/installation](https://nuxt.com/docs/getting-started/installation)

```sh
npm create nuxt <project-name>
```

```sh
✔ Which package manager would you like to use?
npm

✔ Initialize git repository?
Yes
ℹ Initializing git repository...

❯ Would you like to install any of the official modules?
◼ @nuxt/content – The file-based CMS with support for Markdown, YAML, JSON
◼ @nuxt/eslint – Project-aware, easy-to-use, extensible and future-proof ESLint integration
◼ @nuxt/fonts – Add custom web fonts with performance in mind
◼ @nuxt/icon – Icon module for Nuxt with 200,000+ ready to use icons from Iconify
◼ @nuxt/image – Add images with progressive processing, lazy-loading, resizing and providers support
◼ @nuxt/scripts – Add 3rd-party scripts without sacrificing performance
◻ @nuxt/test-utils – Test utilities for Nuxt
◼ @nuxt/ui – The Intuitive UI Library powered by Reka UI and Tailwind CSS
```

## Preventing Yarn (Allow only NPM)

```sh
"engines": {
    "yarn": "Please use NPM!",
    "node": "22.x",
    "npm": ">=6"
},

# shell
echo "22" > .nvmrc
echo "engine-strict=true" > .npmrc
```

## Install Tailwindcss Version 4

Docs: [https://tailwindcss.com/docs/installation/framework-guides/nuxt](https://tailwindcss.com/docs/installation/framework-guides/nuxt)

```sh
npm install tailwindcss @tailwindcss/vite
```

Edit

```vue
import tailwindcss from "@tailwindcss/vite"; export default defineNuxtConfig({
... vite: { plugins: [ tailwindcss(), ], }, });
```

Create a tailwindcss config file `mkdir -p assets/css` `touch assets/css/main.css`

```css
@import 'tailwindcss';
@import '@nuxt/ui';
```

edit nuxt config file

```typescript
export default defineNuxtConfig({
    ...
    css: ['~/assets/css/main.css'],
});
```

## Nuxt Layout

Docs: [https://nuxt.com/docs/guide/directory-structure/layouts](https://nuxt.com/docs/guide/directory-structure/layouts)

```vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

Create a new file `layouts/default.vue`

```vue
<template>
  <div>
    <p>Some default layout content shared across all pages</p>
    <slot />
  </div>
</template>
```

Create a `pages` folder

```vue
<template>
  <div>Login Page</div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'no-auth',
})
</script>
```

## Sitemap

See the full [sitemap](https://iamthana.com/sitemap.md) for all pages.