Starting with Tailwind CSS in a Nuxt 3 Project 🚀
Tags: css, design, beginners, tutorial
Published: 2023-03-23 23:57:47

In this blog post, we will explore how to get started with [Tailwind CSS](https://tailwindcss.com/docs/installation) in a Nuxt 3 project. [Nuxt 3](https://nuxt.com/docs) 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:

```sh
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:

```sh
cd my-nuxt3-tailwind-project
```

Then, install the necessary dependencies:

```sh
npm install
```

## Step 3: Install and Configure Tailwind CSS 🎨

Now, let's install Tailwind CSS:

```sh
npm install --save-dev @nuxtjs/tailwindcss
```

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

```javascript
// 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:

```css
@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:

```html
<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:

```sh
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! 🚀