[sourcecode language=”plain”]npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
[/sourcecode]

This will create tailwind.config.js file in the root directory of your project and basically  is a file where you want to extend styles, create styles, install plugins and add configuration of tailwind purge and by default the file looks like,

[sourcecode language=”js”]module.exports = {
content: [
“./resources/**/*.blade.php”,
“./resources/**/*.js”,
“./resources/**/*.vue”,
],
theme: {
extend: {},
},
plugins: [],
}
[/sourcecode]

so in the content it will look for any file ends with .blade, .vue or .js and will  look the classes within these files and not eliminate them in the production css file.

Next we need to acquire tailwind css within the webpack.mix.js file so insert this into your webpack.mix.js file like,

[sourcecode language=”js”]mix.js(“resources/js/app.js”, “public/js”)
.postCss(“resources/css/app.css”, “public/css”, [
require(“tailwindcss”),
]);
[/sourcecode]

Next copy the following code into your app.css file which is located in resources/css/app.css and run npm watch command

[sourcecode language=”css”]
@tailwind base;
@tailwind components;
@tailwind utilities;
[/sourcecode]

As the tailwind is installed now the last thing before we go to actual coding to include the following code into your main page layout like app.blade.php or whatever your main layout file will be.

[sourcecode language=”plain”]

[/sourcecode]

Now we will have to install Laravel Livewire with the following command,
[sourcecode language=”plain”]
composer require livewire/livewire
[/sourcecode]
and include the following into your root file, in our case it is app.blade.php
[sourcecode language=”html”]
@livewireStyles

@livewireScripts

[/sourcecode]
now that Livewire and tailwind are installed and configured next we want to seed some fake entries to the user table and we will use factory for this purpose.
By default there is user factory in the migration directory so we just want to use that in our DatabaseSeeder.php it like this,
[sourcecode language=”php”]
User::factory(1000)->create();
[/sourcecode]
and then run the following command to migrate the tables into your database and the seed the data.
[sourcecode language=”php”]
php artisan migrate –seed
[/sourcecode]
Now we want to create a livewire component with the following command,
[sourcecode language=”php”]
php artisan make:livewire Users
[/sourcecode]
This command will create two files Users.php as a users class and Users.blade.php as view component.

Now that we have seeded the data and created livewire component let’s create a route in web.php file as,
[sourcecode language=”php”]
use App\Http\Livewire\Users;
Route::get(‘/’, Users::class);
[/sourcecode]

you can do whatever you like to redirect your route. For the simplicity I redirected the main base route to the livewire component class.

Now paste the following code in app.blade.php and leave it as it is,
[sourcecode language=”php”]

@livewireStyles

@livewireScripts

[/sourcecode]
This is the same app.blade.php file I just inserted some code.
The slot variable is the variable with with which the livewire component data will be slotted.

Now paste the following code to the Livwire component class which is app/Livewire directory Users.php as,

[sourcecode language=”php”]
loadrecords += 15;
}

public function mount()
{
$this->totalRecords = User::count();
}

public function render()
{
return view(‘livewire.users’)
->with(
‘users’,
User::orderBy(‘created_at’, ‘desc’)
->limit($this->loadrecords)
->get()
);
}
}
[/sourcecode]

And paste the following code in Users.blade.php
[sourcecode language=”php”]

[/sourcecode]

Now that our code is completed lets explain what actaully is doing,
The render function just take the records from users tables that we seeded by the limit of 15 as we have passed loadrecords variable to the limit function.
In the blade component there is if condition if the record will be last then we assign the id to the table tr as last_record with which we will observe the scroll observer.
In the script we take the last record element as it will only be 1 at time on the screen, we then define our options which are,
root, that is used as the viewport for checking the visibility of the target which is must be the ancestor of the target default to the browser viewport if nor specified or null and we have set it to null so the target is browser viewport which means if the last element will come to viewport the observer will be triggered,
threshold is either a single number or array of numbers which indicates at what percentage of the target visibility the observer call back should be executed, in our case 1 means if 100 percent of the target is visible within the element specified by the root option the callback will be invoked.
Thank you reading this and I hope you must have learned something new or has solved your problem.