Why Tailwind CSS?
If you are reading this, you are probably in the same situation as me i.e. you can do backend development without breaking a sweat, but when you try your hand at some front-end development, it ends up looking like a throwback to 1994.
I've tried bootstrap and various themes, and whilst they help, they tend to focus on a handful of specific page templates and deviating from them leaves me in the same situation as before.
Tailwind, on the other hand, has a collection of components that you can piece together, any way you want, to build up your own templates and spans everything from marketing pages to an e-commerce store and checkout pages to application UI, meaning you can get your product up and running with a beautiful looking front-end with little effort and leaving you more time to do the stuff you are good at.
The downside is you need to pay for the components - currently £219 + VAT, but in my view, it is well worth it as it includes
- All the components to build your marketing, application or e-commerce sites
- Lifetime membership - free updates forever
- Unlimited projects - no need to purchase for each project
- Pre-made templates using Tailwind CSS ready to use - this is something they have just recently added.
I've spent much more than that over the years on templates that I've never quite managed to get working, whilst my first attempt at a project using Tailwind (https://passwordangel.co) had the front-end up and running inside an hour.
You can see all the available components and templates on the Tailwind UI site - https://tailwindui.com/
So without further ado, let's get stuck into getting Tailwind CSS up and running in your Symfony project.
[!TIP]
Symfony 6.3 and earlier uses Webpack Encore instead of AssetManager and you can see how to set up Symfony with Encore in my previous version of this post.
Setup
Install Symfony
In this example, I'm going to set up a web app Symfony project because I want all the typical components for a web application (twig, routing, etc)
symfony new --webapp symfony-tailwind-demoNext we need to install the Tailwind bundle and initialise it.
cd symfony-tailwind-demo
composer require symfonycasts/tailwind-bundle
./bin/console tailwind:initCreating our first-page using Tailwind CSS
A lot of the configuration that we had to set up manually when using Tailwind CSS and Symfony Encore (creating tailwind.config.js, assets/styles/app.css, adding script tags to the base template etc) has been taken care of for us via the Tailwind bundle so now we can get straight into building our first page.
Lets add the controller
<?php
// src/Controller/DefaultController.php
declare(strict_types=1);
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
class DefaultController extends AbstractController
{
#[Route('/')]
public function index(): Response
{
return $this->render('default/index.html.twig');
}
}And now the view template (templates/default/index.html.twig). Let's take a component from the preview section from https://tailwindui.com/preview. In this case, I'm going to use Ecommerce -> Components -> Promo Sections -> With image tiles
{% extends 'base.html.twig' %}
{% block body %}
<div class="relative overflow-hidden bg-white">
<div class="pb-80 pt-16 sm:pb-40 sm:pt-24 lg:pb-48 lg:pt-40">
<div class="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
<div class="sm:max-w-lg">
<h1 class="text-4xl font-bold 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:mx-auto lg:w-full lg:max-w-7xl">
<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="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
<div class="h-64 w-44 overflow-hidden rounded-lg sm:opacity-0 lg:opacity-100">
<img src="https://tailwindui.com/plus/img/ecommerce-images/home-page-03-hero-image-tile-01.jpg" alt="" class="h-full w-full object-cover object-center">
</div>
<div class="h-64 w-44 overflow-hidden rounded-lg">
<img src="https://tailwindui.com/plus/img/ecommerce-images/home-page-03-hero-image-tile-02.jpg" alt="" class="h-full w-full object-cover object-center">
</div>
</div>
<div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
<div class="h-64 w-44 overflow-hidden rounded-lg">
<img src="https://tailwindui.com/plus/img/ecommerce-images/home-page-03-hero-image-tile-03.jpg" alt="" class="h-full w-full object-cover object-center">
</div>
<div class="h-64 w-44 overflow-hidden rounded-lg">
<img src="https://tailwindui.com/plus/img/ecommerce-images/home-page-03-hero-image-tile-04.jpg" alt="" class="h-full w-full object-cover object-center">
</div>
<div class="h-64 w-44 overflow-hidden rounded-lg">
<img src="https://tailwindui.com/plus/img/ecommerce-images/home-page-03-hero-image-tile-05.jpg" alt="" class="h-full w-full object-cover object-center">
</div>
</div>
<div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
<div class="h-64 w-44 overflow-hidden rounded-lg">
<img src="https://tailwindui.com/plus/img/ecommerce-images/home-page-03-hero-image-tile-06.jpg" alt="" class="h-full w-full object-cover object-center">
</div>
<div class="h-64 w-44 overflow-hidden rounded-lg">
<img src="https://tailwindui.com/plus/img/ecommerce-images/home-page-03-hero-image-tile-07.jpg" alt="" class="h-full w-full object-cover object-center">
</div>
</div>
</div>
</div>
</div>
<a href="#" class="inline-block rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-center font-medium text-white hover:bg-indigo-700">Shop Collection</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}Everything should now be in place and you can set the Tailwind bundle running and watching for changes by running this in a terminal window.
./bin/console tailwind:build --watchWhile this is running, you can modify any of the CSS classes in the above template i.e. change text-4xl to text-6xl and you should see notifications on the CSS being rebuilt in the terminal window.
Viewing your first page
We need to actually see the page to verify it is working as we expect. For simplicity, I'm going to use Symfony. In a new terminal window, run
symfony server:startAnd now we can open our favourite browser and go to http://localhost:8000 and see the result. It should look something like this
References
- Tailwind CSS for Symfony! - https://symfony.com/bundles/TailwindBundle/current/index.html
- Tailwind UI - Official Tailwind CSS Components & Templates - https://tailwindui.com/
Originally published at https://chrisshennan.com/blog/using-tailwind-css-with-symfony-asset-mapper