Overview:

This article introduces a minimal starter template for Nuxt 3 projects with Tailwind CSS 3. It provides a basic template page as well as an example component from Tailwind UI. The article also explains the steps to create a new Nuxt 3 + Tailwind CSS 3 project.

Features:

• Minimal starter template for Nuxt 3 projects with Tailwind CSS 3.
• Includes a simple template page and a Tailwind UI example component.
• Requires the installation of heroicons for the Tailwind UI component to work.

Installation:

To install the Nuxt 3 + Tailwind CSS 3 project, follow these steps:

1. Create a new Nuxt 3 project named “hello-tailwind-3” using the command:

   npx nuxi init hello-tailwind-3
   

2. Install Tailwind CSS as a development dependency using the command:

   npm install -D tailwindcss
   

3. Create a tailwind.config.js file with the following content:

   npx tailwindcss init
   

4. Open the tailwind.config.js file and add the paths to all the template files under “content”.

5. Create a new file named assets/css/tailwind.css and add the following @tailwind directives for each of Tailwind’s layers.

6. Open the nuxt.config.js file and add the necessary configuration.

7. Replace app.vue with a new page pages/index.vue with the desired content.

8. Start the app with npm run dev and visit http://localhost:3000/ to see the created page and Tailwind 3 in action.

Summary:

This article provides a minimal starter template for Nuxt 3 projects with Tailwind CSS 3. It includes a simple template page and a Tailwind UI example component. The installation guide explains the steps to create a new Nuxt 3 + Tailwind CSS 3 project. By following the steps, users can set up their project and start using Tailwind CSS 3 in their Nuxt 3 applications.