Как добавить Tailwind 3 в vue 2 проект?

Для добавления Tailwind CSS v3 в ваш проект на Vue.js 2, вам необходимо выполнить следующие шаги:

Шаг 1: Установка Tailwind CSS

1.1 Установите Tailwind CSS, выполнив команду в терминале:

npm install tailwindcss@npm:@tailwindcss/postcss7-compat@^3.0.0

1.2 Создайте файл конфигурации Tailwind в корневой директории вашего проекта, выполнив команду:

npx tailwindcss init

1.3 Это создаст файл конфигурации tailwind.config.js.

Шаг 2: Установка PostCSS и Autoprefixer

2.1 Установите PostCSS и Autoprefixer, выполнив команду:

npm install postcss@^8 autoprefixer@^10

2.2 Создайте файл конфигурации PostCSS в корневой директории вашего проекта с именем postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Шаг 3: Настройка стилей в вашем проекте

3.1 Создайте новый файл стилей с расширением .css, например tailwind.css, и добавьте следующий код:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Шаг 4: Подключение стилей в ваш проект

4.1 Откройте файл main.js в директории src вашего проекта.

4.2 Добавьте следующий импорт в начало файла:

import './tailwind.css'

Шаг 5: Использование Tailwind CSS в вашем проекте

Теперь вы можете использовать Tailwind CSS в вашем проекте. Все классы, предоставляемые Tailwind, будут доступны при написании html кода.

Пример использования:

<template>
  <div class="container mx-auto">
    <h1 class="text-3xl font-bold">Привет, Tailwind!</h1>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Нажми меня
    </button>
  </div>
</template>

Это пример использования классов container, text-3xl, font-bold, bg-blue-500, и т.д.

После завершения этих шагов Tailwind CSS v3 будет добавлен в ваш проект на Vue.js 2. Вы будете иметь доступ к всем классам и функциональности Tailwind для быстрой и эффективной разработки пользовательского интерфейса.