在 Laravel 8 中，集成了一个名为 "Jetstream" 的框架，它使用了一种名为 "Tailwind CSS" 的新型 CSS 框架。Tailwind CSS 是一个功能强大的 CSS 工具包，它有着大量的可定制化样式和组件，可以帮助我们快速开发出美观、现代的前端界面。
安装 Tailwind CSS
要开始使用 Tailwind CSS，我们首先需要在项目中安装它。可以通过以下命令进行安装：
npm install tailwindcss
安装完成后，我们需要使用 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