Tailwindcss dropdown with the use of Alpine.js

Hello, today I want to introduce you to a JavaScript framework: Alpine.js. Alpine.js is a small (~7KB gzipped) JavaScript framework with the same functionallities like JQuery, and a code syntax that is borrowed from Vuejs.

First, I am going to show the possibilities of the framework. Then, we are going to build a dropdown menu with the use of Tailwindcss and Alpine.js.

When to use Alpine.js

You should use Alpine.js if you don’t want to make a full SPA, but still need some JavaScript. Alpine.js perfectly integrates with Laravel Livewire and the rest of the TALL stack. Some functionallities of the framework:

  • Dropdown and modal
  • Tabs
  • Show/hide animations

You can also use it for a dynamic form, like showed in this tutorial from Chasing Code.

How to install Alpine.js

You can alpine.js from CDN by adding the following script to the end of your <head> section:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

The package is also available from NPM. Run the following command to add Alpine.js: npm i alpinejs. Then you need to import it in your script: import 'alpinejs'.

If you are using Laravel you place it in the resources/js/bootstrap.js file.

Dropdown

Now it is time to see how easy it is to create a dropdown in Tailwindcss with the use of Alpine.js.

Checkout this tutorial, if you want to learn how to install Tailwindcss to your Laravel project.

Below is the JSFiddle with the code for the dropdown.

We create a button with Tailwindcss. The button has the relative class. With this class we can position the dropdown body absolute to the button.

Next we will add x-data="{ open: false }" attribute. This will initialize a variable open that we can use to check if the dropdown is open.

When we press the button, we need to open the dropdown body. We do this by adding x-on:click="open = true" to the button.

On the dropdown body we set a show attribute with an animation if the open variable is true. We do this by adding x-show.transition="open". If the user clicks away, we want to close the dropdown body. We do this with the x-on:click.away="open = false" attribute.

That is it! We now have a fully working dropdown modal using Tailwindcss and Alpine.js.

Wrapping it up!

I hope you enjoyed this post. Do you have any questions or suggestions? Please contact me on Twitter!!

Setup Tailwindcss in Laravel 7.x

In this tutorial we are going to install Tailwindcss in Laravel 7 application. Tailwindcss is a utility-first CSS framework. With this framework you can make custom designs without writing any CSS.

Install Tailwindcss in Laravel 7

Now it is time to install Tailwindcss! Installing Tailwindcss is not difficult.

First, we create a new Laravel project by running the Laravel new <project name> command.

Then we are going to install Tailwindcss via npm. Open a terminal and run the following command: npm install tailwindcss. Then we are going to add tailwind to our resources/sass/app.scss file.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Tailwind config

The next step is to generate the Tailwind config file. We generate the file by running npx tailwindcss init. This command will create a minimal tailwind.config.js file at the root of the project. Click here if you want more information on this topic.

Laravel Mix

Now we have to setup Tailwindcss in Laravel Mix. Open webpack.mix.js from the root directory and change the content with the following:

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
        .options({
            processCssUrls: false,
            postCss: [ tailwindcss('./tailwind.config.js') ],
        });

Testing

Now we can use the Tailwindcss classes. Open the welcome.blade.php file, delete everything and add the following code:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
        
        <!-- Styles -->
        <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    </head>
    <body class="bg-orange-500">
        <h1 class="text-4xl text-center font-bolder text-white">Welcome to Laravel with Tailwindcss!!</h1>
    </body>
</html>

The last step is to run the following commands: npm run watch & php artisan serve. The first command will compile all the assets. The second command will start the Laravel server.

If everything went well, you should see the following output:

The result

That’s it! Now you can start creating beautiful designs with Tailwindcss.

Learn more about Tailwindcss

Adam Wathan is the founder of Tailwindcss and has a YouTube Channel with lots of tutorials on Tailwindcss. Adam recreate designs of existing websites what is nice.

GitHub

In this repository you can find the source code for this tutorial. If you have any questions, feel free to ask!

Laravel 7.x Livewire search

In this tutorial we are building a search app with Livewire. Laravel Livewire is a tool that makes building dynamic interfaces simple. You don’t need tools like Vue and React for this. All the code is written in php.

To show the strengths of Laravel Livewire, we are going to build a simple search app. In the app we can filter a list of contacts. At the end of the tutorial we have built the following app:

The result

Let’s dive in and discover the possibilities of Laravel Livewire!

Install Tailwindcss

We are going to use Tailwindcss for our styling. I will not cover all the steps that are involved in installing Tailwindcss. You can check out this tutorial for installing Tailwindcss to your Laravel application.

Setup database

The next step is to setup the database structure for this project. First update the .env file with your own database credentials, in my case:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel7-livewire-search
DB_USERNAME=root
DB_PASSWORD=*******

Open the terminal and run the php artisan make:model Contact -m command. This command will create a model named Contact and a database migration for this model.

Open the freshly made migration and add the fields that we need in the up function.

public function up()
{
    Schema::create('contacts', function (Blueprint $table) {
        $table->id();
        $table->char('name', 75);
        $table->char('phone_number', 75);
        $table->timestamps();
    });
}

