Get started with Nuxt3 and Tailwindcss

Let's start how to create the project with Nuxt3 using tailwindcss within a few easy steps

How to add tailwindcss to the Nuxt3 project

1 . Creating the Nuxt3 project.

To create a project first we need to open the terminal or command line interface, the folder where we need to create the Nuxt project.

➜ npx nuxi init my-project
➜ cd my-project

2. Now add Tailwindcss to the project.

After creating the project make sure you are in the "my-project" folder.

Install tailwindcss dependencies via npm command as follows

➜ npm install -D tailwindcss postcss autoprefixer
➜ npx tailwindcss init

the init command generates the new `tailwind.config.js` file.

3. To nuxt.config.js add tailwind Postcss configuration.

Open the nuxt.config.js file and add make following changes

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  𝗽𝗼𝘀𝘁𝗰𝘀𝘀: {
    𝗽𝗹𝘂𝗴𝗶𝗻𝘀: {
      𝘁𝗮𝗶𝗹𝘄𝗶𝗻𝗱𝗰𝘀𝘀: {},
      𝗮𝘂𝘁𝗼𝗽𝗿𝗲𝗳𝗶𝘅𝗲𝗿: {},
    },
  },
})

4 . Add paths to all template files in tailwind.config.js .

Open the tailwind.config.js file edit the {content: [],} and add the path to all template files

/** @type {import('tailwindcss').Config} */
module.exports = {
 𝙘𝙤𝙣𝙩𝙚𝙣𝙩: [
    "./𝙘𝙤𝙢𝙥𝙤𝙣𝙚𝙣𝙩𝙨/**/*.{𝙟𝙨,𝙫𝙪𝙚,𝙩𝙨}",
    "./𝙡𝙖𝙮𝙤𝙪𝙩𝙨/**/*.𝙫𝙪𝙚",
    "./𝙥𝙖𝙜𝙚𝙨/**/*.𝙫𝙪𝙚",
    "./𝙥𝙡𝙪𝙜𝙞𝙣𝙨/**/*.{𝙟𝙨,𝙩𝙨}",
    "./𝙣𝙪𝙭𝙩.𝙘𝙤𝙣𝙛𝙞𝙜.{𝙟𝙨,𝙩𝙨}",
    "./𝙖𝙥𝙥.𝙫𝙪𝙚",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. Adding the Tailwind directives.

First, create a new Folder called 'assets' and in that Folder another 'css' and a new file called 'main.css'

Create an ./assets/css/main.css file and add the @tailwind directives for each of Tailwind’s layers.

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

6. Make a CSS file act globally.

Open nuxt.config.js file and add css.

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

7. Start built process

Run your build process with npm run dev in Terminal.

➜ npm run dev

8. Start using Tailwind in your project

open app.vue file and start using tailwindcss classes

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>