Getting Started Tailwind UI with Laravel
Recently, Adam just released a fully responsive components collection built with Tailwind CSS named Tailwind UI.
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:
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.
Thank you, Folks. Happy Coding!