Utiliser Tailwind CSS avec Laravel

Tailwind Tailwind est un nouveau framework utilitaire CSS qui est rapidement devenu mon moyen préféré pour créer des interfaces. Souvent, la partie la plus difficile de l’essai d’un nouveau framework, package ou langage est de le configurer.

Les gars qui ont construit Tailwind ont fait un travail incroyable en documentant le processus et c'était si facile à faire. Mais parfois, c'est agréable de voir comment les autres font. Alors, allons-y et voyons comment cela se passe.

Démarrage

Tout d'abord, disons que nous démarrons un nouveau projet Laravel. Je n'entrerai pas dans les détails de sa configuration, vous pouvez vous référer à la documentation ici. Après avoir terminé toute la configuration de Laravel, jetons un coup d'œil à la documentation d'installation de Tailwind cliquez ici.

Dans leur documentation, vous pouvez voir que le moyen le plus simple est d'insérer le CDN dans votre projet et de commencer à coder. C'est bien d'essayer, allons encore plus loin et appliquons-le à notre processus de construction.

Installation

Nous pouvons utiliser les commandes NPM ou Yarn pour intégrer Tailwind dans notre projet.

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

J'ai remarqué le point-virgule à la fin de l'importation @tailwind. Supprimez-les. À ce stade, si vous utilisez PHPStorm, vous remarquerez peut-être que la structure des fichiers comporte de nombreuses lignes rouges, ne vous inquiétez pas, vous pouvez les ignorer ou trouver un moyen de les désactiver. Si vous trouvez un moyen de les désactiver, veuillez écrire un tutoriel et faites-le-moi savoir ;).

Il s'agit du fichier sass principal, nous pouvons importer nos fichiers sass personnalisés et, pendant le processus de construction, les exporter vers le dossier public/css. Lors de l'importation de vos fichiers Sass personnalisés, assurez-vous de suivre l'ordre d'importation pour éviter le problème d'écrasement de votre CSS personnalisé.

Processus de construction

Ajoutez Tailwind pendant le processus de construction. Ouvrez le fichier webpack.mix.js. En haut, en bas à droite let mix = require('laravel-mix'); add let tailwindcss = require('tailwindcss');.

Maintenant, dans notre mix, vous pouvez modifier la valeur par défaut comme ceci . options sass (remarque : si vous n'avez pas nommé votre fichier Sass principal index.sass, assurez-vous de le mettre à jour ici) :

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

Il existe actuellement des problèmes non résolus avec les dépendances Minx. Nous allons utiliser Sass avec Tailwind et devons désactiver processCssUrls. Veuillez vous référer à la documentation pour plus d'informations. Cliquez ici.

Enfin, exécutez npm run prod pour compiler Tailwind en CSS.

Fin

Dans votre fichier modèle, vous pouvez maintenant ajouter à votre balise head et commencez à utiliser Tailwind pour créer rapidement une interface utilisateur réactive.

Tutoriel recommandé : "Tutoriel Laravel"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!