Vue3 Tailwind CSS

Использование Tailwind CSS в проекте Vue — очень популярный выбор, поскольку этот фреймворк обеспечивает подход utility-first к написанию CSS, позволяя применять стили непосредственно в именах классов. Такой подход делает написание стилей более кратким и интуитивным.

Учебник по Tailwind CSS:https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Официальный сайт Tailwind CSS:https://tailwindcss.com/

Адрес GitHub:https://github.com/tailwindlabs/tailwindcss

Tailwind CSS — это мощный CSS-фреймворк, который делает написание стилей более кратким и модульным благодаря подходу utility-first. В отличие от традиционных CSS-фреймворков на основе классов, Tailwind предоставляет набор низкоуровневых утилитарных классов, которые можно использовать непосредственно в HTML-элементах для быстрого и гибкого создания собственных дизайнов.

Ниже приведён полный вводный пример использования Vue 3 и Tailwind CSS, показывающий, как интегрировать Tailwind CSS с Vue 3 и использовать его возможности для создания адаптивных интерфейсов.

Установка Vue 3 и Tailwind CSS

Сначала убедитесь, что у вас установлены Vue 3 и Tailwind CSS.

Установка Vue 3: В терминале выполнитеnpm create vue@latestкоманду для создания нового проекта Vue 3:

npm create vue@latest

В окне вывода введите имя проекта, затем нажимайте Enter до конца:

При выполнении указанной выше команды требуется задать некоторые параметры инициализации; используйте стрелки для выбора.

Перейдите в созданный каталог vue-tailwind-app и установите зависимости:

cd vue-tailwind-app
npm install

Установка Tailwind CSS: Установите Tailwind CSS и связанные зависимости:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

После завершения создания структура каталогов выглядит следующим образом:

Настройка Tailwind CSS: Откройте файл tailwind.config.js и измените его на:

Пример

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Добавьте директивы Tailwind: создайте файл styles.css в каталоге src/assets и добавьте следующее содержимое:

/* src/assets/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Затем импортируйте этот файл в src/assets/main.js:

import './assets/styles.css

Создайте компоненты Vue и стили

Теперь вы можете начать писать свои компоненты Vue 3 и использовать Tailwind CSS для оформления страницы.

App.vue

App.vue — основной компонент приложения; он содержит базовый пример использования Vue 3 и Tailwind CSS.

Пример

<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-6">
    <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-lg">
      <h1 class="text-2xl font-semibold text-center text-gray-800 mb-6">
Пример Vue 3 + Tailwind CSS
      </h1>

      <!-- Поле ввода и кнопка -->
      <div class="mb-4">
        <label for="name" class="block text-sm font-medium text-gray-700">Имя пользователя</label>
        <input
         type="text"
         id="name"
         v-model="username"
         placeholder="Пожалуйста, введите имя пользователя"
         class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
      </div>

      <button
       @click="submitForm"
       class="w-full bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-600 transition duration-200"
     >
Отправить
      </button>

      <!-- Отобразить имя пользователя -->
      <p v-if="submitted" class="mt-4 text-center text-gray-600">Добро пожаловать, {{ username }}!</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      submitted: false
    };
  },
  methods: {
    submitForm() {
      if (this.username) {
        this.submitted = true;
      } else {
alert('Пожалуйста, введите имя пользователя');
      }
    }
  }
};
</script>

<style scoped>
/* Стили здесь настраиваемые, если нужно */
</style>

Кроме того, мы можем задать свой собственный порт в файле vite.config.js. Например, после установки порта следующим образом:3000：

Пример

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    port: 3000, // Наш собственный указанный номер порта
  },
})

После завершения настроек выполните следующееnpm run devВывод команды выглядит следующим образом:

# npm run dev                                                         

> [email protected] dev
> vite


  VITE v6.0.3  ready in 333 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:3000/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help

Посетитеhttp://localhost:3000/, и отображается следующее:

Далее давайте попробуем создать список. Измените файл App.vue, код выглядит следующим образом:

Пример

<template>
  <div class="min-h-screen flex flex-col">
    <!-- Шапка -->
    <header class="bg-blue-600 text-white py-4">
      <div class="container mx-auto text-center">
        <h1 class="text-3xl font-semibold">Страница списка</h1>
      </div>
    </header>

    <!-- Список -->
    <main class="flex-grow py-8">
      <div class="container mx-auto px-4">
        <ul class="space-y-4">
          <li v-for="(item, index) in items" :key="index" class="p-4 bg-white border rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">{{ item.title }}</h2>
            <p class="text-gray-600">{{ item.description }}</p>
          </li>
        </ul>
      </div>
    </main>

    <!-- Подвал -->
    <footer class="bg-gray-800 text-white py-4">
      <div class="container mx-auto text-center">
        <p>&copy;2024 Моё приложение Vue3</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "ListPage",
  data() {
    return {
      items: [
{ title: "Элемент списка 1", description: "Это описание первого элемента списка." },
{ title: "Элемент списка 2", description: "Это описание второго элемента списка." },
{ title: "Элемент списка 3", description: "Это описание третьего элемента списка." },
// Ещё элементы списка
      ],
    };
  },
};
</script>

<style scoped>
/* Добавьте дополнительные стили (при необходимости) */
</style>

Анализ кода:

  • Заголовок (header): Usebg-blue-600задайте цвет фона,text-whiteзадайте цвет текста,py-4задайте вертикальные отступы,container mx-autoиспользуется для задания фиксированной ширины и центрирования.
  • Список (main): Useflex-growчтобы раздел списка заполнил оставшееся пространство,py-8добавьте вертикальные отступы. Каждый элемент списка используетp-4, bg-white, border, rounded-lg, shadow-mdи другие классы Tailwind для настройки внешнего вида.
  • Нижний колонтитул (footer): Usebg-gray-800задайте тёмный фон,text-whiteзадайте белый цвет текста,py-4задайте отступы.

Посетитеhttp://localhost:3000/, и отображается следующее:

Другие расширения