介绍
Tailwind CSS 是一个非常酷的CSS框架，您可以在构建应用程序和网站时使用它。事实上，我认为它如此酷，以至于自它发布以来，我已经不再使用 Bootstrap 作为新项目的主要框架，而是选择使用 Tailwind。
在这篇文章中，我们将快速了解Tailwind CSS是什么以及为什么我认为它很有用。之后，我们将探讨两种方法，说明如何在您的 Laravel 项目中设置Tailwind。
什么是Tailwind CSS？
Tailwind是一个以功能为主的CSS框架，您可以直接在HTML中用它来美化网站。例如，它提供了诸如flex、pt-4、text-center等CSS类，这样您可以具有更详细的控制。
以一个例子来说，让我们看看如何使用Tailwind创建一个按钮。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
如果我们想要使用Bootstrap创建一个具有相同样式的按钮，我们可能会这样做
<button class="btn btn-primary">
Button
</button>
如您所见，我们在标记中添加了单独的CSS类，而不是像Bootstrap中那样只有一个或两个类。
现在，别担心，我知道你在想什么... "这个HTML看起来真的很乱，也太复杂了。Bootstrap的版本看起来好多了，更容易理解！" 我在学习Tailwind的时候也有同样的想法。我只是觉得这可能只是一阵潮流，几个月后就会消退。但是，我仍然尝试了一下，以便做出更明智的决定。我爱上了它！
当然，一开始感觉有点奇怪，但一两小时后，使用它就感觉非常自然了。当我用Bootstrap的时候，我总是感觉我在与内置的CSS样式作斗争，才能完成任何事情。它非常适合快速构建网站，但为了根据自己的喜好进行定制，我不得不覆盖很多样式。但与Tailwind相比，如果要快速给按钮添加样式，就像直接将其添加到HTML中一样简单。
如果你对了解为什么Tailwind很有用感兴趣，Adam Wathan（Tailwind的创造者）有一篇非常有趣的介绍文章，我推荐阅读。
使用CDN
开始使用Tailwind最容易（但未必是最好的）方式是通过CDN将样式表添加到HTML中。如果你想要快速原型设计一个想法或者只是想试试框架，这特别有用。
要开始使用，你只需将以下行添加到HTML的<head>部分
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
尽管这是添加Tailwind到项目的最快方式，但我仍然建议不要在直播项目中使用，因为：
CSS文件的尺寸大于通过NPM安装后捆绑的大小。
使用NPM
如果您打算在一个将要平台化的项目中使用Tailwind，使用NPM安装Tailwind会更好。通过这样做，您不会受到上述使用CDN时的缺点的影响。让我们来看看如何入门。
安装Tailwind
要安装Tailwind，您只需运行以下命令
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
设置您的Tailwind配置
现在我们已经安装了Tailwind，我们可以运行以下命令来创建一个空的tailwind.config.js文件
npx tailwindcss init
现在您应该有一个看起来是这样的tailwind.config.js文件
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
这个文件可能在您需要更改主题或安装插件时使用。例如，如果我们想将'Poppins'定义为默认的'sans'字体，我们可以这样更新文件：
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
'sans': ['Poppins', 'ui-sans-serif', 'system-ui'],
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
配置Laravel Mix
现在我们已经安装并配置了Tailwind，我们可以设置Laravel Mix，以便在构建我们的资源时对CSS进行捆绑。
我这里假定您正在使用默认的app.css文件，该文件随新鲜Laravel安装一同提供。如果不是，您可以更新postCss()方法中的第一个参数以匹配您的CSS文件主路径。
我还假定您的webpack.mix.js文件与新鲜默认Laravel安装中提供的文件相同。
让我们将必要的require()方法添加到webpack.mix.js文件中的postCss()方法中。
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
将Tailwind添加到应用的CSS中
我们 almost get there！现在，我们已经安装和配置了Tailwind，需要将样式添加到主CSS文件中。
在此，我假设大家正在使用前面提到的 resources/css/app.css CSS 文件。所需做的全部就是打开该文件，并在顶部添加以下内容
@tailwind base
@tailwind components
@tailwind utilities
现在 Tailwind 已添加到您的项目 CSS 文件中，您可以直接开始使用。同时，请记住将其添加到 HTML 的顶部
<!doctype html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
恭喜，Tailwind 已成功安装，您现在可以在项目中使用它了！
清除未使用 CSS 类
我建议您配置 Tailwind 以从应用程序的 CSS 文件中清除未使用的 CSS 类。
以一个非常基础的例子来说，假设您仅在应用程序中使用 text-blue-500 类。在应用程序的 CSS 中包含 Tailwind 提供的所有其他类似乎是不合理的。如果我们包含了所有未使用的类，那么 CSS 文件的大小将会增加，这可能会对 Google 搜索排名产生负面影响。
因此，要清除任何未使用的 CSS 类，我们可以更新 tailwind.config.js 文件，使其看起来类似以下内容：
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
如您所见，我们在文件的 purge 部分添加了三条新行。这些行允许我们保留任何在 resources 文件夹内的以 .blade.php、.js 或 .vue 结尾的文件中找到的 CSS 类。
但是，确保以可以被保留的方式编写样式是非常重要。让我们看一下 Tailwind 文档提供的如何不当编写类别的例子。
因为这其中的 regex 规则工作方式是用来检测 CSS 类中的字符串，它将检测由空格、引号或尖括号分隔的字符串。这意味着如果您的类别中有任何这样的字符串（例如，如果您正在添加条件类），它们可能会被忽略并删除。
例如，假设在一个 Vue.js 文件中，您添加了条件 CSS 类。如果出错，您想添加 text-red-600 类；如果没有错误，请添加 text-green-600 类。您可能会这样编写
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
然而，它会检测到 text-{{、error、?、red、:、green、}}-600。您可以想象，这意味着由于其没有检测到 text-red-600 或 text-green-600，所需的类别将从您的 CSS 中清除（假设这些类在您的标记的其他地方未被包括）。
相反，为了编写能够被检测且不会被删除的类，您应该这样写入条件
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
要了解更多关于此的信息，我建议您阅读官方 Tailwind 文档关于 编写可清除 HTML 的部分。
将 HTML 划分为组件
随着您应用程序的扩展，您可能会发现您在许多不同的地方重复使用大量的标记。因此，在试图保持您的代码 DRY（不要重复自己）的方式，您也可以在 Laravel 中使用视图来做到这一点。
在这个特定的部分，我们将使用 Blade 组件作为示例，但如果您使用 Vue 等构建前端，这个概念同样适用。
为了得到一些背景信息，让我们设想有一个按钮，我们在前端的所有许多地方都使用这个按钮，具有以下标记
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
现在，假设在发布原始网站后的几个月，我们想要将所有的按钮更新为绿色而非蓝色。当然，我们可以在所有Blade文件中进行“查找和替换”。但是，正如你可能猜到的，这将非常繁琐，并且会留下错误的空间。如果你忘记更改其中一个按钮会怎样？或者如果你意外更改了使用bg-blue-500类但本不应更新的其他元素又会怎样呢？
为了避免这种情况，我们可以使用Laravel组件。组件允许我们创建可重用的元素，我们可以在Blade文件中使用它们。
为了更好地了解它们是什麼以及如何使用它们，让我们设想以下HTML
<div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button One
</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button Two
</button>
</div>
我们将将这些两个按钮拆分为我们可以使用的组件。让我们从创建一个新的resources/views/components/button.blade.php文件开始。
然后我们可以将按钮的HTML移动到我们新的button.blade.php文件中，如下所示
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button One
</button>
但是，我们需要确保我们将按钮文本设置为动态的，这样我们就可以在整个系统中重用这个组件。我们可以通过输出一个将要传递给组件的$text属性来实现这一点。我们新的按钮标识符将如下所示
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
{{ $text }}
</button>
现在我们可以更新包含两个按钮的原始HTML，使用我们新的组件而不是重复的按钮标记
<div>
<x-button text="Button One"/>
<x-button text="Button Two"/>
</div>
这意味着，如果我们想将按钮的颜色从蓝色更新到绿色，我们只需要在我们的resources/views/components/button.blade.php文件中更改一次即可。
你可能发现，在你的前端某个部分，你可能想保持按钮的一般外观，但改变某些东西（例如字体大小）。而不是需要创建一个新的组件或手动创建一个没有组件的按钮，我们可以使组件的CSS类动态化。
为此，我们可以按如下方式更新我们的组件
<button {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded']) }}">
{{ $text }}
</button>
然后我们可以调用我们的组件
<x-button text="Button One" class="text-xl"/>
这将生成以下HTML输出
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-xl">
Button One
</button>
要了解更多关于Laravel组件的信息，我绝对推荐您阅读
结论
希望这篇文章能为您提供一个关于如何为您的Laravel应用程序和网站设置Tailwind CSS的概述。它还应向您展示了如何为Laravel Mix设置以清除任何未使用的CSS，然后简要展示了如何将可重用的HTML拆分为组件。
继续构建精彩的东西！🚀
ravindrana, hamza094 喜欢这篇文章
Laravel 
Laravel News 
Laracasts 
Laravel Podcast