Интеграция Tailwind CSS с VueJS

Вступление

Vue - это прогрессивная структура для создания пользовательских интерфейсов. Основная библиотека ориентирована только на слой представления, и ее легко выбрать и интегрировать с другими библиотеками или существующими проектами. Большинство людей любят Vue за его выразительность и простоту использования.

Tailwind - это первый CSS-фреймворк. Он отличается от таких фреймворков, как Bootstrap, Foundation или Bulma, тем, что в нем нет темы по умолчанию и встроенных компонентов пользовательского интерфейса. С другой стороны, Tailwind предоставляет легко компонуемые низкоуровневые служебные классы, которые упрощают создание сложных пользовательских интерфейсов, не заставляя любые два сайта выглядеть одинаково.

В этой статье будет продемонстрировано, как интегрировать Tailwind CSS в приложение VueJS. Мы собираемся использовать Vue CLI 3. Vue CLI 3 представляет следующее поколение прототипов и создания приложений VueJS. Теперь это стандартный набор инструментов для сборки приложений Vue. Позволяет легко устанавливать различные плагины VueJS. Для получения дополнительной информации ознакомьтесь с этой статьей автора VueJS - Evan You: https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb.

Настройка нового приложения VueJS

Установить Vue CLI-3

В командной строке запустите эту команду:

$ yarn global add @vue/cli
// OR
$ npm install @vue/cli -g

Создайте приложение Vue

Выберите установку по умолчанию, если у вас нет определенных пакетов, которые могут вам понадобиться в вашем приложении (например, vuex или vue-router). Это создаст новый проект Vue, готовый к работе с выбранными вами параметрами.

$ vue create my-app
$ cd my-app

После установки вы можете запустить сценарий dev npm в package.json. Это запустит локальный сервер разработки по адресу https: // localhost: 8080.

$ yarn serve
// OR
$ npm run serve

Есть и другие способы создания нового проекта Vue, но давайте пока остановимся на нем.

Установить и настроить Tailwind CSS

Установите Tailwind CSS:

В командной строке запустите эту команду:

$ yarn add tailwindcss --dev
// OR
$ npm install tailwindcss --save-dev

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

Используя конфигурацию по умолчанию, Tailwind CSS поставляется с уменьшенным размером 36,4 КБ и сжатием gzip.

Вот еще несколько популярных фреймворков для сравнения:

Загрузочный: 22,1 КБ
Bulma: 22.0кб
Фундамент: 16,7 КБ
Тахионы: 13,6 КБ

Для сравнения, Tailwind кажется действительно тяжелым (более чем в 1,5 раза больше, чем Bootstrap!).

Файл конфигурации Tailwind - это одно место, где вы можете настроить, какие функции Tailwind вы хотите использовать в своем приложении.

Tailwind почти полностью настроен на простом JavaScript. Для этого вам необходимо сгенерировать файл конфигурации Tailwind для вашего проекта. Мы рекомендуем создать tailwind.js файл в корне вашего проекта.

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

Вы можете заменить tailwind.js именем (по вашему выбору) для файла конфигурации, с этого момента мы будем предполагать, что имя выбранного файла называется tailwind.js и находится в корневой папке вашего проекта.

Импорт попутного ветра

Давайте создадим файл css для импорта правил Tailwind CSS. Место, куда вы решите поместить этот файл, в основном зависит от ваших предпочтений. Большинство людей помещают все css assets в <project_root>/assets/styles/.

Итак, давайте создадим файл css с именем tailwind.css и поместим его в <project_root>/assets/styles/tailwind.css.

В этом файле импортируйте основные правила CSS Tailwind:

tailwind.css:

@tailwind preflight;
@tailwind components;
@tailwind utilities;

Обработайте свой CSS с помощью Tailwind

Вам необходимо обработать импортированные вами правила CSS, чтобы получить окончательный файл CSS. Этот последний файл css мы позже импортируем в наши компоненты.

Чтобы обработать Tailwind CSS, запустите эту команду из командной строки:

./node_modules/.bin/tailwind build ./assets/styles/tailwind.css -c ./tailwind.js -o ./assets/styles/output.css

Эта команда вызывает командный интерфейс Tailwind, который был установлен вместе с Tailwind.

Мы вызываем команду и запрашиваем ее у build нашего tailwind css файла (tailwind.css), который мы создали ранее. В дополнение к этому мы сообщаем команде, что наши параметры конфигурации находятся в tailwind.js файле, передавая параметр -c (для конфигурации) и указывая путь к нашему файлу конфигурации. Наконец, мы указываем местоположение файла output с помощью параметра -o (для вывода), также указывая путь к выходному файлу output.css.

Чтобы упростить задачу, давайте включим этот скрипт в раздел скриптов нашего package.json файла.

Откройте файл package.json и в разделе сценария добавьте эту команду. Вы можете добавить его в свою цепочку сборки, чтобы знать, что Tailwind всегда собирается до запуска вашего приложения.

Вот пример:

"scripts": {
    "tailwind": "tailwind build ./src/assets/styles/tailwind.css -c ./tailwind.js -o ./src/assets/styles/output.css",
    "serve": "npm run tailwind && vue-cli-service serve",
    "build": "npm run tailwind && vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  }

Теперь каждый раз, когда мы запускаем npm run tailwind, наш output.css файл будет содержать последнюю сборку нашей конфигурации попутного ветра.

Добавление пользовательских стилей

Вы можете включить свои собственные правила CSS в файл tailwind.css, но я предпочитаю оставить этот файл в покое.

Итак, создайте новый файл css в <project_root>/assets/styles/<file_name.css>. Я предпочитаю называть этот файл styles.css: <project_root>/assets/styles/styles.css.

Импорт файлов CSS в наше приложение VueJS

Теперь, когда мы встроили Tailwind в output.css и разместили наши собственные правила CSS в styles.css. Добавим их в наши компоненты.

Откройте ваш App.vue файл и добавьте эти правила в раздел скрипта:

<script>
import HelloWorld from './components/HelloWorld.vue'
require('./assets/styles/output.css')
require('./assets/styles/styles.css')
export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

Или импортируйте их в свой раздел стилей, если у вас есть цепочка сборки SCSS / SASS:

<style lang="scss">
  @import "./assets/css/output";
  @import "./assets/css/styles";
</style>

Любого из этих подходов должно быть достаточно.

Пример

См. Пример кода на Github: https://github.com/clintonyeb/vuejs-tailwind-setup

Будущие улучшения

Обрезка Tailwind CSS с помощью PurgeCSS: добавление PurgeCSS в цепочку сборки Tailwind.