Установите Tailwind CSS с помощью Nuxt

Настройка Tailwind CSS в проекте Nuxt.

Создайте свой проект

Начните с создания нового проекта Nuxt, если у вас его еще нет. Наиболее распространенный подход — использоватьNuxt Command Line Interface.

Terminal

npx nuxi init my-projectcd my-project

Установите Tailwind CSS

Установите @tailwindcss/vite и его зависимости через npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Настройте плагин Vite

Добавьте плагин @tailwindcss/vite в конфигурацию Nuxt как плагин Vite.

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";export default defineNuxtConfig({  compatibilityDate: "2024-11-01",  devtools: { enabled: true },  vite: {    plugins: [      tailwindcss(),    ],  },});

Импортируйте Tailwind CSS

Создайте файл ./assets/css/main.css и добавьте @import, который импортирует Tailwind CSS.

main.css

@import "tailwindcss";

Добавьте CSS-файл глобально

Добавьте недавно созданный ./assets/css/main.css в массив css в вашем файле nuxt.config.ts.

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";export default defineNuxtConfig({  compatibilityDate: "2024-11-01",  devtools: { enabled: true },  css: ['~/assets/css/main.css'],  vite: {    plugins: [      tailwindcss(),    ],  },});

Начните процесс сборки

Запустите процесс сборки с помощью npm run dev.

Terminal

npm run dev

Начните использовать Tailwind в своем проекте

Начните использовать классы утилиты Tailwind для стилизации своего контента.

app.vue

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