Nuxt3 Tailwindcss3 Starter Kit

Nuxt 3 With Tailwindcss 3

🔥 If We need anything, I will add it.

The template that starts tailwindcss fastest on nuxt3 without annoying settings

Features

• 💚 Nuxt 3 - SSR, ESR, File-based routing, components auto importing, modules, etc.
• ⚡️ Vite - Instant HMR
• 🎨 Tailwindcss - A utility-first CSS framework for rapidly building custom user interfaces.
• ⚒️ HeadlessUI - A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
• 🔥 The <script setup> syntax
• 🍍 State Management via Pinia
• 📥 APIs auto importing - For Composition API, VueUse and custom composables.
• 🏎 Zero-config cloud functions and deploy
• 🦾 TypeScript, of course

Nuxt Modules

• VueUse - collection of useful composition APIs
• ColorMode - dark and Light mode with auto detection made easy with Nuxt.
• Pinia - intuitive, type safe, light and flexible Store for Vue.
• NuxtIcon - Icon module for Nuxt with 100,000+ ready to use icons from Iconify.
• NuxtHeadlessUI - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
• NuxtVitest - A vitest environment for testing code that needs a Nuxt runtime environment
• NuxtDevtools - Nuxt DevTools is a set of visual tools that help you to know your app better.

IDE

• Visual Studio Code
• Volar
• Tailwindcss-Intellisense
• Iconify IntelliSense
• VSCode Goto Alias

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit initred/nuxt3-tailwindcss3-starter-kit my-nuxt3-app
cd my-nuxt3-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm