Опубликовано: вторник, 18 января 2022 г. в 10:51

Laravel: подключение Tailwind CSS 2

Источник: «Setting Up Tailwind CSS in Laravel»

В статье мы кратко рассмотрим, что такое Tailwind CSS и почему я считаю его полезным. Затем мы рассмотрим два разных способа настройки Tailwind в Laravel проектах.

Введение

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

Примечание. В статье используется Tailwind CSS 2. На данный момент вышла версия 3.0 и некоторые детали лучше уточнять в документации, хотя можно продолжать использовать версию 2.

Что такое Tailwind CSS

Tailwind — это утилитарный CSS фреймворк, который вы можете использовать для стилизации своего веб-сайта непосредственно в HTML-коде. Например, он предоставляет вам классы, такие как flex, pt-4, text-center, что бы вы могли иметь детальный контроль.

В качестве примера давайте рассмотрим как сделать кнопку с помощью Tailwind CSS:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Если бы мы хотели сделать кнопку с помощью Bootstrap CSS, вероятно, сделали бы что-то вроде этого:

<button class="btn btn-primary">
  Button
</button>

Как вы видите, мы добавляем в разметку отдельные классы CSS, а не один или два класса, как в Bootstrap.

А теперь, не волнуйтесь, я знаю, о чём вы думаете... Этот HTML выглядит запутанным и слишком сложным. Версия Bootstrap выглядит намного лучше и понятнее! Я тоже так думал, когда впервые начал использовать Tailwind CSS. Я просто думал, что это что-то вроде причуды, которая утихнет через несколько месяцев. Но я всё же попробовал, чтобы принять более взвешенное решение. Мне он понравился.

Конечно, поначалу это казалось немного странным, но через час или два пользоваться им стало вполне естественно. Когда я использовал Bootstrap CSS, мне казалось, что я борюсь со встроенными стилями CSS, чтобы сделать что-то. Это было здорово для быстрого создания сайтов, но чтобы настроить их по своему вкусу, мне пришлось переопределить множество стилей. Но с Tailwind CSS, если я захотел быстро добавить стиль к кнопке, это было так же просто, как добавить его прямо в HTML.

Если вам хочется узнать больше о том, почему Tailwind CSS полезен, у Адама Ватана (создателя Tailwind) есть интересная статья об этом, которую я рекомендую прочитать.

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

Самый простой (но не обязательно лучший) способ начать работу с Tailwind CSS — подключить таблицу стилей в ваш HTML-код с помощью CDN. Это особенно полезно, если вы хотите быстро создать прототип идеи или просто поиграть с фреймворком.

Для начала вам нужно просто добавить следующую строку в раздел <head> вашего HTML:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Хотя это самый быстрый способ добавить Tailwind в ваш проект, я бы, вероятно не рекомендовал его для любых работающих проектов, потому что:

Размер CSS файла больше, чем если бы он был объединён после установки через NPM.
Вы не можете настроить тему Tailwind по умолчанию.
Вы не можете использовать такие директивы, как @apply, @variant и т.д.
Вы не можете включить дополнительные варианты, такие как group-focus
Вы не можете установить сторонние плагины.
Вы не можете убрать неиспользуемые стили.

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

Если вы собираетесь использовать Tailwind CSS в проекте, который будет запущен, гораздо лучше установить его с помощью npm. Тогда вы не столкнётесь с недостатками, которые я указал выше, возникающими с CDN. Итак, давайте посмотрим с чего начать:

Установка Tailwind CSS

Для установки Tailwind выполните следующую команду:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Настройка конфигурации Tailwind CSS

Теперь, когда Tailwind CSS установлен, мы можем запустить следующую команду для создания базового файла конфигурации tailwind.config.js:

npx tailwindcss init

У вас должен появится файл tailwind.config.js со следующим содержимым:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Это файл, который вы можете использовать, когда вам нужно внести изменения в вашу тему или установить плагины. Например, если мы хотим задать Poppins как шрифт sans по умолчанию, мы можем объявить это следующим образом:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      'sans': ['Poppins', 'ui-sans-serif', 'system-ui'],
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Настройка Laravel Mix

Когда Tailwind установлен и настроен, можно настроить Laravel Mix, что бы наш CSS собирался в бандл всякий раз, когда мы собираем ресурсы.

Предположу, что вы используете файл app.css по умолчанию, который поставляется со свежей версией Laravel. Если это не так, вы можете обновить первый параметр в методе postCss(), что бы он соответствовал пути к вашему основному файлу CSS.

Так же предположу, что ваш файл webpack.mix.js выглядит так же, как тот, что входит в установку Laravel по умолчанию.

Давайте добавим необходимый метод require() в наш метод postCss() в файле webpack.mix.js следующим образом:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss"),
    ]);

Подключение Tailwind к стилю вашего приложения

Мы почти закончили! Когда мы установили и настроили Tailwind CSS, нужно добавить стили в наш основной CSS файл.

Предположу, что мы используем CSS файл resources/css/app.css, упомянутый выше. Всё, что нужно сделать, это открыть файл и в его начале добавить следующее:

@tailwind base
@tailwind components
@tailwind utilities

Теперь Tailwind CSS подключён к вашему проекту и вы можете начать его использовать. Вам также нужно добавить в начало HTML-кода:

<!doctype html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

