Styling the Details View with Tailwind
Explore how to apply Tailwind CSS to style the Details view in your application. Learn to add spacing, typography, and layout with padding, borders, flexbox, and colors for form sections, inputs, labels, and text areas. This lesson helps you understand practical Tailwind usage to build a clean and responsive details interface.
In the previous lesson, we left the application in a state where we had all the necessary fields, but they needed to be styled. In this lesson, we’re going to be focusing on Tailwind and how to style the different components. As in the previous lesson, let’s go in the same order and start with the FormSection component:
<script>
import { navigate } from 'svelte-routing'
import { state } from '../state'
import Header from '../components/Header.svelte'
import FormSection from '../components/FormSection.svelte'
import Input from '../components/Input.svelte'
import TextArea from '../components/TextArea.svelte'
export let id;
const student = $state.students.find(student => [id, Number(id)].includes(student.id));
if (!student) {
navigate('/');
}
</script>
<Header student={student} />
<FormSection title={`Student Information (#${student.id})`}>
<div>
<Input value={student.name} label="Student name" onKeyUp={() => {}} />
<span>
Age: {student.age},
score: <strong>{student.score}</strong>
</span>
</div>
</FormSection>
<FormSection title="Contact Information">
<div>
<Input value={student.phone} label="Phone number" onKeyUp={() => {}} />
<Input value={student.email} label="Email address" onKeyUp={() => {}} />
</div>
</FormSection>
<FormSection title="Notes">
<TextArea value={student.note} label="Put your notes here" onKeyUp={() => {}} />
</FormSection>
<FormSection title="Registration Details">
<div>
<div>
<span>Registered on</span>
<span>{student.registered.split('T')[0]}</span>
</div>
<div>
<span>Active student</span>
<input type="checkbox" checked={student.isActive} on:change={() => {}} />
</div>
</div>
</FormSection>
We have two empty class attributes, one for h2 and one for the div wrapping the slot. For the heading, we want to apply the following styles with Tailwind:
Spacing: A vertical padding of 0.5rem (8px) and a left padding of 3rem (48px)
Font: Large text with a bold font
Colors: Gray text with a light background, and a top and bottom border
For the div, we only need to apply some ...