首頁  >  文章  >  php框架  >  在 Laravel 中使用 Tailwind CSS

在 Laravel 中使用 Tailwind CSS

Guanhui
Guanhui轉載
2020-06-12 18:15:154175瀏覽

在 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 中。

結束

在你的範本文件,現在可以加上ccf542603a9df33b7aa80081e99868bb 到你的head 標籤,並且開始使用Tailwind 快速建立響應式UI。

推薦教學:《Laravel教學

以上是在 Laravel 中使用 Tailwind CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:learnku.com。如有侵權,請聯絡admin@php.cn刪除