Laravel News 与 Tailwind CSS 的相遇

您可能还没有注意到，但 Laravel News 网站刚进行了全新的改版。我们刚刚发布了一个完整的、一对一的 CSS 重构，使用 Tailwind CSS 在幕后提供支持！该项目的目的是简化设计更改的实现和向网站添加新内容的过程。

#什么是 Tailwind CSS？

Tailwind CSS 是一个由 Adam Wathan、Jonathan Reinink、David Hemphill 和 Steve Schoger 构建的实用优先 CSS 框架。它颠覆了我们对编写结构良好、可维护的 CSS 的一切认知。Tailwind 使用 PostCSS 生成数千个实用程序类，然后您可以直接在标记中使用这些类来样式化您的 HTML。这使得开发过程更加快速，并且只需要编写很少的自定义 CSS。

#从 Laravel Elixir 升级到 Laravel Mix

为了启动这个项目，我首先从 Laravel Elixir 升级到 Laravel Mix 的代码库。Mix 比 Elixir 有很多优势，其中一些优势是
– 在幕后使用 Webpack
– 配置更简单
– 当前支持的版本

升级到 Mix 是一个简单的过程。Elixir 只是编译 Sass，合并一些 JavaScript 文件，以及对主 JavaScript 和 CSS 文件进行版本控制。我所要做的几乎就是通过 npm 安装 Mix，更新 package.json 中的 scripts 部分，并将配置从以下内容

// gulpfile.js
 
var elixir = require('laravel-elixir');
 
elixir(function(mix) {
  mix
    .sass('all.scss', 'public/assets/css/all.css')
    .scripts(
      [
        // ... script files
      ],
      'public/assets/js/app.js'
    )
    .version(['/assets/css/all.css', 'assets/js/app.js']);
});

更改为以下内容

// webpack.mix.js
 
const mix = require('laravel-mix');
 
mix
  .sass('resources/assets/sass/all.scss', 'public/assets/css/all.css')
  .scripts(
    [
      // ... script files
    ],
    'public/assets/js/app.js'
  );
 
if (mix.inProduction()) {
  mix.sourceMaps().version();
}

#设置 Tailwind

下一步是设置 Tailwind。要开始，我必须通过 npm 安装 Tailwind，并在 Laravel Mix 配置中进行一些更改。在安装 Tailwind 之后，我在 webpack.mix.js 文件中添加了以下代码。

mix
  .sass('resources/assets/scss/tailwind.scss', 'public/assets/css')
  .options({
    postCss: [tailwindcss('./tailwind.js')]
  });

接下来，我创建了 tailwind.css 文件，其内容如下

@tailwind preflight;
 
@tailwind components;
 
@tailwind utilities;

Tailwind 通过其配置文件提供了强大的自定义功能。要生成默认配置文件，只需运行 ./node_modules/bin/tailwind init tailwind.js，这将在项目的根目录中创建一个 tailwind.js 文件。在这里，您可以配置从颜色到边距和填充大小，甚至响应式断点的所有内容。

要感谢 Zaengle 团队，他们为我留下了很棒的 Sass 代码库。它基于一个名为 Bourbon 的轻量级 Sass 框架，并且组织得很好。此时，我只需用我在 Sass 变量中找到的值替换默认的 Tailwind 配置。我很快地将字体大小、颜色和间距大小复制到 tailwind.js 文件中，在 tailwind.scss 中添加了一些标题和段落的默认基本样式，然后我就可以开始了！

#转换页面 / 提取可重复使用的类

要开始真正的工作，我首先用 Laravel Mix 编译的新 tailwind.css 文件替换最初加载的 CSS 文件。这删除了所有样式，因此我从头开始。然后，我在 body 标签中添加了一些我知道我需要的一些基本类，bg-off-white font-sans text-base text-grey-darker leading-loose。然后我继续进行导航。使用相同的 HTML 来实现移动端和桌面端布局一直以来都很难做到完美，而且 Tailwind 在这里也无能为力。我花了很长时间才将导航部分转换过来，而且我必须编写一些自定义 CSS 来使其完美。Tailwind 目前还没有办法针对伪选择器，因此我必须将以下内容添加到我的 tailwind.scss 文件中

@screen md {
  .nav-container::after {
    content: "";
    height: 2px;
    top: 66px;
    @apply .absolute .w-full .pin-l .bg-off-white;
  }
}

