Nuxt 3 + TailwindCSS + Google fonts
One way to enhance your Nuxt(3) application is by incorporating TailwindCSS and Google Fonts. Here’s a step-by-step guide:
Install the necessary dependencies in your project:
npm install --save-dev @nuxtjs/tailwindcss
In your nuxt.config.ts file, add the TailwindCSS module and configure it by adding the following:
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss'],
tailwindcss: {
cssPath: '~/assets/css/main.css',
configPath: 'tailwind.config.js',
exposeConfig: false,
config: {},
injectPosition: 0,
viewer: true,
},
});
Create a tailwind.config.js file for TailwindCSS configuration.
Inside the assets/css folder, create a main.css file.
Add the Google Fonts module to your project:
@tailwind base;
@tailwind components;
@tailwind utilities;
In your nuxt.config.ts file, add the following configuration for Google Fonts:
npm install --save-dev @nuxtjs/google-fonts
In your nuxt.config.ts file, add the following configuration for Google Fonts:
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',
},
});
In your tailwind.config.js file, add the following to include Google Fonts in your TailwindCSS
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
fontFamily: {
nunito: "'Nunito', sans-serif;",
poppins: "'Poppins', sans-serif",
},
},
},
plugins: [],
};
In your main.css file, add the necessary code to apply styles and fonts:
@layer base {
body {
@apply font-nunito;
}
h1,
h2,
h3,
h4 {
@apply font-poppins font-bold;
}
}
For more detailed information, you can refer to the documentation provided by