To fill the database with data we generate a database seeder and a factory. php artisan make:seeder ContactSeeder && php artisan make:factory ContactFactory --model=Contact. When you make a database seeder you always must run composer dump-autoload.

Open DatabaseSeeder.php and call the ContactSeeder.

public function run()
{
    $this->call(ContactSeeder::class);
}

Update the ContactFactory.php file located in the database\factories folder.

$factory->define(Contact::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'phone_number' => $faker->phoneNumber,
    ];
});

If we run the php artisan migrate --seed command, we have a database table filled with contacts.

Install Laravel Livewire

Now it is time to install Laravel Livewire and implement search functionality!

First, we add the package by running composer require livewire/livewire.

Next, we need to include the JavaScript on every page we are going to use livewire. Create a new folder inside the view directory called layouts. In that folder we are going to create a file called app.blade.php. Add the following code to that file.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>

        <!-- Fonts -->
        <link rel="dns-prefetch" href="//fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">

        @livewireStyles
    </head>
    <body>
        <div id="app" class="flex min-h-screen bg-gray-200">
            @yield('content')
        </div>

        @livewireScripts
    </body>
</html>

Make a component

Next, we need to make a livewire component. Run php artisan make:livewire search-contacts. This will create two new files in your project:

app/http/Livewire/SearchContacts.php

resources/views/livewire/search-contacts.blade.php

We can render a Livewire component as a component on a page. But since we only have the search component on the page, we are going to use Livewire routing.

Replace the code in the routes\web.php file with the following code.

<?php

use Illuminate\Support\Facades\Route;

Route::livewire('/', 'search-contacts');

The logic

Now it’s time to implement the logic for the search component. Replace the App\Http\Livewire\SearchContacts.php with the following code:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Contact;

class SearchContacts extends Component
{
    public $search;

    protected $updatesQueryString = [
        'search' => ['except' => '']
    ];

    public function mount()
    {
        $this->search = request()->query('search', $this->search);
    }

    public function render()
    {
        return view('livewire.search-contacts', [
            'contacts' => Contact::where('name', 'like', '%'.$this->search.'%')->get(),
        ]);
    }
}

First, we create a public search variable. Then we make a call that will update the query string with the value from the search variable.

In the mount() function we set the search variable to the value of the search box.

Then we render the page. We select contacts with a name like typed in the search box.

The design

Now the las step is to make the frontend for our component.

<div class="container mx-auto mt-12">
    <h1 class="mb-12 text-center text-gray-900 text-4xl font-semibold">Laravel 7.x Laravel Livewire search</h1>

    <!-- Searchbox -->
    <div class="w-full p-6 mb-6 bg-white border rounded shadow-xl">
        <input
            wire:model="search"
            type="text"
            placeholder="Search..."
            class="w-full px-4 py-2 bg-gray-100 border"
        >
    </div>
    <!-- // Searchbox -->

    <!-- Search Results -->
    <div class="w-full p-6 divide-y bg-white border rounded shadow-xl">
        @foreach($contacts as $contact)
            <div class="p-2">
                <h2 class="text-md font-semibold text-gray-900">{{ $contact->name }}</h2>
                <p class="text-gray-900">
                    {{ $contact->phone_number }}
                </p>
            </div>
        @endforeach

        @if($contacts == '[]')
            <p class="text-gray-900">No contacts found...</p>
        @endif
    </div>
    <!-- // Search Results -->
</div>

This code is straight forward. First, we will create a search form. We use wire:model="search" to pass the value from the input to the Livewire Controller.

Then, we render the render the search results just like we normally would do with the blade foreach syntax.

It’s ready!

That’s it! Now we can search dynamically for contacts.

The result

GitHub

As always you can find the source code for this tutorial on GitHub. If you have any questions, let me know in the comments!

Install Font Awesome in Laravel 7.x and Tailwindcss

Hello everybody! Today I want to share a little guide with you that describes how to install Font Awesome in a Laravel project.

Currently I am working on a website for this blog (I will tell you more about it soon). For this project I am using the following stack:

I am using Tailwindcss for the styling of the website. I really like the css framework, but one drawback is the lack of an icon pack.

Before I start using Tailwindcss I was using Bootstrap. Bootstrap ships with Font Awesome out of the box. I like the simplicity of the use of icons.

<i class="fas fa-user"></i>

With this simple html tag, you have a nice user icon.

Installation in Laravel with npm

I wanted Font Awesome in my Laravel project, but the installation was a little bit harder than I was expecting. There was not much documentation on this topic, that’s why I am writing this guide.

The first step is to install Font Awesome with npm.

npm install --save @fortawesome/fontawesome-free

The next step is to include the Font Awesome css in the app.scss file at the top.

@import '~@fortawesome/fontawesome-free/css/all.css';

This is where I struggled with the installatoin. I thought that it would work right now. So, I added the html class to my design. But it didn’t work…

After a long research on the web I saw this post on laracast.com. The only thing we must do is add the following line of code to the webpack.mix.js file.

mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');

That’s it! Now you can use the Font Awesome icons in your project.

Roundup

I hope you enjoyed this small post. If you want to see more, please subscribe. Follow me also on Twitter 😎.