[Vuejs]-Nuxt 3 with TailwindCSS -> heroicons

by

1👍

✅

Tailwindcss and Nuxt

first you should ,install tailwind package:

npm install -D tailwindcss postcss autoprefixer

then generate tailwind cona fig file:

npx tailwindcss init

Add Tailwind to your PostCSS configuration

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

then inside your tailwind.config.js Configure your template paths:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./pages/index.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

! if you set srcDir correct the paths

then add the Tailwind directives to your CSS:

  1. add main.css file to your assets with this content:

  2. Add main.css the CSS file globally

main.css file:

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

nuxt.config.js

css: ['~/assets/css/main.css'],

finally you can use tailwind.

final nuxt.config.js file :

export default defineNuxtConfig({
css: ["@/assets/styles/main.scss"],
  postcss: {
    plugins: {
      "postcss-import": {},
      "tailwindcss/nesting": {},
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

Heroicons and Nuxt

First, you should install Heroicons package:

npm install @heroicons/vue

then you can use it like this:

<template>
<BeakerIcon class="h-6 w-6 text-blue-500" />
</template>
<script lang="ts" setup>
import { BeakerIcon } from "@heroicons/vue/24/solid";
</script>

The 24×24 outline icons can be imported from @heroicons/vue/24/outline, the 24×24 solid icons can be imported from @heroicons/vue/24/solid, and the 20×20 solid icons can be imported from @heroicons/vue/20/solid.

learn more here: https://github.com/tailwindlabs/heroicons#vue

but try nuxt-icon library 🙂

👤sadeq shahmoradi

0👍

Here is how you should set up a nuxt.config.js file together with tailwindcss and nuxt-icon library:

export default defineNuxtConfig({
    modules: ['nuxt-icon'],
    css: ['~/assets/css/main.css'], // css file with @tailwind base etc.
    postcss: {
        plugins: {
            tailwindcss: {},
            autoprefixer: {}
        }
    }
})

Like I wrote in comment, nuxt-icon contains all Heroicons together with 100k + more.

Here is the way you can use this icon library: https://stackoverflow.com/a/73810640/6310260

👤Mises

Leave a comment