在 Laravel 中使用 Tailwind CSS

Tailwind Tailwind 是新的 CSS 實用程序框架，它很快成爲我最喜歡的構建界面的方法。通常，嘗試一個新的框架、包或語言的最困難的部分是建立起來。

建造 Tailwind 的人做了一項令人難以置信的工作，記錄了這個過程，而且非常容易做到。但是，有時還是很高興看到別人是怎麼做到的。所以，讓我們跳進去看看是怎麼做到的。

入門

首先，假設我們開始一個新的 Laravel 項目。我不會去介紹咋麼設置它，你可以參考文檔點擊這裏。完成 Laravel 的所有設置之後，讓我們看 Tailwind 的安裝文檔點擊這裏.

在他們的文檔，可以看到，最簡單的方法就是把 CDN 放到你的項目中，然後開始編碼。這是很好的嘗試，讓我們進一步把它應用到我們的構建過程中。

安裝

我們可以使用 NPM 或者 Yarn 命令把 Tailwind 拉到我們的項目中。

# 使用 npm
npm install tailwindcss --save-dev
# 使用 Yarn
yarn add tailwindcss --dev
當包拖入到我們的項目中，我們可以生成 Tailwind 的配置文件。我們可以隨意調用配置文件， 我們將其稱爲 tailwind.js。現在，我們可以在項目根目錄下運行以下命令。
./node_modules/.bin/tailwind init tailwind.js
Configuration
配置真的是小菜一碟，在項目的根路徑中我們已經有了一個配置文件。打開並且查看它，你會發現，Tailwind 團隊已經在文檔註釋和解析配置用途方面做出了出色的工作，你可以添加顏色，調整斷點，間距等等。你會感覺到保持全局風格一致性是多麼容易的事情啊！
讓我們打開 resources/assets/sass 目錄，laravel 已經包含了一些開箱即用的默認文件，你可以忽略並且刪除它們，如果你想這麼做的話。
Sass Setup
在當前目錄中，我們可以創建 index.sass 文件（你可以任意命名這個文件，只是不要把它命名爲 “late for dinner”！），現在，我們將會從 Tailwind 中複製以下代碼
/**
 * 這個注入了Tailwind 的基本樣式, 它混合了Normalize.css和一些額外的基本樣式
 *
 * 你可以在以下鏈接中看到這些樣式:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */
@tailwind preflight;
/**
 * 在這裏你可以添加任何自定義的組件類; 任何你想要在實用類加載之前加載的東  西都可以定義在這裏，以便他們仍然可以被實用類覆蓋
 *
 * 例如:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * 或者是否使用前置處理器:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */
/**
 * 這個注入了Tailwind所有的實用類，它的產生依賴於你的配置文件
 */
@tailwind utilities;
/**
 * 這裏你可以添加任何自定義的實用類，他們不隨着Tailwind開箱即用
 *
 * 例如 :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * 或者是否使用前置處理器..
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

注意到在 @tailwind 導入的末尾有分號。刪除它們。在這一點上，如果你正在使用 PHPStorm, 您可能會注意到，文件結構上遍佈一堆紅線，不要擔心，你可以忽略它們或者找到一種方式將它們關閉。如果你找到了一種將它們關閉的方式，請寫一篇教程告訴我；).

這是主 sass 文件，我們可以導入我們自定義的 sass 文件，同時在構建過程中可以把它們導出到 public/css 文件夾下面。在導入你自定義的 sass 文件的時候，一定要遵循導入的順序，以避免你自定義的 css 被覆蓋的問題。

構建過程

在構建過程中添加 Tailwind。打開 webpack.mix.js 文件。在頂部，右下方 let mix = require('laravel-mix'); 添加 let tailwindcss = require('tailwindcss');.

現在，在我們的 mix 中，你可以像這樣修改默認的 .sass 選項 (注意：如果你沒有命名你的主 Sass 文件 index.sass 請確保在這更新它):

mix.js('resources/assets/js/app.js', 'public/js')
 .sass('resources/assets/sass/index.sass', 'public/css/app.css')
 .options({
 processCssUrls: false,
 postCss: [ tailwindcss('./tailwind.js') ],
 });

當前 Minx 依賴項存在未解決的問題。我們要將 Sass 和 Tailwind 一起使用，並且需要禁用 processCssUrls。更多信息請參考文檔。點擊這裏.

最後，運行 npm run prod 將 Tailwind 編譯到 CSS 中。

結束

在你的模板文件，現在你可以添加 <link href="{{ asset('css/app.css') }}" rel="stylesheet"> 到你的 head 標籤，並且開始使用 Tailwind 快速構建響應式 UI。

我的官方羣點擊此處。鏈接加入羣聊【PHP/web/高級學習交流羣】,一起學習，相互討論。

羣內已經有管理將知識體系整理好（源碼，學習視頻等資料），歡迎加羣免費領取。

這套精品PHP教程絕不是市場上的那些妖豔賤貨可比，作爲web開發的佼佼者PHP並不遜色其他語言，加上Swoole後更加是如虎添翼！進軍通信、物聯網行業開發百度地圖、百度訂單中心、虎牙、戰旗TV等！寒冬裁員期過後正是各大企業擴大招人的時期，現在市場初級程序員氾濫，進階中高級程序員絕對是各大企業急需的人才，這套學習教程適合那些1-5年以內的PHP開發者正處於瓶頸期，想要突破自己進階中高級、架構師！名額有限，先到先得！

八重櫻：騰訊T3-T4標準精品PHP架構師教程目錄大全，只要你看完保證薪資上升一個臺階（持續更新）zhuanlan.zhihu.com