在 Laravel 8 中，集成了一个名为 "Jetstream" 的框架，它使用了一种名为 "Tailwind CSS" 的新型 CSS 框架。Tailwind CSS 是一个功能强大的 CSS 工具包，它有着大量的可定制化样式和组件，可以帮助我们快速开发出美观、现代的前端界面。
安装 Tailwind CSS
要开始使用 Tailwind CSS，我们首先需要在项目中安装它。可以通过以下命令进行安装：
--- ------- -----------
安装完成后，我们需要使用 Laravel 的前端工具 Laravel Mix 来编译我们的 CSS。可以在 Laravel 项目根目录下的 webpack.mix.js 文件中添加以下代码：
----- --- - -----------------------
----- ----------- - -----------------------
----------------------------- ------------
-------------------------------- -------------
----------
--------------- ------
-------- - ----------------------------------- --
---这样，我们就可以在项目中成功使用 Tailwind CSS 了。
使用 Tailwind CSS
使用 Tailwind CSS 很简单。在需要使用样式的地方，只需添加相应的类名即可。以下是一些常用的 Tailwind CSS 类名：
- 字体大小：text-xs、text-sm、text-base、text-lg、text-xl、text-2xl、text-3xl、text-4xl、text-5xl、text-6xl
- 颜色：text-white、text-gray-100 ~ text-gray-900、text-red-100 ~ text-red-900、text-green-100 ~ text-green-900、text-blue-100 ~ text-blue-900、text-yellow-100 ~ text-yellow-900、text-indigo-100 ~ text-indigo-900、text-purple-100 ~ text-purple-900、text-pink-100 ~ text-pink-900
- 样式：bg-{color}、text-{color}、border-{color}、rounded-{size}、shadow-{size}、p-{size}、m-{size}、flex、justify-{direction}、items-{direction}、text-center，等等。
下面是一个简单的示例，演示如何使用 Tailwind CSS 来制作一个有趣的卡片：
---- ------------- -------- ------- -------- ---------- --------- -----------------
---- ----------------
---- -------------------------
---- ----------- ------ ------------ -------- -------------------------------------- -------- ------- -- ---- -- - -------
------
---- ------------
---- ---------------- ------------- ------- --------------- ------------------- -----------
-- -------- ------------ ---- ------- ------------- ----------- ---------- ------------------------ --------- --- ---- --- ------------
-- ----------- ---------------------- - --- -------- --- --- ------ -- - --- -- ---- ----- ---- --- ---- ----- --- --- --- -- ---- ---- ----- --------------
------
------
------你可以复制以上代码并尝试运行，看看效果如何。
定制 Tailwind CSS
为了使你的网站或应用程序看起来更专业和独特，你可以根据自己的需要和品牌风格来修改 Tailwind CSS 的默认设置。
在 Laravel 8 中，您可以通过编辑 tailwind.config.js 文件来自定义 Tailwind CSS 的样式和组件。以下是一些示例配置：
-------------- - -
------ -
------- -
------- -
----------- ----------
---------- ----------
--
----------- -
----- ------ ------ ----------
------ ---------------- ---------- -----------
--
--------- -
------ -------
--
---------- -
--- -- --- --- ---- ------- -- -- ----- - --- --- ---- ------- -- -- -------
--
--
-
-由于 Tailwind CSS 具有如此之多的类和选项，定制起来可能会有点复杂。但是，你只需要在自己的项目中使用它的子集，就可以为自己的项目提供非常强大和灵活的样式。
结论
使用 Tailwind CSS 可以让我们更快地构建出漂亮、现代的前端界面，而 Laravel 8 为我们提供了集成它的最佳方式。如果你还没有尝试过 Tailwind CSS，那么现在就是开始的最佳时机了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671733a9ad1e889fe2205cd8