[Nuxt] Set up a new Nuxt project with Tailwind CSS

Note

You may have previously used the @nuxtjs/tailwindcss module for Tailwind v3 support in Nuxt. As of Feb 2025 this module is being updated to support Tailwind v4. See https://github.com/nuxt-modules/tailwindcss/issues/919 for progress.

1. Use the Nuxt init CLI command and follow the wizard to generate a barebones project.

   npm

   npx nuxi@latest init <project-name>

   yarn

   yarn dlx nuxi@latest init <project-name>

   pnpm

   pnpm dlx nuxi@latest init <project-name>

   Tip

   For Nuxt prerequisites and more: https://nuxt.com/docs/getting-started/installation

2. Navigate into the project directory.

   cd <project-name>

3. Follow the official Tailwind framework guide for Nuxt: https://tailwindcss.com/docs/installation/framework-guides/nuxt

4. Start the development server.

   npm

   npm run dev

   yarn

   yarn run dev

   pnpm

   pnpm run dev