Verwenden von Tailwind CSS mit Laravel

Tailwind Tailwind ist ein neues CSS-Utility-Framework, das schnell zu meiner Lieblingsmethode zum Erstellen von Schnittstellen geworden ist. Der schwierigste Teil beim Ausprobieren eines neuen Frameworks, Pakets oder einer neuen Sprache besteht oft darin, es einzurichten.

Die Leute, die Tailwind entwickelt haben, haben unglaubliche Arbeit geleistet und den Prozess dokumentiert, und es war so einfach. Aber manchmal ist es schön zu sehen, wie andere es machen. Also, lasst uns einsteigen und sehen, wie es gemacht wird.

Erste Schritte

Nehmen wir zunächst an, wir starten ein neues Laravel-Projekt. Ich werde nicht näher darauf eingehen, wie man es einrichtet. Sie können sich hier auf die Dokumentation beziehen. Nachdem Sie die gesamte Einrichtung von Laravel abgeschlossen haben, werfen wir einen Blick auf die Installationsdokumentation von Tailwind. Klicken Sie hier.

In der Dokumentation können Sie sehen, dass der einfachste Weg darin besteht, das CDN in Ihr Projekt einzufügen und mit dem Codieren zu beginnen. Es ist schön, das auszuprobieren. Gehen wir noch einen Schritt weiter und wenden es auf unseren Build-Prozess an.

Installation

Wir können NPM- oder Yarn-Befehle verwenden, um Tailwind in unser Projekt zu ziehen.

# 使用 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";
 */

Beachten Sie das Semikolon am Ende des @tailwind-Imports. Löschen Sie sie. Wenn Sie PHPStorm verwenden, werden Sie an diesem Punkt möglicherweise bemerken, dass die Dateistruktur überall eine Reihe roter Linien aufweist. Machen Sie sich keine Sorgen, Sie können diese ignorieren oder einen Weg finden, sie zu deaktivieren. Wenn Sie eine Möglichkeit finden, sie auszuschalten, schreiben Sie bitte ein Tutorial und lassen Sie es mich wissen ;).

Dies ist die Haupt-Sass-Datei, wir können unsere benutzerdefinierten Sass-Dateien importieren und sie während des Erstellungsprozesses nach exportieren den Ordner public/css. Achten Sie beim Importieren Ihrer benutzerdefinierten Sass-Dateien darauf, die Importreihenfolge einzuhalten, um das Problem zu vermeiden, dass Ihr benutzerdefiniertes CSS überschrieben wird.

Build-Prozess

Fügen Sie Tailwind während des Build-Prozesses hinzu. Öffnen Sie die Datei webpack.mix.js. Oben rechts unten let mix = require('laravel-mix'); add let tailwindcss = require('tailwindcss');.

Jetzt können Sie in unserem Mix die Standardeinstellung wie folgt ändern. Sass-Optionen (Hinweis: Wenn Sie Ihre Haupt-Sass-Datei nicht index.sass genannt haben, aktualisieren Sie sie unbedingt hier):

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

Derzeit gibt es ungelöste Probleme mit Minx-Abhängigkeiten. Wir werden Sass mit Tailwind verwenden und müssen ProcessCssUrls deaktivieren. Weitere Informationen finden Sie in der Dokumentation. Klicken Sie hier.

Führen Sie abschließend npm run prod aus, um Tailwind in CSS zu kompilieren.

Ende

In Ihrer Vorlagendatei können Sie jetzt in Ihr Head-Tag ein und beginnen Sie mit der Verwendung von Tailwind, um schnell eine reaktionsfähige Benutzeroberfläche zu erstellen.

Empfohlenes Tutorial: „Laravel Tutorial“

Das obige ist der detaillierte Inhalt vonVerwenden von Tailwind CSS mit Laravel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!