如何在 Laravel 中使用 Tailwind CSS?

Laravel

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

结束

在你的模板文件,现在你可以添加 <link href="{{ asset('css/app.css') }}" rel="stylesheet">到你的 head 标签,并且开始使用 Tailwind 快速构建响应式 UI。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://nick-basile.com/blog/post/settin...

译文地址:https://learnku.com/laravel/t/36453

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 3

嗯 这个前端内容还是挺感兴趣

8个月前 评论
Epona

这个需要懂一些UI设计,否则写出来的样式还是很丑😂(或者有UI出图,那么也可以)

8个月前 评论

我用这个样式框架很久了,这个有更简单的用法

  1. 安装 tailwindcss npm install tailwindcssyarn add tailwindcss
  2. 创建 tailwindcss 配置文件 npx tailwindcss init --full (用这个一般都需要自定义一些样式,所我一般都要 --full)
  3. 将第 2 步中生成的配置文件 tailwind.config.js 重命名为 tailwind.js
  4. 引入 laravel-mix-tailwind : npm install laravel-mix-tailwindcss --save-dev
  5. 之后在 webpack.mix.js 中引入即可
    let mix = require('laravel-mix');
    require('laravel-mix-tailwind');
    mix
        .js('resources/js/app.js', 'public/js')
        .less('resources/less/app.less', 'public/css')
        .tailwind();
  6. 最后在 app.scss 中添加
    @tailwind components;
    @tailwind utilities;
  7. npm run dev 就可以看到效果了

这样更简单

但是 tailwindcss 默认的配色色系有点丑(当然,你可以在配置文件中修改),我个人偏好马卡龙色系轻快一点的风格或者 material 风格,而且 tailwindcss 的栅格没有 Bootstrap 好用,它必须要一个 padding 每个 col 之间才能有间隙。所以我都会配合其他的样式框架使用,一般是 materializecss

8个月前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!