Как добавить TailwindCSS в приложение Vue 3

Существует два способа создания проекта vue3. С помощью Vue-CLI или Vite. Я рассмотрю оба способа.

Использование Vite

Если у вас еще не установлен Vite, вам необходимо установить его. Вы можете установить его с помощью этой команды:

npm install -g vite
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь, когда у вас установлен Vite, вам нужно создать ваше Vue3-приложение. Вы можете создать его с помощью этой команды:

npm init @vitejs/app vue3-vite-tailwind-app
Войти в полноэкранный режим Выйти из полноэкранного режима

После завершения установки вам будет предложено перейти в каталог, содержащий только что созданное приложение Vue3. Как только вы окажетесь в этом каталоге, вы сможете установить все необходимые зависимости, выполнив команду:

npm install
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь нам нужно добавить TailwindCSS в наше приложение Vue3. Tailwind требует двух зависимостей: autoprefixer и postcss.

Вы можете установить как Tailwind, так и одноранговые зависимости с помощью этой команды:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Войти в полноэкранный режим Выйти из полноэкранного режима

Для использования TailwindCSS необходимо создать конфигурационный файл. Мы будем использовать npx, который поставляется в комплекте с Node.js, чтобы создать наш конфигурационный файл с помощью этой команды:

npx tailwindcss init -p
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы увидите, что это добавило два новых файла в ваш проект Vue3. Эти два файла – tailwind.config.js и postcss.config.js.

Чтобы иметь возможность использовать TailwindCSS в нашем проекте, нам нужно добавить несколько строк в наш CSS-файл, который загружается в нашем приложении. Откройте ваш CSS-файл и добавьте следующие 3 строки:

@tailwind base;
@tailwind components;
@tailwind utilities;
Вход в полноэкранный режим Выйти из полноэкранного режима

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

Использование Vue CLI

Если у вас еще не установлен Vue CLI, вам необходимо установить его. Вы можете установить его с помощью этой команды:

npm install -g @vue/cli
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь, когда у вас установлен Vue CLI, вам нужно создать ваше приложение Vue3. Вы можете создать его с помощью этой команды:

vue create vue3-cli-tailwind-app
Войти в полноэкранный режим Выйти из полноэкранного режима

Вам будет предложено выбрать любые опции, которые вы хотите установить для своего приложения.

Теперь, когда приложение создано, нам нужно добавить TailwindCSS. Вы можете легко добавить его с помощью этой команды:

vue add tailwind
Войти в полноэкранный режим Выйти из полноэкранного режима

Вам будет предложено выбрать тип файла конфигурации Tailwind, который вы хотите создать. Вы можете выбрать следующие варианты:

  • none – Не будет создавать файл конфигурации. Полезно, если у вас уже есть конфигурация (не забудьте настроить PurgeCSS).
  • minimal (по умолчанию) – Будет создан минимальный файл tailwind.config.js, в котором вы сможете определить свои настройки.
  • full (полный) – создаст файл tailwind.config.js, содержащий всю конфигурацию по умолчанию.

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

Оцените статью
Procodings.ru
Добавить комментарий