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

Tailwind является частью стека TALL, наряду с Alpine.js и Livewire. Сообщество Laravel создало это комплексное решение для разработки, чтобы помочь разработчикам всех уровней квалификации быстро создавать прототипы веб-приложений. Эти решения просты в использовании без глубоких знаний интерфейсных или серверных технологий.

В этой практической статье рассказывается, как использовать Tailwind CSS, чтобы оживить ваш проект Laravel, а затем развернуть его с помощью MyKinsta.

Улучшите свой проект Laravel с помощью Tailwind

Для начала создайте базовую страницу Laravel, а затем используйте Tailwind CSS, чтобы придать ей стиль с минимальными усилиями.

Предпосылки

Чтобы пройти обучение, вам потребуется:

  • Laravel и Composer установлены.
  • Node.js и npm установлены.
  • Учетная запись MyKinsta для развертывания. Если у вас еще нет учетной записи, зарегистрируйтесь для получения бесплатной пробной версии.

Чтобы увидеть окончательный проект, ознакомьтесь с полным кодом проекта.

Проект Laravel и настройка Tailwind

Чтобы создать новый проект Laravel с помощью Composer:

  1. Откройте терминал в каталоге, в котором вы хотите, чтобы проект жил и работал:
composer create-project laravel/laravel my-project
  1. Перейти к мой проект каталог для установки необходимых пакетов:
cd my-project
  1. Установите пакеты для работы с Tailwind:
npm install -D tailwindcss postcss autoprefixer
  1. Выполните следующую команду, чтобы настроить файлы конфигурации Tailwind:
npx tailwindcss init -p

Это действие помещает два файла в корень вашего проекта: хвостовой ветер.config.js и postcss.config.js.

Настройте пути к шаблону

  1. Затем настройте пути к шаблону в хвостовой ветер.config.js файл. Laravel по умолчанию ищет файлы CSS в общедоступном каталоге. Путь к шаблону сообщает Laravel, где найти файлы CSS приложения.
  1. Замените код внутри хвостовой ветер.config.js файл с этим:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

Добавьте директивы CSS Tailwind в CSS проекта

  1. Чтобы добавить директивы для Tailwind CSS, перейдите на ресурсы/CSS папку и откройте app.css файл.
  1. Затем добавьте следующий код:
@tailwind base;
@tailwind components;
@tailwind utilities;

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

Перед запуском приложения локально:

  1. Запустите сервер разработки Vite:
npm run dev

Эта команда объединяет файл статических ресурсов, включая CSS Tailwind, и запускает локальный сервер Vite.

  1. Используйте Artisan для запуска вашего приложения Laravel:
php artisan serve

Теперь ваше приложение должно работать на http://127.0.0.1:8000/. Он отображает вывод по умолчанию только что созданного приложения Laravel.

При открытии ресурсы/просмотры/welcome.blade.php файл представления маршрута, вы можете видеть, что он уже использует служебные классы Tailwind.

Как сделать простой компонент попутного ветра

Чтобы лучше понять, как работает Tailwind:

  1. Открыть ресурсы/просмотры/welcome.blade.php.
  1. Удалите код из окна приветствия приложения.
  1. Замените его приведенным ниже кодом, который отображает красивый компонент карточки:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      @vite('resources/css/app.css')
    <title>Document</title>
  </head>
  <body>
    <div class="max-w-md  m-24 rounded overflow-hidden shadow-lg">
      <img class="w-full" src="https://picsum.photos/400/300" alt="Blog Image">
      <div class="px-6 py-4">
        <h2 class="font-bold text-2xl mb-2">This is My Blog Title</h2>
        <p class="mt-3 text-gray-600 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,
                exercitationem praesentium nihil.
        </p>
        <button class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded">
            Read More
        </button>
      </div>
    </div>
  </body>
</html>

Код выше использует Vite для импорта app.css файл через @vite('resources/css/app.css'). Он также импортирует Tailwind. Он создает базовый компонент разметки для макета карточки блога с помощью следующих служебных классов Tailwind CSS:

  • max-w-sm — Устанавливает максимальную ширину контейнера равным sm (маленькому) размеру точки останова.
  • m-24 — Добавляет поле в 24 единицы (96px или 6rem) со всех сторон контейнера.
  • rounded — Добавляет радиус границы, чтобы сделать углы контейнера закругленными.
  • overflow-hidden — Скрывает любое содержимое, выходящее за пределы контейнера.
  • shadow-lg — Добавляет эффект тени к контейнеру.
  • w-full — Устанавливает ширину изображения на 100% от его контейнера.
  • px-6 py-4 — Добавляет отступы в 6 единиц (24 пикселя или 1,5 бэр) по оси X и 4 единицы (16 пикселей или 1 бэр) по оси Y.
  • font-bold — Устанавливает толщину шрифта текста жирным шрифтом.
  • text-xl — Устанавливает размер шрифта текста на очень большой.
  • mb-2 — Добавляет нижнее поле в 2 единицы (0,5 бэр или 8 пикселей) к элементу.
  • text-gray-600 — Устанавливает цвет текста на темно-серый.
  • text-base — Устанавливает размер шрифта текста по умолчанию.

Когда вы просматриваете свое приложение в браузере, вы должны увидеть результат, аналогичный приведенному ниже.

Пример компонента на веб-странице

Разверните свой проект Laravel Tailwind в Kinsta

Прежде чем развертывать и размещать приложение Laravel с помощью Kinsta, внесите еще несколько изменений, чтобы убедиться, что оно правильно работает при размещении.

  1. Открыть приложение/Http/промежуточное ПО/TrustProxies.php. Изменить значение protected $proxies чтобы ваше приложение Laravel доверяло всем прокси:
protected $proxies="*";
  1. Создать новый .htaccess файл в корневом каталоге вашего проекта и вставьте следующий код:
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
  1. Создайте новый репозиторий Git и загрузите в него свой код (Kinsta поддерживает загрузку из GitHub, GitLab и Bitbucket).
  1. Войдите в свою учетную запись Kinsta или создайте новую. Находясь на панели инструментов MyKinsta, нажмите кнопку Добавить услугу кнопку, затем выберите Приложениекак на скриншоте ниже.
Добавление приложения на MyKinsta
Добавление приложения на MyKinsta

MyKinsta предложит вам подключить свою учетную запись Git. Завершите авторизацию в соответствии с запросом, затем выберите проект, который вы ранее отправили в свой репозиторий, и ветку, которую вы хотите использовать.

Настройка новых сведений о приложении на Kinsta
Настройка новых сведений о приложении на Kinsta
  1. Добавьте свой Laravel APP_KEY в Переменные среды раздел. Ключ находится в вашем локальном каталоге проекта .env файл.
Настройка переменных среды приложения на Kinsta
Настройка переменных среды приложения на Kinsta
  1. Нажмите Продолжать и выберите среду сборки в соответствии с вашими предпочтениями.
  1. Оставьте команду запуска в Ресурсы раздел пока пуст, а затем щелкните Продолжать продолжать.
  1. Наконец, заполните платежную информацию. Развертывание начинается немедленно.

Вам нужны два пакета сборки для правильной работы вашего приложения: PHP для запуска php команды и Node.js для запуска npm команды. Для этого:

  1. Перейдите к своему приложению и в левой части навигации нажмите Настройки.
  1. Нажмите Добавить пакет сборки и добавьте пакеты сборки для Node.js и PHP. Однако убедитесь, что пакет сборки PHP добавлен последним в последовательности, так как это приложение на основе PHP.
  1. Нажмите на Развернуть сейчас Кнопка, которая появляется после добавления новых пакетов сборки, как показано на изображении ниже.
Разверните приложение после добавления пакета сборки на Kinsta
Разверните приложение после добавления пакета сборки на Kinsta
  1. Наконец, перейдите к вашему приложению Процессы вкладку, отредактируйте веб-процесс по умолчанию и замените его Команда запуска со следующим:
npm run build && heroku-php-apache2
Обновление команды запуска процесса на Kinsta
Обновление команды запуска процесса на Kinsta

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

Краткое содержание

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

Теперь, когда вы знаете основы, изучите возможности Tailwind, чтобы улучшить внешний вид вашего приложения с помощью причудливых шрифтов и волшебных эффектов. Затем разверните его с помощью MyKinsta, чтобы мир тоже наслаждался вашим приложением.