 1const defaultTheme = require('tailwindcss/defaultTheme');
 2const colors = require('tailwindcss/colors')
 3
 4
 5/** @type {import('tailwindcss').Config} */
 6module.exports = {
 7    content: [
 8        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
 9        './vendor/laravel/jetstream/**/*.blade.php',
10        './storage/framework/views/*.php',
11        './resources/views/**/*.blade.php',
12        './vendor/filament/**/*.blade.php',
13    ],
14
15    theme: {
16        extend: {
17            fontFamily: {
18                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
19            },
20            colors: {
21                primary: colors.green,
22                danger: colors.rose,
23                success: colors.green,
24                warning: colors.yellow,
25            }
26        },
27    },
28
29    plugins: [
30        require('@tailwindcss/forms'),
31        require('@tailwindcss/typography')
32    ],
33};

Tailwind.config.js Documentation 📚

This documentation provides an overview of the tailwind.config.js file, which is used to configure the Tailwind CSS framework for your project. This file demonstrates how to extend the default theme, add custom colors, and include plugins.

Content 📄

The content array specifies the file paths where the markup using Tailwind CSS classes is located. This allows Tailwind to remove any unused styles and optimize the file size.

 1content: [
 2    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
 3    './vendor/laravel/jetstream/**/*.blade.php',
 4    './storage/framework/views/*.php',
 5    './resources/views/**/*.blade.php',
 6    './vendor/filament/**/*.blade.php',
 7],

Theme 🎨

The theme object is used to extend the default theme configurations. You can override or extend the default styling options provided by Tailwind CSS.

Extending the Font Family ✍️

The fontFamily object is used to override the default sans-serif font family. Here, 'Nunito' font is added to the sans list:

 1fontFamily: {
 2    sans: ['Nunito', ...defaultTheme.fontFamily.sans],
 3},

Custom Colors 🌈

The colors object is used to customize the colors available in the Tailwind CSS framework. In this example, four colors are being defined with their respective names:

Name	Color
primary	colors.green
danger	colors.rose
success	colors.green
warning	colors.yellow

 1colors: {
 2    primary: colors.green,
 3    danger: colors.rose,
 4    success: colors.green,
 5    warning: colors.yellow,
 6}

Plugins 🔌

The plugins array is used to include additional plugins to Tailwind CSS. In this example, the following plugins are included:

@tailwindcss/forms: A plugin that provides form control styling.
@tailwindcss/typography: A plugin that provides out-of-the-box typography styles and utilities.

 1plugins: [
 2    require('@tailwindcss/forms'),
 3    require('@tailwindcss/typography')
 4],

 1<?php
 2
 3namespace App\Models;
 4
 5use Illuminate\Database\Eloquent\Factories\HasFactory;
 6use Illuminate\Foundation\Auth\User as Authenticatable;
 7use Illuminate\Notifications\Notifiable;
 8use Laravel\Fortify\TwoFactorAuthenticatable;
 9use Laravel\Jetstream\HasProfilePhoto;
10use Laravel\Jetstream\HasTeams;
11use Laravel\Sanctum\HasApiTokens;
12use Spark\Billable;
13
14class Uuser extends Authenticatable
15{
16    use Billable;
17    use HasApiTokens;
18    use HasFactory;
19    use HasProfilePhoto;
20    use HasTeams;
21    use Notifiable;
22    use TwoFactorAuthenticatable;
23
24    /**
25     * The attributes that are mass assignable.
26     *
27     * @var string<int, string>
28     */
29    protected $fillable = [
30        'name', 'email', 'password',
31    ];
32
33    /**
34     * The attributes that should be hidden for serialization.
35     *
36     * @var array<int, string>
37     */
38    protected $hidden = [
39        'password',
40        'remember_token',
41        'two_factor_recovery_codes',
42        'two_factor_secret',
43    ];
44
45    /**
46     * The attributes that should be cast.
47     *
48     * @var array<string, string>
49     */
50    protected $casts = [
51        'email_verified_at' => 'datetime',
52    ];
53
54    /**
55     * The accessors to append to the model's array form.
56     *
57     * @var array<int, string>
58     */
59    protected $appends = [
60        'profile_photo_url',
61    ];
62
63    public function generations()
64    {
65        return $this->hasMany(Generation::class);
66    }
67}

User.php Documentation

The User.php file is a PHP class that defines the User model and its various properties and methods. This class extends the Authenticatable class and makes use of several Laravel packages to handle features like API tokens, user factories, profile photos, teams, notifications, two-factor authentication, and billing.

