Почему именно 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/