现在，您可能会注意到一些奇怪的语法与 CSS 混合在一起。@apply 和 @screen 指令是 Tailwind 包含的一些功能，当您最终编写自定义 CSS 时，这些功能会有所帮助。您可以阅读更多关于 Tailwind 的自定义指令的信息 这里。@apply 允许您将 Tailwind 的实用程序类“应用”到您的自定义类中，这样您就可以在 Tailwind 配置文件中重复使用颜色和大小。这使您的设计在整个网站中保持一致。@screen 指令使用您作为参数传递的宽度编译成一个常规的媒体查询。该代码示例编译成以下内容

@media (min-width: 750px) {
  .nav-container::after {
    content: "";
    height: 2px;
    top: 66px;
    position: absolute;
    width: 100%;
    left: 0;
    background-color: #f5f5f5;
  }
}

在完成导航后，我继续进行了首页的其余部分。我遍历了每个部分，并重新设计了标记以尽可能地匹配旧的设计。每当我遇到无法完全正确实现的问题时，我都会查看旧代码的源代码，看看它之前是如何完成的。

当我浏览每个页面时，我开始注意到我一直在重复使用某些类集。首页上的卡片就是一个很好的例子。在重复了这些类几次之后，我决定在我的自定义 CSS 中为它们提取组件。使用 Tailwind，提取组件非常容易。只需复制应用于元素的类，并使用 @apply 指令将所有这些类应用到像 .card 这样的单个类中。以下是我创建的一些自定义类的示例

.card {
  margin: 15px 0;
  width: calc(100% - 30px);
  @apply .text-white .bg-white .rounded-sm .overflow-visible .shadow-sm .self-stretch;
}
 
.card .card__image {
  max-height: 150px;
  @apply .flex .items-start .justify-center .rounded-t-sm .overflow-hidden .bg-grey-lighter;
}
 
.card .card__image img {
  @apply .w-full .flex-1 .block .rounded-t-sm .transition;
}
 
.card:hover .card__image img {
  @apply .opacity-75;
}

当我开始博客页面时，我不得不改变工作流程。由于文章内容是从数据库中加载的，因此我无法直接将实用程序类应用到内容中。我必须使用自定义类和 @apply 指令来设置文章内容的样式。我最终得到了一些类似于以下内容的东西

.post__content h1 {
  @apply .text-4xl .leading-tight;
}
 
.post__content h2 {
  @apply .text-2xl .leading-tight;
}
 
.post__content h3 {
  @apply .text-lg .leading-tight;
}
 
.post__content ul, .post__content ol {
  @apply .mb-8;
}
 
.post__content p {
  @apply .mb-8;
}
 
...

代码重构进行得越深入，它就变得越容易。设计在总体上非常一致，许多部分都使用 Blade 部分，因此我很幸运地不必每次都重构它们。

#清理和优化

最后，我开始做最有趣的部分：删除代码！我最终从项目中删除了近 200 个 Sass 文件（包括 Bourbon），只剩下 12 个小的 Sass 部分。这些主要是为了我重复使用的类而创建的可重复使用的组件。通过对一些不必要的依赖项进行一些小的 JavaScript 重构，我还能够大幅度地减少 JavaScript 包的大小（告别 jQuery）！

有些人注意到 Tailwind 与其他框架相比的一个主要问题是编译时的默认包大小。默认情况下，编译后的 CSS 大约为 49kb！但不用担心，有一些选项可以控制文件大小，您可以阅读更多关于 这里的信息。

对于这个项目，PurgeCSS 是减少文件大小的完美选择。Tailwind 文档中包含解释如何配置 PurgeCSS 以与 Tailwind 一起使用的文档，我建议您阅读这些文档。那么 PurgeCSS 是做什么的呢？您可以将其添加为构建步骤，当您为生产环境编译 CSS 时，它会扫描所有视图文件以及您可能拥有的任何 JavaScript 组件，以查找 CSS 类，然后将这些类与已编译 CSS 中的选择器进行比较。然后它会删除任何未使用 CSS，在我看来，这非常有效。

以下是文件大小的对比结果
– CSS：~17.1kb gzip（之前） / ~6.8kb gzip（之后）
– JS：~54.8kb gzip（之前） / ~13.2kb gzip（之后）

最后一个 PurgeCSS 技巧：在从数据库或 API 加载内容时，请确保将该内容中使用的任何类列入白名单。了解更多关于如何执行此操作的信息 这里.

#总结

总的来说，这是一个非常有趣的项目，我很高兴能参与其中。如果您对本文中提到的任何工具或开发过程有任何疑问，请随时与我联系，Jason Beggs！