Deep Personalization

As deep personalization consists of having absolute control over the component, the idea behind this form of personalization is to overwrite the original TallStackUI component class, which is why more technical knowledge is necessary. Let's take look at an example:

1. Create a Blade component:

php artisan make:component Input

2. Edit the TallStackUI configuration file by replacing the original component class with your component:

/*
|--------------------------------------------------------------------------
| Components List
|--------------------------------------------------------------------------
|
| List of all TallStackUi components.
*/
'components' => [
    // ...
 
    'input' => Components\Form\Input::class, 
    'input' => \App\View\Components\Input::class, 
 
    // ...
],

3. In your component, extends the original TallStackUI component class:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class Input extends \TallStackUi\View\Components\Form\Input 
{
    //
}

4. In your component, override the personalization method:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class Input extends \TallStackUi\View\Components\Form\Input
{
    public function personalization(): array 
    {
        return [/* ... */];
    }
}

Every component that can be personalized has a method called personalization , which is where the classes come from. This method must return an array with the name of the personalize blocks and their respective values which must be the TailwindCSS classes to be applied. To learn about personalize blocks, visit the documentation for the component you are personalizing.

Just like soft personalization, if you are using deep personalization to personalize components that have replaced the original component classes, you must have TailwindCSS be able to track and build the CSS classes defined in your components' PHP files. Edit your tailwind.config.js file with the following content:

content: [
    // ...
 
    './app/View/Components/**/*.php', 
],

You can also edit the Blade files of TallStackUI components by publishing them to your application level. This will allow you to customize the HTML content of the components. Use this command to deploy the Blade files:

php artisan vendor:publish --tag=tallstackui.views

While this means you have the freedom to edit whatever you want - adding or removing divs, p tags, h1 tags, etc., you need to keep in mind that any updates you make that make changes to the HTML of the components will require you to republish the Blade files and add your own personalization.

Also, when publishing Blade files you may notice some peculiar things, such as: 99% of the files only have one php block at the top of the file, or certain variables that may not seem defined anywhere, such as $colors and $configurations . This is a result of a new internal concept created in version 2.x to ensure that you can change anything in the Blade files without necessarily having to worry about maintaining possible logic coming from php/endphp blocks. All you have to do is preserve the use of any existing variables - mentioned here, in their specific current locations.