Starting with Tailwind CSS in a Nuxt 3 Project 🚀

In this blog post, we will explore how to get started with Tailwind CSS in a Nuxt 3 project. Nuxt 3 is the latest version of the popular Vue.js framework that makes it easy to build server-rendered applications, static websites, and APIs. Integrating Tailwind CSS with Nuxt 3 will empower you to create stunning, responsive designs effortlessly.

Step 1: Create a Nuxt 3 Project 📦

First, let's create a new Nuxt 3 project. You can use the npx command to set up a new project:

npx nuxi init my-nuxt3-tailwind-project

When prompted, select the desired options.

Step 2: Install Dependencies 🔧

After the project is created, navigate to the project folder:

cd my-nuxt3-tailwind-project

Then, install the necessary dependencies:

npm install

Step 3: Install and Configure Tailwind CSS 🎨

Now, let's install Tailwind CSS:

npm install --save-dev @nuxtjs/tailwindcss

Then we can add the tailwind pluging to our nuxt.config.js

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
})

Next we need to make two directories. In the root create a folder named assets and another one inside of it called css and finally we'll create a tailwind.css file. So your path should look like: assets/css/tailwind.css and add the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .btn {
        @apply bg-[#12b488] text-white px-3 py-2 rounded-md text-sm text-white;
    }

    .card {
        @apply p-3 rounded-md bg-white shadow-md h-full;
    }
}

I've added a few components for a card and button. Just add the btn or card class to apply this group of styles.

Step 4: Using Tailwind CSS in Your Nuxt 3 Project 💅

Now that Tailwind CSS is set up, you can start using it in your Nuxt 3 project. Open the index.vue file in the src/pages folder, and add the following code to create a simple card component:

<template>
  <div class="container mx-auto">
    <div class="max-w-sm mx-auto my-10 p-6 bg-white rounded-xl shadow-md flex items-center space-x-4">
      <img class="h-12 w-12 rounded-full" src="/your-image-url.jpg" alt="Avatar" />
      <div class="card">
        <div class="text-xl font-semibold">Your Name</div>
        <p class="text-gray-500">Full Stack Developer</p>
        <button class="btn">Click me</button>
      </div>
    </div>
  </div>
</template>

In this example, we used various Tailwind CSS utility classes to style the card component, such as max-w-sm, mx-auto, my-10, p-6, bg-white, rounded-xl, shadow-md, and others.

Step 5: Run Your Nuxt 3 Project 🎉

To see your Nuxt 3 project with Tailwind CSS in action, run the following command:

npm run dev

After the development server starts, open your browser and navigate to http://localhost:3000. You should now see the card component styled with Tailwind CSS.

That's it! You've successfully integrated Tailwind CSS with a Nuxt 3 project. With this setup, you can leverage Tailwind CSS's utility classes and customization options to create beautiful, responsive designs for your Nuxt 3 applications. Happy coding! 🚀