昨天我們完成了article所有的功能，不知道大家對laravel的運行以及一對多的關係有沒有更多的了解呢？經過這幾天比較複雜的介紹，我們今天要介紹比較輕鬆的前端。
首先是在我們的首頁，有沒有覺得那些按鈕的排版不是這麼的整齊，會讓畫面有些混亂，一般的網頁好像不是這樣的，所以我們先將他們改的稍為整潔吧。

我們先到 resources\views\articles\index.blade.php，將原本判斷是否為作者的判斷式裡面的button改掉。我們將它改成三個點，然後將原本的資料隱藏在那三個點之下，用laravel原本就有的component dropdown-link ，放原本button的資料。

 @if ($article->user->is(auth()->user()))
    <x-dropdown>
        <x-slot name="trigger">
            <button>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
                </svg>
            </button>
        </x-slot>
        <x-slot name="content">
            <x-dropdown-link :href="route('articles.edit', $article)">
                {{ __('修改') }}
            </x-dropdown-link>
            <form method="POST" action="{{ route('articles.destroy', $article) }}">
                @csrf
                @method('delete')
                <x-dropdown-link :href="route('articles.destroy', $article)" onclick="event.preventDefault(); this.closest('form').submit();">
                    {{ __('刪除') }}
                </x-dropdown-link>
            </form>                          
        </x-slot>
    </x-dropdown>
@endif

完成後的畫面應該像這樣，是不是整個畫面看起來清爽很多，但是又可以保留他原來的功能，這可能就是前端的魔法吧。

接著我們來介紹一些常用的Tailwind Css，除了上次那些介紹的基本屬性，包括背景、字的顏色、padding之類的，其實還有許多可以讓你微調你的畫面。

• 字體大小
  你可能會發現為甚麼以前習慣的h1、h2好像用在laravel中都沒什麼效果，是因為tailwind css將h1至h6的字體大小改成了預設大小，但同時也給予了我們更大的空間去調整我們的字體大小。
  • text-sm： font-size： 0.875rem; /* 14px */
  • text-lg： font-size: 1.125rem; /* 18px */

還有許多大小可至(https://tailwindcss.com/docs/font-size )去查看。

• 字體粗細
  有字體大小當然也有粗細，粗細也有著很精細的調整。
  • font-light： font-weight: 300;
  • font-semibold： font-weight: 600;
  • font-bold： font-weight: 700;

還有許多粗細可至(https://tailwindcss.com/docs/font-weight )去查看。

• 字體位置
  位置也是網頁一個很重要的點，他可以說是掌管著整個網頁的和諧，還有閱讀動線。
  • text-center：這就是我們最經常用到的置中
  • text-right：從右邊開始，若是你沒有特別寫預設就是從左邊
  • text-justify：這個比較特別他是計算你左右兩邊，然後平均將字放在這其中。

還有許多位置介紹可至(https://tailwindcss.com/docs/text-align )去查看。

• flex
  這也是我們經常用的屬性，他可以將原本是上下擺的物件放在同一行。
  我們在寫標題的前端時也有用到 <div class="flex justify-between items-center">，他的justify意思和上面一樣，後面的意思應該也很好懂，若是有需要也可以嘗試用flex，他也有不同屬性可以去官方網站看看。

在寫前端時總覺得這很像一種佛法，只要小小的指令就可以讓整個網站樣貌大不同，但在寫前端時找資料也較困難，因為有時很難精準描述自己所需要的樣子，在查資料時需要多一些的耐心。那我們今天就先到這邊吧，今天相較於明天和昨天都簡單許多，大家就將介紹前端的日子當作喘一口氣吧，明天我們要開始學不同於article的新東西，不能學完article的功能就臨陣逃跑喔！明天見，掰掰！