Laravel9.x 使用 Tailwind CSS 进行 CRUD 练习

作者: 温新

分类: 【Laravel】

阅读: 2050

时间: 2022-07-03 14:53:10

hi,我是温新,一名PHPer

克服恐惧,才能勇往直前

缘起。Laravel9.2 已经使用 Vite 进行前端的开发构建了。Laravel9官方文档中已经移除了Laravel Mix的相关介绍了。进行多了一个 laravel/breeze。默认使用 blade模板,而css则默认成了 Tailwind CSS

Tailwind CSS之前就有听说过,也看过,但是没有去使用过了。前端开发已经发生了翻天覆地的变化,这些变化进行影响到了后端的开发。

今天重新浏览了下 Tailwind CSS 并进行了下体验。下面使用 Laravel9Tailwind CSS 来做一个小小的关于文章的 CRUD 功能。

第一步:安装 Laravel 项目

<span style="color: rgb(255, 192, 0);">composer create-project laravel/laravel blog</span><br></br>

第二步:配置数据库 .env

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// .env</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_CONNECTION</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">mysql</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_HOST</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">127.0</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">0.1</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_PORT</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">3306</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_DATABASE</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">blog</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_USERNAME</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">blog</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_PASSWORD</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">blog</span></span>

第三步:Install Breeze For Tailwind CSS

安装 laravel/breeze

<span style="color: rgb(255, 192, 0);">composer require laravel/breeze --dev</span><br></br>

执行安装

<span style="color: rgb(255, 192, 0);">php artisan breeze:install</span><br></br>

安装依赖

<span style="color: rgb(255, 192, 0);">npm install && npm run dev</span> <br></br>

注意哦~,使用 breeze 会自动安装 auth 系统

npm run dev 后需要重新开一个窗口或终端本次运行,然后执行 migrate

执行迁移文件

<span style="color: rgb(255, 192, 0);">php artisan migrate</span><br></br>

第四步:创建资源路由

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// routes/web.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Support\Facades\Route</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">App\Http\Controllers\PostController</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">get</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'/dashboard'</span>, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">view</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'dashboard'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">})<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">middleware</span>([<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'auth'</span>])<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'dashboard'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">require</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">__DIR__</span>.<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'/auth.php'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">resource</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts'</span>,<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">PostController</span>::<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span>);</span>

第五步:创建 Post 控制器、模型、迁移文件

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"># 创建控制器、模型、迁移文件</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">artisan</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">make</span>:<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">model</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">mcr</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"># 创建 Post 表单验证器</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">artisan</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">make</span>:<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">request</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">PostRequest</span></span>

编写 post 文件文件,database/migrations/2022_07_03_131143_create_posts_table.php

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Database\Migrations\Migration</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Database\Schema\Blueprint</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Support\Facades\Schema</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">new</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">extends</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Migration</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">up</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Schema</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">create</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts'</span>, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> (<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Blueprint</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">bigIncrements</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'id'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">string</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'title'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">text</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'description'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">timestamps</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">down</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Schema</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">dropIfExists</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">};</span>

编写Post.php模型文件,app/Models/Post.php

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">namespace</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App\Models</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Database\Eloquent\Factories\HasFactory</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Database\Eloquent\Model</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Post</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">extends</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Model</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">HasFactory</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">protected</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$fillable</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> [<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'title'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'description'</span>];</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

编写 PostRequest.php 表单验证文件,app/Http/Requests/PostRequest.php

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">namespace</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App\Http\Requests</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Foundation\Http\FormRequest</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">PostRequest</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">extends</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">FormRequest</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">authorize</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">true</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">rules</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'title'</span>      <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> [<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'min:2'</span>],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'description'</span>   <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> [<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required'</span>]</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        ];</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

