Использование попутного ветра с Vue.js

Tailwind – довольно классный CSS-фреймворк.

В этом посте я покажу вам, как использовать Tailwind (v1.0.5) в приложении Vue.

Это 4 простых шага:

Установить Попутный ветер
Создайте файл конфигурации
Настройка PostCSS
Создайте файл CSS
Импортируйте файл в свое приложение Vue
Тестирование работает нормально

В этом посте я предполагаю, что проект, в котором вы хотите использовать Tailwind, основан на Vue CLI 3.

Установить Попутный ветер

Первый шаг – установить Tailwind, используя npm или yarn:

# Using npm
npm install tailwindcss --save-dev

# Using Yarn
yarn add tailwindcss --dev

Создайте файл конфигурации

Затем используйте команду “Попутный ветер”, которая предоставляется для создания файла конфигурации.

./node_modules/.bin/tailwind init tailwind.js

Это создаст tailwind.js файл в корневом каталоге вашего проекта, добавляющий базовую конфигурацию попутного ветра. Файл очень длинный, и я не буду вставлять его сюда, но он содержит множество пресетов, которые будут очень полезны позже.

Настройка PostCSS

Теперь вам нужно настроить конфигурацию PostCSS, чтобы убедиться, что работает попутный ветер. Добавь:

module.exports = {
  "plugins": [
    require('tailwindcss')('tailwind.js'),
    require('autoprefixer')(),
  ]
}

к вашему к вашему

Примечание: если вы настроили интерфейс командной строки Vue для хранения конфигурации в package.json , убедитесь, что в этом файле нет конфигурации PostCSS. По умолчанию Vue CLI добавляет эти строки:

  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },

удалите их , или postcss.config.js файл не будет прочитан.

Создайте файл CSS

Теперь создайте файл CSS в src/assets/css/tailwind.css и добавьте

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

Импортируйте файл в свое приложение Vue

Импорт попутного ветра в main.js:

import '@/assets/css/tailwind.css'

( @ в vue указывает на src/ )

Вот и все! Теперь перезапустите свой проект Vue CLI, и все должно работать нормально.

Тестирование работает нормально

Вы ничего не заметите, если не добавите классы, специфичные для попутного ветра.

Попробуйте, например, добавить этот HTML-код в один из ваших шаблонов:


  Test

Это должно создать цветную коробку.

Оригинал: “https://flaviocopes.com/vue-tailwind/”