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');.

ここで、ミックスでは、次のようにデフォルトを変更できます。 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 の依存関係には現在未解決の問題があります。 Tailwind で Sass を使用する予定なので、processCssUrls を無効にする必要があります。詳細については、ドキュメントを参照してください。ここをクリックしてください。

最後に、npm run prod を実行して、Tailwind を CSS にコンパイルします。

End

テンプレート ファイルに f8dcf0baeee70ccb018dac5b644d2c7d を追加し、Tailwind を使用して応答性の高い UI をすばやく構築します。

推奨チュートリアル: 「Laravel チュートリアル 」

以上がLaravel で Tailwind CSS を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。