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 中。
結束
在你的模板文件，現在你可以添加 到你的 head 標簽，并且開始使用 Tailwind 快速構建響應式 UI。
推薦教程：《Laravel教程》
