Использование Tailwind с Vue.js

В этой статье объясняется, как настроить Tailwind для использования в проекте Vue CLI 3.

Попутный ветер- довольно крутая CSS-фреймворк.

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

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

In this post I assume the project you want to use Tailwind on is based on Vue CLI 3.

Установить Tailwind

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

# Using npm
npm install tailwindcss --save-dev

# Using Yarn yarn add tailwindcss --dev

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

Затем используйте предоставленную команду Tailwind для создания файла конфигурации.

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

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

Настроить PostCSS

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

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

на вашpostcss.config.js. Создайте его, если его не существует.

Примечание: если вы настроили Vue CLI для хранения конфигурации в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

Импортируйте tailwind в main.js:

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

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

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

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

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

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

<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
  Test
</div>

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

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: