Использование Tailwind CSS с Symfony Encore


Почему именно Tailwind CSS?

Если вы читаете это, то, скорее всего, находитесь в той же ситуации, что и я, т.е. вы можете делать backend-разработку, не покладая рук, но когда вы пробуете свои силы в разработке front-end, это выглядит как возвращение в 1994 год.

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

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

Недостатком является то, что вам нужно заплатить за компоненты — в настоящее время £219 + НДС, но, на мой взгляд, это того стоит, поскольку включает в себя

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

За годы работы я потратил гораздо больше на шаблоны, которые мне так и не удалось заставить работать, в то время как моя первая попытка создать проект с использованием Tailwind (https://passwordangel.co) позволила запустить фронтенд в течение часа.

Вы можете увидеть все доступные компоненты и шаблоны на сайте Tailwind UI — https://tailwindui.com/.

Итак, без лишних слов, давайте приступим к запуску Tailwind CSS в вашем проекте Symfony.

Установка

Установите Symfony

В этом примере я собираюсь установить проект webapp symfony, поскольку мне нужны все типичные компоненты для веб-приложений (twig, routing и т.д.).

symfony new --webapp symfony-tailwind-demo
cd symfony-tailwind-demo
composer update
Войдите в полноэкранный режим Выход из полноэкранного режима

Мне также понадобится пакет Symfony Webpack Encore для обеспечения интеграции фронтенда.

composer require symfony/webpack-encore-bundle
Войти в полноэкранный режим Выход из полноэкранного режима

Установите модули node

Это модули node, которые необходимы пакету Encore для обеспечения функциональности фронтенда и модулю tailwind для создания CSS для шаблонов, которые вы создаете.

yarn add --dev 
    @hotwired/stimulus core-js 
    @symfony/stimulus-bridge 
    @symfony/webpack-encore 
    autoprefixer 
    postcss 
    postcss-loader 
    tailwindcss 
    webpack-notifier@^1.6.0 
Войти в полноэкранный режим Выйдите из полноэкранного режима

А теперь инициализируйте tailwind, чтобы он создал ваши файлы tailwind.config.js и postcss.config.js.

yarn tailwindcss init -p
Войдите в полноэкранный режим Выход из полноэкранного режима

Конфигурация

Нам нужно указать, какие файлы следить за изменениями в файле /tailwind.config.js. В нашем случае мы хотим следить за изменениями в любом из файлов шаблона twig

// tailwind.config.js
module.exports = {
  content: [
      "./templates/**/*.twig"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Нам также нужно включить загрузчик CSS post в webpack.config.js, чтобы он мог преобразовывать директивы CSS tailwind (мы перейдем к этому через минуту) в нужный CSS.

// webpack.config.js
Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')

   // ... rest of the default configuration ...

    // Add this line to enable the post CSS loader
    .enablePostCssLoader()
;

module.exports = Encore.getWebpackConfig();

Encore.enablePostCssLoader();
Вход в полноэкранный режим Выход из полноэкранного режима

Создание нашей первой страницы с помощью Tailwind CSS

Теперь, когда все готово, мы можем приступить к созданию нашей первой страницы. Начнем с добавления директив tailwind CSS в наш CSS-файл

/* /assets/styles/app.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
Войти в полноэкранный режим Выйти из полноэкранного режима

а затем добавим функции encore_entry_link_tags и encore_entry_script_tags twig в наш базовый шаблон, чтобы encore мог загрузить CSS и javascript.

{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>

Вход в полноэкранный режим Выйти из полноэкранного режима

Далее мы хотим добавить файл маршрутизации, чтобы у нас была точка входа в приложение

# config/routes.yaml
index:
    path: /
    controller: AppControllerDefaultController::index

Вход в полноэкранный режим Выход из полноэкранного режима

а затем соответствующий контроллер

<?php

// src/Controller/DefaultController.php

namespace AppController;

use SymfonyBundleFrameworkBundleControllerAbstractController;

class DefaultController extends AbstractController
{
    /**
     * @return SymfonyComponentHttpFoundationResponse
     */
    public function index()
    {
        return $this->render('default/index.html.twig', []);
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима

А теперь шаблон представления. Возьмем компонент из секции предварительного просмотра с сайта https://tailwindui.com/preview. В данном случае я буду использовать «Ecommerce -> Components -> Promo Sections -> With image tiles».

{% extends 'base.html.twig' %}

{% block body %}
  <!-- This example requires Tailwind CSS v2.0+ -->
  <div class="relative bg-white overflow-hidden">
    <div class="pt-16 pb-80 sm:pt-24 sm:pb-40 lg:pt-40 lg:pb-48">
      <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 sm:static">
        <div class="sm:max-w-lg">
          <h1 class="text-4xl font font-extrabold tracking-tight text-gray-900 sm:text-6xl">Summer styles are finally here</h1>
          <p class="mt-4 text-xl text-gray-500">This year, our new summer collection will shelter you from the harsh elements of a world that doesn't care if you live or die.</p>
        </div>
        <div>
          <div class="mt-10">
            <!-- Decorative image grid -->
            <div aria-hidden="true" class="pointer-events-none lg:absolute lg:inset-y-0 lg:max-w-7xl lg:mx-auto lg:w-full">
              <div class="absolute transform sm:left-1/2 sm:top-0 sm:translate-x-8 lg:left-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-8">
                <div class="flex items-center space-x-6 lg:space-x-8">
                  <div class="flex-shrink-0 grid grid-cols-1 gap-y-6 lg:gap-y-8">
                    <div class="w-44 h-64 rounded-lg overflow-hidden sm:opacity-0 lg:opacity-100">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-01.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-02.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                  </div>
                  <div class="flex-shrink-0 grid grid-cols-1 gap-y-6 lg:gap-y-8">
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-03.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-04.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-05.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                  </div>
                  <div class="flex-shrink-0 grid grid-cols-1 gap-y-6 lg:gap-y-8">
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-06.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-07.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <a href="#" class="inline-block text-center bg-indigo-600 border border-transparent rounded-md py-3 px-8 font-medium text-white hover:bg-indigo-700">Shop Collection</a>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
Войдите в полноэкранный режим Выйти из полноэкранного режима

Теперь все должно быть на месте, и вы можете запустить encore и следить за изменениями, выполнив это в окне терминала.

yarn encore dev --watch
Войти в полноэкранный режим Выйти из полноэкранного режима

В процессе работы вы можете изменить любой из классов CSS в вышеуказанном шаблоне, например, изменить text-4xl на text-6xl, и вы увидите уведомления о перестройке CSS в окне терминала.

Просмотр вашей первой страницы

Нам нужно увидеть страницу, чтобы убедиться, что она работает так, как мы ожидаем. Для простоты я буду использовать встроенный веб-сервер PHP в этом примере, чтобы мы могли запустить его в другом окне терминала.

cd public
php -S localhost:8080
Войти в полноэкранный режим Выйти из полноэкранного режима

А теперь мы можем открыть наш любимый браузер и перейти по адресу http://localhost:8080 и посмотреть результат. Он должен выглядеть примерно так

Попробуйте перед покупкой

Чтобы вы могли увидеть это в действии и поэкспериментировать сами, я создал git-репозиторий с уже выполненными шагами этой статьи, так что вы можете просто git clone, установить зависимости и начать работу.

Git-репозиторий: https://github.com/chrisshennan/symfony-and-tailwindcss-example

Ссылки

  • Начните работу с Tailwind CSS — Установка — https://tailwindcss.com/docs/installation
  • Установка Tailwind CSS с Laravel — https://tailwindcss.com/docs/guides/laravel
  • Tailwind UI — Официальные компоненты и шаблоны Tailwind CSS — https://tailwindui.com/

Оцените статью
devanswers.ru
Добавить комментарий