Nuxt 3 + TailwindCSS + Google fonts

Один из способов добавить в своём приложении на Nuxt(3) TailwindCSS + Google Fonts

устанавливаем в свой проект

npm install --save-dev @nuxtjs/tailwindcss

в файле nuxt.config.ts добавляем модуль и ниже добавляем запись конфигурации tailwindcss

export default defineNuxtConfig({

modules: ['@nuxtjs/tailwindcss'],

tailwindcss: {
    cssPath: '~/assets/css/main.css',
    configPath: 'tailwind.config.js',
    exposeConfig: false,
    config: {},
    injectPosition: 0,
    viewer: true,
  },


});

дальше создаем файл tailwind.config.js

npx tailwindcss init

создаём папку assets/css в ней файл main.css

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

Далее добавляем модуль nuxtjs/google-fonts

npm install --save-dev @nuxtjs/google-fonts

в файле  nuxt.config.ts добавляем запись

export default defineNuxtConfig({

modules: ['@nuxtjs/tailwindcss','@nuxtjs/google-fonts'],

tailwindcss: {
    cssPath: '~/assets/css/main.css',
    configPath: 'tailwind.config.js',
    exposeConfig: false,
    config: {},
    injectPosition: 0,
    viewer: true,
  },

googleFonts: {
    prefetch: true,
    preconnect: true,
    preload: true,
    families: {
      Nunito: true,
      Poppins: true,
    },
    display: 'swap',
  },
});

и в файле tailwind.config.js добавляем

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {
      fontFamily: {
        nunito: "'Nunito', sans-serif;",
        poppins: "'Poppins', sans-serif",
      },
    },
  },
  plugins: [],
};

и в файле main.css добавляем код

@layer base {
  body {
    @apply font-nunito;
  }
  h1,
  h2,
  h3,
  h4 {
    @apply font-poppins font-bold;
  }
  
}

Для подробней информации можно ознакомиться по этим ссылкам

NuxtTailwindCSS

NuxtGoogleFonts