Views - Laravel 12.x - The PHP Framework For Web Artisans
Views can be styled using css files, inline style attribute on html elements or preferably using class names provided by Tailwind. Check Tailwind’s documentations for more information:
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
CSS<head>
<!-- Link the CSS file -->
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</head>
<div class="card">
<h2 class="card-title">John Doe</h2>
<p class="card-description">A short description about John.</p>
</div>
.card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
max-width: 300px;
margin: 16px auto;
}
.card-title {
font-size: 1.5rem;
margin-bottom: 8px;
}
.card-description {
font-size: 1rem;
color: #555;
}
<div style="border: 1px solid #ccc; border-radius: 8px; padding: 16px; max-width: 300px; margin: 16px auto;">
<h2 style="font-size: 1.5rem; margin-bottom: 8px;">Jane Smith</h2>
<p style="font-size: 1rem; color: #555;">A short description about Jane.</p>
</div>
<div class="border border-gray-300 rounded-lg p-4 max-w-sm mx-auto">
<h2 class="text-xl mb-2">Alex Johnson</h2>
<p class="text-base text-gray-600">A short description about Alex.</p>
</div>
Components are reusable pieces of UI bundled together in a single file.
<div class="alert alert-{{ $type }}">
{{ $slot }}
</div>
Components can have props which are arguments. The $slot prop allows you to pass children to the component.
Components can be used in views using x-[component-name] tags:
<x-alert type="danger">Error occurred!</x-alert>
Layouts are base templates that other views can extend