Nuxt

Install and configure Nuxt.

Create project

Start by creating a new Nuxt project using create-nuxt-app:


pnpm create nuxt@latest

If you encounter the error ERROR: Cannot read properties of undefined (reading 'sys') (x4), please proceed to install TypeScript as a dependency, as advised in this issue


pnpm add -D typescript

Add Tailwind CSS

How to setup tailwindcss


pnpm add tailwindcss @tailwindcss/vite -D

Replace everything in app/assets/css/tailwind.css with the following:

app/assets/css/tailwind.css

@import "tailwindcss";

Update nuxt.config.ts with the following:

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  // ...
  css: ['~/assets/css/tailwind.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
})

Vite Astro

On This Page

Create project Add Tailwind CSS