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

建造 Tailwind 的人做了一項(xiàng)令人難以置信的工作，記錄了這個(gè)過程，而且非常容易做到。但是，有時(shí)還是很高興看到別人是怎么做到的。所以，讓我們跳進(jìn)去看看是怎么做到的。

入門

首先，假設(shè)我們開始一個(gè)新的 Laravel 項(xiàng)目。 我不會(huì)去介紹咋么設(shè)置它，你可以參考文檔 點(diǎn)擊這里。完成 Laravel 的所有設(shè)置之后，讓我們看 Tailwind 的安裝文檔 點(diǎn)擊這里.

在他們的文檔，可以看到，最簡單的方法就是把 CDN 放到你的項(xiàng)目中，然后開始編碼。 這是很好的嘗試，讓我們進(jìn)一步把它應(yīng)用到我們的構(gòu)建過程中。

安裝

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

# 使用 npm npm install tailwindcss --save-dev # 使用 Yarn yarn add tailwindcss --dev 當(dāng)包拖入到我們的項(xiàng)目中，我們可以生成 Tailwind 的配置文件。我們可以隨意調(diào)用配置文件， 我們將其稱為 tailwind.js?，F(xiàn)在，我們可以在項(xiàng)目根目錄下運(yùn)行以下命令。 ./node_modules/.bin/tailwind init tailwind.js Configuration 配置真的是小菜一碟，在項(xiàng)目的根路徑中我們已經(jīng)有了一個(gè)配置文件。打開并且查看它，你會(huì)發(fā)現(xiàn)，Tailwind 團(tuán)隊(duì)已經(jīng)在文檔注釋和解析配置用途方面做出了出色的工作，你可以添加顏色，調(diào)整斷點(diǎn)，間距等等。你會(huì)感覺到保持全局風(fēng)格一致性是多么容易的事情啊！ 讓我們打開 resources/assets/sass 目錄，laravel 已經(jīng)包含了一些開箱即用的默認(rèn)文件，你可以忽略并且刪除它們，如果你想這么做的話。 Sass Setup 在當(dāng)前目錄中，我們可以創(chuàng)建 index.sass 文件（你可以任意命名這個(gè)文件，只是不要把它命名為 “l(fā)ate for dinner”！），現(xiàn)在，我們將會(huì)從 Tailwind 中復(fù)制以下代碼 /**  * 這個(gè)注入了Tailwind 的基本樣式, 它混合了Normalize.css和一些額外的基本樣式  *  * 你可以在以下鏈接中看到這些樣式:  * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css  */ @tailwind preflight; /**  * 在這里你可以添加任何自定義的組件類; 任何你想要在實(shí)用類加載之前加載的東  西都可以定義在這里，以便他們?nèi)匀豢梢员粚?shí)用類覆蓋  *  * 例如:  *  * .btn { ... }  * .form-input { ... }  *  * 或者是否使用前置處理器:  *  * @import "components/buttons";  * @import "components/forms";  */ /**  * 這個(gè)注入了Tailwind所有的實(shí)用類，它的產(chǎn)生依賴于你的配置文件  */ @tailwind utilities; /**  * 這里你可以添加任何自定義的實(shí)用類，他們不隨著Tailwind開箱即用  *  * 例如 :  *  * .bg-pattern-graph-paper { ... }  * .skew-45 { ... }  *  * 或者是否使用前置處理器..  *  * @import "utilities/background-patterns";  * @import "utilities/skew-transforms";  */

注意到在 @tailwind 導(dǎo)入的末尾有分號(hào)。刪除它們。在這一點(diǎn)上，如果你正在使用 PHPStorm, 您可能會(huì)注意到，文件結(jié)構(gòu)上遍布一堆紅線， 不要擔(dān)心，你可以忽略它們 或者找到一種方式將它們關(guān)閉。如果你找到了一種將它們關(guān)閉的方式，請(qǐng)寫一篇教程告訴我；).

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

構(gòu)建過程

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

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

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') ],     });

當(dāng)前 Minx 依賴項(xiàng)存在未解決的問題。我們要將 Sass 和 Tailwind 一起使用，并且需要禁用 processCssUrls。