# Install Tailwind CSS in Nuxt.js 3

---

**Hey Guys**, Today We'll look at installing and configuring **Tailwind CSS** in **Nuxt.js 3**. Server-side rendering (SSR) and static site generation work well with Nuxtjs (SSG). For speedier performance and a better developer experience, **Nuxt 3** has been re-architected with a smaller core. A utility-first CSS framework is **Tailwind CSS**. The combination of Nuxt js with tailwind CSS is ideal.

Before getting started, make sure you have the following installed on your machine:

* **Node.js and npm (or yarn)**
    
* **Nuxt.js 3**
    

---

## **Create a New Project**

1. Open a terminal and navigate to the directory where you want to create your project.
    
2. Open your project folder in Visual Studio Code
    
3. Run the following command to create a new Nuxt.js project
    

```javascript
npx nuxi init <project-name>
```

Replace `<project-name>` with the desired name for your project. It looks like this in Visual Studio Code. I am running on the same directory `npx nuxi init .`

![install nuxt.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1672072469013/37c0a762-fae2-4b7a-9783-5cc9cad96a44.png align="center")

Now, Go to your project folder using this command.

`cd <project-name>`

1. Install the dependencies
    
    `` `yarn install` `` or `` `npm install` ``
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672074178541/09bc7e39-b1ca-4315-96cd-1f37b4c5839f.png align="center")

After installing the prerequisites for our application, we will set up Tailwind CSS and all of the other components it needs to function properly.

---

### **Installing Tailwind dependencies**

1. Run the following command in your project directory:
    
    `yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest`
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672074581576/71d465ce-1c6c-47ec-ace2-308bc6ecb39e.png align="center")

### **Generating a Tailwind config**

1. Generate a Tailwind CSS configuration file by running
    
    `npx tailwindcss init -p`
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672074955946/415b9245-8ae6-4d55-b1d4-e8011b516303.png align="center")

### **Configuring Tailwind Config file**

1. You'll need to configure Tailwind and let it know which files to purge. Open tailwind.config.js and add the following:
    
    ```javascript
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./components/**/*.{js,vue,ts}",
        "./layouts/**/*.vue",
        "./pages/**/*.vue",
        "./plugins/**/*.{js,ts}",
        "./nuxt.config.{js,ts}",
        "./app.vue",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    };
    ```
    

### **Adding Tailwind to project styles**

1. You can customize the theme, variants, and plugins by adding properties to the corresponding objects.
    
    Next, create a `tailwind.css` file in the `assets` directory:
    

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

1. Now, we move to the `nuxt.config.ts` file to add some configuration related to **Tailwind CSS**.
    

```typescript
export default defineNuxtConfig({
  css: ['~/assets/tailwind.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});
```

### **Testing out Tailwind CSS**

Open the `app. vue` file and Replace the `<NuxtWelcome>` inside the div with

```xml
<div class="flex h-20 items-center m-auto bg-red-500 justify-center text-3xl text-white font-medium ">
 Hello world
</div>
```

Run your build process with `yarn dev` or `npm run dev`

Now Goto `http://localhost:3000/` in a web browser.

![Output](https://cdn.hashnode.com/res/hashnode/image/upload/v1672077958433/0e157829-4f25-4364-b480-2325a334aa6b.png align="center")

**BOOM!** We did it.

---

***Finally***, We configure **Tailwind CSS** in **Nuxt.js 3.**

**Thank you** for being here **Bye**.👋