编写 PostController.phpapp/Http/Controllers/PostController.php

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">namespace</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App\Http\Controllers</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">App\Http\Requests\PostRequest</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">App\Models\Post</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Http\Request</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">PostController</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">extends</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Controller</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">index</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$posts</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">latest</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">paginate</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">view</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts.index'</span>, <span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">compact</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts'</span>));</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">create</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">view</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts.create'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">store</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">PostRequest</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">create</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">input</span>());</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">redirect</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">route</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts.index'</span>)<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">with</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'message'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Post Created Successfully'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">show</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">view</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts.show'</span>, <span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">compact</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'post'</span>));</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">edit</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">view</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts.edit'</span>, <span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">compact</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'post'</span>));</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">update</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">PostRequest</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">update</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">input</span>());</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">redirect</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">route</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts.index'</span>)<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">with</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'message'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'更新成功'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">destroy</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">delete</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">redirect</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">route</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts.index'</span>)<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">with</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'message'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'删除成功'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

第六步:Tailwind CSS 添加文章界面

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">resources</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">views</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">posts</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">create</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">组件形式继承</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">layouts</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">app</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">模板</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">app</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">layout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">使用带有名字为</span> <span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">header</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">的插槽</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">将内容填充至组件</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slot</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"header"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-xl font-semibold leading-tight text-gray-800"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">__</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Dashboard'</span>) }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slot</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">为</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">app</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">模板填充主体内容</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"font-sans antialiased"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex flex-col items-center min-h-screen pt-6 bg-gray-100 sm:justify-center sm:pt-0"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"w-full px-16 py-20 mt-6 overflow-hidden bg-white rounded-lg lg:max-w-4xl"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mb-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h1</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"font-serif text-3xl font-bold"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">创建文章</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h1</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"w-full px-6 py-4 bg-white rounded shadow-md ring-1 ring-gray-900/10"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">method</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"POST"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">action</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ route('posts.index') }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@csrf</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block text-sm font-medium text-gray-700"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"title"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">文章标题</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">input</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block w-full mt-1 border-gray-300 rounded-md shadow-sm placeholder:text-gray-400 placeholder:text-right focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"title"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">placeholder</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"180"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">value</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{old('title')}}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@error</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'title'</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-red-600 text-sm"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                {{ <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$message</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@enderror</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mt-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block text-sm font-medium text-gray-700"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"description"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">文章描述</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">textarea</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"description"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block w-full mt-1 border-gray-300 rounded-md shadow-sm placeholder:text-gray-400 placeholder:text-right focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">rows</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"4"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">placeholder</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"400"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span> {{<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">old</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'description'</span>)}}<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">textarea</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@error</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'description'</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-red-600 text-sm"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                {{ <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$message</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@enderror</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex items-center justify-start mt-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">button</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"submit"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"inline-flex items-center px-6 py-2 text-sm font-semibold rounded-md text-sky-100 bg-sky-500 hover:bg-sky-700 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">提交</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">button</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">app</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">layout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

