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.
To install the Nuxt 3 + Tailwind CSS 3 project, follow these steps:
Create a new Nuxt 3 project named “hello-tailwind-3” using the command:
npx nuxi init hello-tailwind-3
Install Tailwind CSS as a development dependency using the command:
npm install -D tailwindcss
Create a tailwind.config.js file with the following content:
npx tailwindcss init
Open the tailwind.config.js file and add the paths to all the template files under “content”.
Create a new file named assets/css/tailwind.css and add the following @tailwind directives for each of Tailwind’s layers.
Open the nuxt.config.js file and add the necessary configuration.
Replace app.vue with a new page pages/index.vue with the desired content.
Start the app with npm run dev and visit http://localhost:3000/ to see the created page and Tailwind 3 in action.
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.