Работа с Tailwind в Nuxt

В Nuxt для быстрой вёрстки можно использовать CSS фреймворк Tailwind. Он даёт готовые утилитарные классы: вместо отдельного правила в CSS достаточно перечислить классы в атрибуте class элемента.

Для Nuxt 4 и Tailwind 4 подключаем официальный плагин Vite, без второго модуля-обёртки. Установим пакеты:

npm install tailwindcss @tailwindcss/vite

В nuxt.config.ts добавим плагин и оставим подключение main.css в массиве css:

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
	vite: {
		plugins: [tailwindcss()]
	},
	css: ['~/assets/css/main.css']
})

В начале main.css импортируем сам Tailwind одной строкой:

@import "tailwindcss";

body {
	font-family: sans-serif;
	margin: 0;
}

Если шаги установки на вашей машине ведут себя иначе, сверьтесь с официальным руководством для Nuxt.

Давайте добавим полужирное начертание и жёлтый цвет тексту абзаца с помощью классов Tailwind. Числа в именах цветов, например 500, задают оттенок от светлого 50 до тёмного 900:

<template>
	<p class="font-bold text-yellow-500">
		Welcome to the shop.
	</p>
</template>

Сделайте заголовок товара на странице каталога жирным и синим.