第七步:Tailwind CSS 文章列表页面

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">resources</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">views</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">posts</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">index</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">blade</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">app</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">layout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slot</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"header"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-xl font-semibold leading-tight text-gray-800"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">__</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Dashboard'</span>) }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slot</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"container max-w-6xl mx-auto mt-20"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mb-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h1</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"font-serif text-3xl font-bold underline decoration-gray-400"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">文章列表</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h1</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@if</span> (<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">session</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">has</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'message'</span>))</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"p-3 rounded bg-green-500 text-green-100 my-2"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">session</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'message'</span>) }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@endif</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex justify-end"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ route('posts.create')}}"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-4 py-2 rounded-md bg-sky-500 text-sky-100 hover:bg-sky-600"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">添加文章</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex flex-col"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">table</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"min-w-full"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">thead</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tr</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">ID</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">文章标题</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">文章描述</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">创建时间</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-3 text-sm text-left text-gray-500 border-b border-gray-200 bg-gray-50"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">colspan</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"2"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">操作</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tr</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">thead</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tbody</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-white"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@foreach</span> (<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$posts</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">as</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tr</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-4 whitespace-no-wrap border-b border-gray-200"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex items-center"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        {{ <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-4 whitespace-no-wrap border-b border-gray-200"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-sm leading-5 text-gray-900"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        {{ <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-4 whitespace-no-wrap border-b border-gray-200"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    {{ <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">description</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-4 text-sm leading-5 text-gray-500 whitespace-no-wrap border-b border-gray-200"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span> {{ <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">created_at</span> }}<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-sm font-medium leading-5 text-center whitespace-no-wrap border-b border-gray-200 "</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ route('posts.edit', </span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>-><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">) }}"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-indigo-600 hover:text-indigo-900"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">svg</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">xmlns</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"http://www.w3.org/2000/svg"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"w-6 h-6"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">fill</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"none"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">viewBox</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"0 0 24 24"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">stroke</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"currentColor"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">path</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">stroke</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">linecap</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"round"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">stroke</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">linejoin</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"round"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">stroke</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">width</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"2"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">d</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">svg</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-sm font-medium leading-5 whitespace-no-wrap border-b border-gray-200 "</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">action</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ route('posts.destroy',</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>-><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">) }}"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">method</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"POST"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">onsubmit</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"return confirm('{{ trans('are You Sure ? ') }}');"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">input</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"hidden"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"_method"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">value</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"DELETE"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">input</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"hidden"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"_token"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">value</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ csrf_token() }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">button</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"submit"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex items-center"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">svg</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">xmlns</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"http://www.w3.org/2000/svg"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                            <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"w-6 h-6 text-red-600 hover:text-red-800 cursor-pointer"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">fill</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"none"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">viewBox</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"0 0 24 24"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">stroke</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"currentColor"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">path</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">stroke</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">linecap</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"round"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">stroke</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">linejoin</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"round"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">stroke</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">width</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"2"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">d</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">svg</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">button</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tr</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@endforeach</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tbody</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">app</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">layout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

第八步:Tailwind CSS 文章编辑页面

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">resources</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">views</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">posts</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">edit</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">blade</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">app</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">layout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slot</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"header"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-xl font-semibold leading-tight text-gray-800"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">__</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Dashboard'</span>) }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slot</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"font-sans antialiased"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex flex-col items-center min-h-screen pt-6 bg-gray-100 sm:justify-center sm:pt-0"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"w-full px-16 py-20 mt-6 overflow-hidden bg-white rounded-lg lg:max-w-4xl"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mb-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h1</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"font-serif text-3xl font-bold"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">更新文章</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h1</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"w-full px-6 py-4 bg-white rounded shadow-md ring-1 ring-gray-900/10"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">method</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"POST"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">action</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ route('posts.update',</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>-><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">) }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@csrf</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@method</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'PUT'</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block text-sm font-medium text-gray-700"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"title"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">文章标题</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">input</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block w-full mt-1 border-gray-300 rounded-md shadow-sm placeholder:text-gray-400 placeholder:text-right focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"title"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">placeholder</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"180"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">value</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{old('title',</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>-><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">)}}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@error</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'title'</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-red-600 text-sm"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                {{ <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$message</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@enderror</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mt-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block text-sm font-medium text-gray-700"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"description"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">文章描述</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">textarea</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"description"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block w-full mt-1 border-gray-300 rounded-md shadow-sm placeholder:text-gray-400 placeholder:text-right focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">rows</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"4"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">placeholder</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"400"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span> {{<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">old</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'description'</span>,<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">description</span>)}}<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">textarea</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@error</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'description'</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-red-600 text-sm"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                {{ <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$message</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@enderror</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex items-center justify-start mt-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">button</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"submit"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"inline-flex items-center px-6 py-2 text-sm font-semibold rounded-md text-sky-100 bg-sky-500 hover:bg-sky-700 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">更新</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">button</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">x</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">app</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">layout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

就这样,一个简单的,关于 Tailwind CSS 的小练习就操作完啦!样式挺好看的,一起来玩吧!

请登录后再评论