How Laravel and Tailwind Sped Up Development.

6 minute read • Shindou Mihou

In the last blog post, we explained in summary how this entire project started at first, and on this blog post, I will be explaining how this entire site came to be with the assistance of both Tailwinds and Laravel which are both incredible tools that helped created this entire website within less than a week.

Creating the Frontend

You might have thought that I had started creating the backend of the entire website first before moving onto the backend, but it's the other way around as setting up the backend for the entire website required integrations with the core module of Mana, requiring her to restart several times in a single day which is something I want to avoid. It was instead better to work out the front-end first before touching the backend and that was what I did with the help of Laravel's Blade Template and Tailwind.

To first understand how we managed to create this entire website in less than a week, we have to understand how Laravel Blade Template and Tailwind works and look as both are crucial to understanding the entire scene that is in play with this site.

Laravel Blade

Blade Template (blade.php) is the main templating engine of Laravel and is built-in with the application, in a sense, it's similar to Vue.js or Svelte but without reactivity. It's more of a one-way placement of the parameters onto the template... if I have to say, it feels similar to an SSR but generated in real-time during each request which may sound slow but Laravel does it at an incredible speed even retrieving authenticated user data in milliseconds. An example of a Blade Template looks more like this.

<html>

<head>
@yield('head-components')
</head>

<body>
     <p> {{ $text }} </p>
</body>

</html>

To explain this code a little bit, the yield keyword tells Laravel that it can extend sections onto that part of the place. For example, if I want to add the title of the page onto the head tag then all I would have to do is place a section there. As for the double brackets on the p tag, that is what we use to reference variables, etc., and display them onto the page. A full example of utilizing this template would be as shown below.

@extends('layout-template-example-name')

@section('head-components')
<title> Hello World </title>
@endsection
Route::get('/', function () {
    return view('template', ['text' => 'Hello World']);
});

Think of the first code block being named as template while the earlier code block being layout-template-example-name, what we are doing here is we are adding a route to the webpage that gives the variable text a value which would be hello world, and the end result of this entire code would be as shown below.

<html>

<head>
<title> Hello World </title>
</head>

<body>
    <p> Hello World </p>
</body>

</html>

That is how simple Blade Templates are on Laravel, and it is incredibly good at allowing you to retrieve data from the database and immediately rendering them onto the content without having to have the user request anything on the backend. If you want to learn more about Blade Templates, it's better to read Laravel's Documentations here.

Tailwind CSS

Tailwind CSS is one of the more powerful frameworks for CSS similar to Bootstrap, but unlike Bootstrap, Tailwind doesn't give you components from the get-go. It instead allows you to make components look beautiful and unique by giving you the ability to customize them using HTML classes, modularity. The biggest advantage of Tailwind over Pure CSS for me is that everything is easier to do, from responsiveness to even the basic color schemes. It is incredibly easy to understand as all the class names are named exactly as they are supposed to do. An example of the HTML we made above being done with Tailwind would be.

<html>

<head>
<title> Hello World </title>
<link rel="stylesheet" href="css/app.css"/>
</head>

<body class="container-fluid">
    <p class="font-bold text-white text-xl">Hello World</p>
</body>

</html>

You may be able to understand immediately what the text looks like from the class names, it would look bold and white with the size of XL. A visual representation of the Hello World would be: Hello World

It's as simple as that, with little configuration needed to do while also allowing the entire website to be responsive (look beautiful on mobile devices, tablet devices, and desktop devices) which is something that many web developers hate to do but are forced to. If you want to learn more about Tailwind, feel free to head to their website.

Demonstration

To demonstrate the full extent of how Mana's Project Stargazing website utilizes Tailwind CSS and Laravel Blade, let me show you one of her actual codes that is deployed right now onto production and you are actually viewing upon right now. The blog post template.

@extends('layout.default')

@section('head-content')
    <title>{{ $article->title }} | Mana</title>
    <link rel="stylesheet" href="{{ asset('css/article.css') }}" />
@endsection

@section('meta-tags')
    <meta name="og:title" content="{{ $article->title }}" />
    <meta name="og:description" content="{{ Str::limit(strip_tags($article->content), 250, '...') }}" />
    <meta name="og:image" content="{{ asset('images/' . $article->image) }}" />
    <meta name="og:type" content="article" />
@endsection

@section('main-content')
    <div class="px-14 md:px-32 py-14 pb-32 wei flex flex-col mx-auto text-white">
        <img src="{{ asset('images/' . $article->image) }}" class="w-full h-80 object-cover rounded shadow cover" />
        <h1 class="font-bold text-4xl pt-4 wei">{{ $article->title }}</h1>
        @php
            $content = explode('</p>', $article->content);
        @endphp
        <div class="font-light text-xl roboto flex flex-col gap-8 pt-4 pb-8" id="content">
            @for ($x = 0; $x < count($content); $x++)
                {!! $content[$x] !!}
            @endfor
        </div>
        <hr>
        <div class="flex flex-col wei pt-4 font-light">
            <h4 class="text-l text-white">Written by <span class="text-blue-400 font-bold">Shindou Mihou</span></h4>
            <p class="text-l text-white">Developer of Mana.</p>
        </div>
    </div>
@endsection

Please note that for the sake of a little bit more cleanliness, most of the script tags that are not needed for this demonstration (e.g. the lightbox) are removed but this should be enough to show you the beauty of Tailwind CSS and Laravel Blade. How about we break down each section of the template, shall we?

Head Content

The head content may be the most boring part of everything as all it does is inject the title and the extra CSS (that is required by TinyMCE) that we need to make the entire site look what it looks right now... well kinda. There isn't much to look at there other than the fact that we are displaying the title of the article onto the title tag.

Meta Tags

This is also another boring part of everything as all we are doing is generating the meta-tags that are needed for websites like Discord and Facebook to be able to show a preview of the content that is being shown here. For example, the description tag is simply us telling Laravel to display the contents of this post but with the HTML Tags (generated by TinyMCE) removed and also with the text truncated to 250 characters. You can see the results of this code by looking at your inspect element for this post.

Main Content

The main content is where most of the fun starts as here we are doing some pretty messy Tailwind CSS styling paired with plentiful Blade keywords. Let us get through at least one of each, shall we?

To start, let us take a closer look at the first div shown above which has nine CSS classes.

<div class="font-light text-xl roboto flex flex-col gap-8 pt-4 pb-8" id="content">

The starting class name shown on the div tag tells us that we want all the font inside the content to be of light which is what the text tags look like right now, the second tag tells us that we want all the text to be extra-large which is this size while the next class is a custom class that tells the browser to use the Roboto font before turning the div into a flex container with all the components being displayed in columns.

After the flex container part, we tell the browser that we want 2 root element font size (rem) units gap between every component inside the line as specified by Tailwinds Documentations and a little 1 root element font size (rem) unit padding at the top and 2 root element font size (rem) unit padding at the bottom, and that is how the container of this entire blog looks.


Written by Shindou Mihou

Developer of Mana.