Building Reactive Apps with Svelte and Tailwind/

...

/

Styling the Details View with Tailwind

Styling the Details View with Tailwind

Learn how to use Tailwind to style the Details view with only a handful of classes.

We'll cover the following...

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>
Style the FormSection component

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 ...