頁面布局（下）：引入 Tailwind CSS 框架構建博客應用 UI 界面
在上篇教程中，學院君給大家演示了單頁面博客應用前端路由和頁面布局的基本構建，不過由于沒有應用任何 CSS 樣式代碼，所以 UI 界面很丑陋，今天，學院君將引入 Tailwind CSS 框架來美化這個博客應用的 UI 界面。
基于 Laravel Mix 引入 Tailwind
在 Laravel 項目中，我們可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架，開始之前，先安裝 laravel-mix-tailwind 這個前端依賴包：
npm install laravel-mix-tailwind --save-dev
安裝完成后，需要在項目根目錄下的 webpack.mix.js 中引入它：
const mix = require('laravel-mix');
require('laravel-mix-tailwind');
...
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.tailwind();
由于 laravel-mix-tailwind 依賴 tailwind.js，所以還需要通過如下命令初始化 Tailwind：
npx tailwindcss init
如果上述命令運行報錯，提示 Connot find module 'autoprefixer'：
可以通過升級 npm 版本（以 Mac 為例）來解決：
brew upgrade npm
再繼續(xù)運行初始化命令，就可以執(zhí)行成功了：
接下來，我們將 tailwind.config.js 重命名為 tailwind.js：
mv tailwind.config.js tailwind.js
然后在 resources/sass/app.scss 中移除 Bootstrap，引入 Tailwind：
...
// Bootstrap
//@import '~bootstrap/scss/bootstrap';
// Tailwind
@import "~tailwindcss/base";
@import "~tailwindcss/components";
@import "~tailwindcss/utilities";
最后運行如下命令重新編譯前端資源：
npm run watch
編譯成功，則表明 Tailwind CSS 框架已正常引入。
安裝 Tailwind 語法提示插件
我們將 resources/views 目錄下的 welcome.blade.php 重命名為 app.blade.php，并在 routes/web.php 中修改渲染該視圖模板的路由定義如下：
...
Route::get('/{any?}', function () {
return view('app');
});
另外，我們在 PhpStorm 插件市場中安裝下面這個 Tailwind 語法智能提示插件，從而提高編寫 Tailwind 樣式代碼的效率：
做好上述準備后，就可以基于 Tailwind CSS 框架重構博客應用前端頁面樣式代碼了。
純手工編寫 Tailwind 樣式代碼
你可以在 resources/views/app.blade.php 中仿照上篇教程給出的 WordPress 博客主題模板手動編寫和調試頁面布局樣式代碼如下：
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{ asset('/css/app.css') }}" rel="stylesheet">
</head>
<body class="font-sans">
<div id="app">
<div class="container px-8">
<main class="flex">
<!-- 側邊欄（導航菜單） -->
<aside class="w-1/5 pt-8">
<section class="mb-10">
<ul class="list-reset">
<h1 class="mb-4">
<img src="/images/logo.png" alt="學院君博客"/>
</h1>
<li class="leading-loose">
<router-link to="/">Home</router-link>
</li>
<li class="leading-loose">
<router-link :to="{ name: 'category', params: { name: 'php' }}">PHP</router-link>
</li>
<li class="leading-loose">
<router-link :to="{ name: 'category', params: { name: 'golang' }}">Golang</router-link>
</li>
<li class="leading-loose">
<router-link :to="{ name: 'category', params: { name: 'javascript' }}">Javascript</router-link>
</li>
<li class="leading-loose">
<router-link to="/about">About</router-link>
</li>
<li class="leading-loose">
<router-link to="/feedback">Feedback</router-link>
</li>
</ul>
</section>
</aside>
<!-- 主體內容 -->
<div class="primary pt-12">
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
<!-- 底部內容 -->
<footer></footer>
</main>
</div>
</div>
<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
然后在瀏覽器中刷新應用首頁，就可以看到如下布局視圖了，左側是菜單導航，右側是主體內容：
你如果喜歡自己倒騰和設計的話，可以結合 Chrome 開發(fā)者工具純手工逐步調試和編寫 Tailwind CSS 樣式代碼，不過如果你只是想快速完成功能，覺得這樣效率比較低，也可以像 Bootstrap 那樣去網上找開源代碼，然后復制粘貼過來，按照自己的業(yè)務需求進行微調即可。
基于開源的 Tailwind 組件快速完成功能
學院君這里就是從網上拷貝過來的不同組件源碼組合實現的博客頁面布局樣式。推薦一個不錯的 Tailwind 組件素材庫 —— Tailwind Components，在這里，你可以按需搜索自己想要的組件：
相應的源代碼都可以免費拷貝過來使用（不同于 Bootstrap，Tailwind 官方的 UI 庫收費，所以這個網站是個非常好的 Tailwind UI 素材庫替代方案）。
Tailwind 與 Bootstrap 相比另一個優(yōu)勢就是對于這些開源組件，不需要引入額外的 CSS 文件，只需要將 HTML 代碼拷貝過來，就可以直接生效了。
下面貼出學院君基于 Tailwind CSS 實現的博客應用頁面布局最終 UI 界面效果圖：
下面是相關的前端資源頁面，主要調整的是視圖模板 resources/views/app.blade.php，以及 resources/js/components 目錄下的 Vue 單頁面組件：
注意到我們這里新增了一個文章詳情頁命名路由：
{
path: '/post/:id',
name: 'post',
component: require('./components/Post').default
},
其實現和上篇教程介紹的分類頁面路由一樣，不再多做介紹了。
關于上述頁面布局和樣式代碼的實現，都已經提交這個 Github 代碼倉庫了：
https://github.com/nonfu/demo-spa.git
不再逐步演示貼出代碼了，都是些非常簡單的流程，如果你認真看過前面的 Vue 教程，很好理解。
本系列教程首發(fā)在Laravel學院（laravelacademy.org），你可以點擊頁面左下角閱讀原文鏈接查看最新更新的教程。