Tailwind CSS с Vue

Для начала необходимо подготовить проект на Vue.js. Если используется Vue CLI, можно создать проект командой:

vue create my-vue-app

После создания проекта добавляется Tailwind CSS. Для этого устанавливаются необходимые пакеты:

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

Файл tailwind.config.js содержит базовую конфигурацию:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

В файле src/assets/tailwind.css подключаются директивы Tailwind:

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

Затем этот файл импортируется в основной входной файл main.js:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'

createApp(App).mount('#app')

Основные принципы работы Tailwind в Vue

Tailwind работает на основе утилитарных классов. В Vue.js классы применяются непосредственно к элементам в шаблоне:

<template>
  <div class="flex justify-center items-center h-screen bg-gray-100">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Нажми меня
    </button>
  </div>
</template>

Ключевые моменты:

Адаптивность: классы с префиксами sm:, md:, lg: управляют стилями на разных размерах экрана.
Состояния: hover:, focus:, active: изменяют стили в зависимости от взаимодействия.
Композиция классов: несколько классов объединяются через пробел, создавая сложные стили без написания CSS.

Динамическое применение классов

Vue позволяет динамически управлять классами через :class и вычисляемые свойства:

<template>
  <button 
    :class="['py-2 px-4 rounded', isActive ? 'bg-green-500' : 'bg-red-500']">
    {{ isActive ? 'Активно' : 'Не активно' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

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

Пользовательские стили и конфигурация Tailwind

Tailwind предоставляет возможность расширять стандартную палитру и добавлять новые утилиты через tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1c3d5a',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      },
    },
  },
}

После этого новые классы доступны в шаблонах Vue:

<div class="bg-brand p-72">
  Контент
</div>

Работа с компонентами Vue и Tailwind

Компоненты Vue хорошо сочетаются с Tailwind благодаря инкапсуляции и переиспользованию:

<template>
  <Card>
    <template #header>
      <h2 class="text-xl font-bold">Заголовок карточки</h2>
    </template>
    <p class="text-gray-700">Содержимое карточки с Tailwind стилями.</p>
  </Card>
</template>

<script>
import Card from './components/Card.vue'

export default {
  components: {
    Card
  }
}
</script>

Компонент Card.vue может использовать утилитарные классы для организации структуры:

<template>
  <div class="bg-white shadow-lg rounded-lg p-4">
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

Утилиты Tailwind для типичных задач

Flexbox и Grid: управление расположением элементов через flex, justify-*, items-*, grid, grid-cols-*.
Типографика: text-*, font-*, leading-*, tracking-*.
Отступы и размеры: p-*, m-*, w-*, h-*.
Эффекты и переходы: shadow-*, transition, duration-*, ease-*.

Эти утилиты позволяют создавать адаптивные интерфейсы без написания отдельного CSS и легко интегрируются с динамическими данными Vue.