Поздравляю, у вас установлен Tailwind CSS и готов к использованию в вашем проекте!

Удаление неиспользуемых CSS классов

Рекомендую настроить Tailwind CSS для удаления неиспользуемых классов из CSS файла вашего приложения.

В качестве простого пример давайте представим, что вы используете в своём приложении только класс text-blue-500`. Для нас не имеет смысла включать все остальные классы, которые Tailwind представляет в CSS нашего приложения. Если бы мы включили все неиспользуемые классы, мы бы значительно увеличили размер нашего CSS файла, что может негативно сказаться на поисковом рейтинге.

Чтобы очистить все неиспользуемые классы CSS, мы можем обновить файл tailwind.config.css, что бы он выглядел примерно так:

 module.exports = {
   purge: [
     './resources/**/*.blade.php',
     './resources/**/*.js',
     './resources/**/*.vue',
   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Как вы могли заметить, мы добавили три новые строки в раздел purge. Эти строки позволяют нас сохранить любые CSS классы найденные в файлах внутри каталога ресурсов ./resources/, которые заканчиваются на .blade.php, .js или .vue.

Очень важно убедится, что вы пишете свои стили в разметке таким образом, что их можно сохранить. Давайте посмотрим на пример, который даёт документация Tailwind CSS о том как НЕ надо писать свои классы.

Из-за того, как работает правило регулярного выражения, используемое для обнаружения CSS классов, оно будет обнаруживать строки, которые не разделены пробелами, кавычками или угловыми скобками. Если у вас есть что-либо из перечисленного (например, если вы добавляете классы по условию), они могут быть проигнорированы и удалены.

Например, предположим, что в файле Vue.js вы добавили классы по условию. Если произошла ошибка, то добавляется класс text-red-600, если ошибки не было, то text-green-600. Вы могли бы реализовать это так:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

При обработке будет обнаружен класс text-{{ error ? 'red' : 'green' }}-600. И как вы, вероятно, догадались не будут обнаружены класс text-red-600 или text-green-600. Нужные вам классы будут удалены из CSS (при условии, что они не включены где-то ещё в вашу разметку).

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

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Для более детальной информации рекомендую прочитать раздел по написанию очищаемого HTML в официальной документации на сайте Tailwind CSS.

Разделение HTML на компоненты

По мере роста вашего приложения, вы обнаружите, что часто используете одинаковые фрагменты разметки в разных местах. Итак, подобно тому, как вы пытаетесь сохранять свой код DRY (don't repeat yourself), вы можете сделать то же самое в Laravel со своими представлениями/view.

В этом конкретном разделе мы будем использовать компоненты Blade в качестве примеров, но эту концепцию можно применить если вы создаёте свой интерфейс использую что-то вроде Vue.

Итак, немного контекста, представим, что у нас есть кнопка, используемая во многих местах, и которая имеет следующую разметку:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Предположим, что через несколько месяцев после выпуска оригинального веб-сайта мы хотим обновить все кнопки, чтобы они были зелёными, а не синими. Конечно, мы могли бы выполнить найти и заменить во всех файла Blade. Но, как вы догадались, это было бы громоздко и оставило бы место для ошибки. Что произойдёт, если вы забудете изменить один из них? Или если вы случайно заменили другой элемент, использующий класс bg-blue-500, но не предназначенный для обновления?

Что бы избежать этого, мы можем использовать компоненты Laravel. Компоненты позволяют создавать повторно используемы элементы, которые можно использовать в файлах Blade.

Что бы лучше понять давайте представим следующий HTML код:

<div>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button One
  </button>

  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button Two
  </button>
</div>

Возьмём эти две кнопки и разделим их на компоненты, которые можно использовать вместо них. Начнём создания компонента создав новый файл resources/views/components/button.blade.php.

Затем переместим HTML-код кнопки в наш новый файл button.blade.php следующим образом:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button One
</button>

Но нам нужен динамический текст кнопки, что бы мы могли повторно использовать этот компонент в нашей системе. Мы можем сделать это введя атрибут $text, который будем передавать компоненту. Новая разметка файла компонента будет выглядеть так:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  {{ $text }}
</button>

Теперь обновим исходный HTML-код с двумя кнопками, что бы использовать наш новый компонент, а не дублировать разметку:

<div>
  <x-button text="Button One"/>

  <x-button text="Button Two"/>
</div>

Теперь, если мы хотим изменить цвет наших кнопок с синего на зелёный, всё, что нам нужно сделать, это изменить его один раз в нашем файле resources/views/components/button.blade.php.

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

Для этого обновим наш компонент:

<button {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded']) }}">
  {{ $text }}
</button>

Затем вызовем компонент следующим образом:

<x-button text="Button One" class="text-xl"/>

Это сгенерирует следующий HTML-код:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-xl">
  Button One
</button>

Если вы хотите больше узнать о компонентах Laravel, рекомендую почитать официальную документацию по компонентам. В ней рассказывается что вы можете делать с компонентами и приводится несколько действительно полезных примеров.

Вывод

Надеюсь эта статья показала вам как настроить Tailwind CSS 2.X для ваших Laravel приложений и веб-сайтов. Так же я постарался рассказать, как настроить Laravel Mix для очистки от неиспользуемого CSS кода, а затем кратко показал, как разбить повторно используемый HTML-код на компоненты.