Class Definition
Traits
Fillable Attributes
Hidden Attributes
Casts
Appends
Relationships

Class Definition

 1class User extends Authenticatable

The User class extends the Authenticatable class provided by the Laravel framework.

Traits

The User class makes use of several traits:

HasApiTokens: For managing API tokens 🎟
HasFactory: For generating factory instances 🏭
HasProfilePhoto: For handling user profile photos 📸
HasTeams: For managing user team associations 🎽
Notifiable: For sending notifications 📬
TwoFactorAuthenticatable: For managing two-factor authentication 🔒
Billable: For handling billing and subscriptions 💳

Fillable Attributes

The following attributes can be mass-assigned:

Attribute	Description
`name`	The user's name
`email`	The user's email address
`password`	The user's password

Hidden Attributes

The following attributes are hidden for serialization:

Attribute	Description
`password`	The user's password
`remember_token`	The user's remember me token
`two_factor_recovery_codes`	The user's two-factor recovery codes
`two_factor_secret`	The user's two-factor secret

Casts

The following attributes have casting rules applied:

Attribute	Data Type
`email_verified_at`	`datetime`

Appends

The following accessors are appended to the model's array form:

Accessor	Description
`profile_photo_url`	The URL for the user's profile photo

Relationships

The User class has the following relationships:

generations(): A one-to-many relationship with the Generation model. A user can have multiple generations.

 1<?php
 2
 3namespace App\Livewire;
 4
 5use App\Models\NewsletterSubscriber;
 6use Filament\Notifications\Notification;
 7use Illuminate\Support\Facades\Validator;
 8use Livewire\Component;
 9
10class LandindNewsletterComponent extends Component
11{
12    public $email;
13
14    public function subscribe()
15    {
16        $validator = Validator::make(
17            ['email' => $this->email],
18            ['email' => 'required|email|unique:newsletter_subscribers,email'],
19        );
20
21        if ($validator->fails()) {
22            Notification::make()
23                ->title($validator->errors()->first())
24                ->danger()
25                ->send();
26
27            return;
28        }
29
30        NewsletterSubscriber::create([
31            'email' => $this->email,
32        ]);
33
34        Notification::make()
35            ->title('You have been subscribed to the waitlist 🚀')
36            ->success()
37            ->send();
38
39        $this->email = '';
40    }
41
42    public function render()
43    {
44        return view('livewire.landind-newsletter-component');
45    }
46}

Test Framework: PHPUnit

Description:

📝 This test suite consists of three test cases for the LandindNewsletterComponent class in the Livewire namespace:

Test Empty Email: 📧 Check if the subscription method properly handles an empty email
Test Invalid Email: ❌ Validate the response when an invalid email address is passed
Test Valid Email: ✅ Ensure that a valid email is successfully added to the newsletter subscribers

Test Code:

 1<?php
 2
 3namespace Tests\Unit;
 4
 5use App\Livewire\LandindNewsletterComponent;
 6use App\Models\NewsletterSubscriber;
 7use Illuminate\Foundation\Testing\RefreshDatabase;
 8use Livewire\Livewire;
 9use Tests\TestCase;
10
11class LandingNewsletterComponentTest extends TestCase
12{
13    use RefreshDatabase;
14
15    /** @test */
16    public function it_does_not_allow_empty_email()
17    {
18        Livewire::test(LandindNewsletterComponent::class)
19            ->set('email', '')
20            ->call('subscribe')
21            ->assertHasErrors(['email' => 'required']);
22    }
23
24    /** @test */
25    public function it_does_not_allow_invalid_email()
26    {
27        Livewire::test(LandindNewsletterComponent::class)
28            ->set('email', 'not-an-email')
29            ->call('subscribe')
30            ->assertHasErrors(['email' => 'email']);
31    }
32
33    /** @test */
34    public function it_allows_valid_email()
35    {
36        Livewire::test(LandindNewsletterComponent::class)
37            ->set('email', '[email protected]')
38            ->call('subscribe')
39            ->assertHasNoErrors();
40
41        $this->assertDatabaseHas('newsletter_subscribers', [
42            'email' => '[email protected]',
43        ]);
44    }
45}

This PHPUnit test suite includes the RefreshDatabase trait to reset the database after each test and uses the Livewire facade to create a new instance of the LandindNewsletterComponent for each test. It uses the set method to assign an email value and the call method to trigger the subscribe method. Assertions check for validation errors and whether a valid email was added to the database.