Getting Started Tailwind UI with Laravel

Didik Tri Susanto

Published in

Teknomuslim

4 min readMar 21, 2020

Recently, Adam just released a fully responsive components collection built with Tailwind CSS named Tailwind UI.

Tailwind UI

Beautiful UI components by the creators of Tailwind CSS.

tailwindui.com

Still in early access stage, so there are only couples component and they are still working with the update. It is not free (some basic components is free) but I think it’s worth to buy the license because it could saved us to build a web application with some provided components rather than wrote from scratch.

Why Tailwind UI?

First, I am not a frontend guy and definitely struggling a lot using CSS. I could spent 2 hours just to get a button displayed in the center of page or make a form that just “feel right” to me. Tailwind CSS using “utility first” as their approach and I often got my “AHA” moment while I learned it.

I’ve got excited when they’ve launched Tailwind UI, especially when Adam showed peoples how he built a fully responsive web page just copy-pasted (mostly) from TailwindUI components in 10 minutes. That was fast and effective.

This is kind of interesting.

So here we go, I’ll give it a shot and let’s see how easy to build a web application using Tailwind UI.

Build The App

So basically, here is what we need:

Install Laravel 7

Make sure you are connected to internet and run this command to begin Laravel installation.

$ composer create-project --prefer-dist laravel/laravel laraveltailwindui

Wait until installation is completed then navigate your terminal to laraveltailwindui directory.

Setup Tailwindcss

You can install Tailwind CSS using Laravel Frontend Preset via Composer:

$ composer require laravel-frontend-presets/tailwindcss --dev

After installation is completed, let’s create the Tailwind CSS Preset.

$ php artisan ui tailwindcss
$ npm install && npm run dev

You may check your current Laravel’s homepage now is styled using Tailwind.

$ php artisan serve

Setup Tailwind UI

Add Tailwind UI plugin in your project using command below:

$ npm install @tailwindcss/ui

Then add @tailwindcss/ui in Tailwind plugin list.

// tailwind.config.js 
module.exports = 
{
   plugins: [
      require('@tailwindcss/ui'),
   ]
}

Tailwind UI used Inter font family. So to get better result, add font from CDN to your main layout. (You can do it later)

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Extend font family to your Tailwind config. Your final config should looks like below.

// tailwind.config.jsmodule.exports = {
   theme: {
     extend: {
      fontFamily: { sans: ['Inter var'] },
     }
   },
   variants: {},
   plugins: [
     require('@tailwindcss/ui'),
   ]
}

Don’t forget to rebuild your configuration

$ npm run dev

Set the Components

In this session, I’ll focus to implement the Tailwind UI components so no more backend integration stuff such as database or CRUD function. The idea is using free components to build a nice web application. Then we could set:

Simple sign in page
Stacked layout as main layout
A wide table to display collection of data
Pagination component
Description list to display single data
A simple modal to simulate confirmation action

Creating The Blade View

You just need an basic HTML skeleton to start then we just copy-paste the Tailwind UI component code into our <body> tag. Tailwind UI component explorer has a nice tab to look how the code looks like. We can select all that code and do copy or click copy icon on the right.

Here is my basic layout looks like:

The component need Alpine.js to handle some client side action such as modal page as mentioned above, so you should include the script at the bottom.

You may need some adjustment into your css or style to get “what it should looks like” for you. Don’t worry, it won’t take so much effort to do that because the component itself is fit nicely into your layout.

Here is some of my implementation with little adjustments:

wide table & pagination inside stacked layout

Yes, mostly copy-paste how cool is that? Check the demo here if you want to look all the pages.

Simplify to Main Layout

Stacked layout surely becomes our main layout since the content will dynamically changes. You can create a main layout blade file so you can extend to each page that you want to build.

Modify our <body> content into like this:

<!-- views/layouts/app.blade.php --><div id="app">
  @include('layouts.navigation')
  <main>
    @yield('content')
  </main>
</div>

You can separate navigation content into different file so main layout is more clean.

Final Thought

Well, I will definitely digging Tailwind more deeper right now because this is getting interesting. In the next research I’ll try to make these pages into SPA style using Inertia.js + Vue or maybe playing around with Laravel Blade’s Component.

You can get full source code in my repository so you can get more clear how it is work.

didikz/laravel-tailwindui

Just wondering how amazing Tailwindui is able to create such many beautiful ui component. As a former backend engineer…

github.com

Thank you, Folks. Happy Coding!