TailwindCSS 技巧

我的整个职业生涯都在涉足CSS。在早期，它相对简单，因为我们的浏览器相当有限。但是这些年来，CSS变得越来越强大，允许样式仅针对标签具有特定的标签属性，仅适用于特定的屏幕尺寸，甚至使用诸如flexbox和grid之类的东西执行复杂的布局。我不时花一点时间来理解这些东西……但因为我不使用CSSa吨，很难跟上。

因此，在过去的十年里，我倾向于使用CSS框架，通常是Bootstrap。每隔几年，就会有一个新的主要版本被删除，我不得不学习新的结构和组件，并努力获得东西以我想要的方式查看。更糟糕的是，当我使用这些框架时，注入自定义CSS通常意味着了解框架已经如何设置组件样式，这样我就可以确保不会发生冲突。

在过去的几年里，我一直在关注TailwindCSS。我一直有点怀疑，因为它的声明式、实用程序优先的方法看起来很像在您的HTML中做CSS，老实说，感觉不对。我通常赞同语义HTML的想法，它提倡将样式与标记分开。直接使用模仿与每个标签关联的CSS指令的样式感觉像是一种邪恶的混合，与语义相去甚远HTML。

然后是炒作。Tailwind的原作者和项目负责人是一个大肆炒作的人，炒作往往会让我失望。这是我的错，而不是他们的错，但在这个行业工作了20多年，我我发现我越来越倾向于打折炒作的产品和项目，因为我看到它们来来去去如此频繁；炒作的数量与项目的长期可行性之间通常存在间接关系。我也经常观察到炒作是用户转移合理批评的一种方式，用户群越激烈，兴趣越小因此，我正在与他们合作。很明显，YMMV，但这绝对是阻止我真正调查Tailwind的原因。

然而，最近，在帮助PHP基金会时，我自愿设置他们的静态网站，并且该团队要求使用TailwindCSS，所以我投入其中。

然后我发现…我有点喜欢它。

这是“我以后会用谷歌搜索这个”的帖子之一。

工作原理

我不会介绍如何开始使用Tailwind；他们的文档为您做了很好的工作。但是，我将快速概述事情是如何工作的，这样您就可以看到（a）我来自哪里，以及（b）您将在什么时候做你从Tailwind开始。

我一直学习使用CSS的方法是先编写HTML，然后编写CSS以按照您希望的方式设置HTML的样式。

<div class="box">
  <h2>Title</h2>
  <p>Some content</p>
</div>

<style>
.box {
  margin: 0.5rem;
  background-color: #333333;
  border: #000000
  padding: 0.5rem;
}

.box h2 {
  background-color: #dedede;
  padding: 0.5rem;
  color: #111111;
  font-size: 2rem;
  min-width: max-content;
}

.box p {
  padding: 0.5rem;
  font-size: 1.2rem;
  min-width: max-content;
}
</style>

Tailwind相反提供了大量的“实用”类，几乎针对每个CSS指令。然后将这些HTML类添加到元素中以设置它们的样式：

<div class="m-2 p-2 bg-neutral-600 border-black">
  <h2 class="min-w-full p-2 bg-neutral-300 text-4xl text-neutral-800">Title</h2>
  <p class="min-w-full p-2 text-xl">Some content</p>
</div>

在后台，您运行TailwindCLI工具，它会分析您的HTML来为您生成CSS。您甚至可以让它监视您感兴趣的文件（模板、JS脚本等）的文件系统更改。，它会自动重新生成CSS。

技巧1：图层

开箱即用，Tailwind会执行CSS重置，删除所有样式。这很棒，因为这意味着您所做的任何更改，您都可以准确预测会发生什么。这也是一种痛苦在屁股上，因为一切都没有样式：你的标题看起来就像你的段落，你的列表看起来就像你的段落，而且没有办法分辨一个段落在哪里结束，另一个段落在哪里开始。

因此，您要做的第一件事就是定义基本样式。Tailwind对在哪里以及如何执行此操作有一个非常具体的建议：在“基本”层中。

打开您的站点CSS文件，您将在开始时看到这些指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

这些中的每一个都是一个Tailwind“层”。Tailwind定义这些以允许根据它们的正常使用方式对项目进行分组，并且在这些层中定义样式允许(a)使用其他实用程序类覆盖它们的能力，以及(b)如果它们从未在您的应用程序中使用过，则能够从CSS文件中剥离它们。

“基础”层应该用于您的基础样式，即CSS重置通常涉及的那些，例如段落、标题、链接、列表等。

在您的声明中，您可以使用一个名为@apply的指令。这允许您使用与在HTML标记中使用的相同的实用程序“类”，这意味着您最终使用创建设计时到处都使用相同的语言。举个例子：

@layer base {
    html {
        @apply font-serif;
    }

    p {
        @apply mb-4 leading-relaxed tracking-wide;
    }

    a {
        @apply underline decoration-1 decoration-dotted transition duration-300;
    }

    a:hover {
        @apply font-semibold decoration-solid;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-sans;
    }

    h1 {
        @apply font-bold text-8xl mb-2;
    }

    /* and so on */
}

随着项目的成熟，您可能会注意到您正在使用并在各处重复使用某些样式，并且它们越来越难以记住并始终如一地输入。对我来说，这些是按钮和表单输入之类的东西。像这样的样式去进入你的“组件”层：

@layer components {
    .btn {
        @apply rounded p-2 bg-action-bg border-action-border text-site-bg hover:bg-action-active active:bg-action-active active:text-site-bg transition duration-300
    }

    .text-input {
        @apply w-full mb-4 border-site-bg p-2 rounded bg-site-fg text-site-bg;
    }

    .label {
        @apply block mb-2 font-semibold;
    }

    .textarea {
        @apply w-full mb-4 border-site-bg p-2 rounded-lg bg-site-fg text-site-bg;
    }
}

添加这些允许我使用更简洁的类：

<label class="label" for="email">Email address</label>
<input class="text-input" name="email" type="email" />

仅限类！

“组件”层仅允许类定义！文档顺便提到了这一点，但我的直接假设是我可以在组件层中使用任何CSS选择器。我发现指定元素类型（例如label或input[type="text"],input[type="email"]）不起作用；没有生成样式。一旦我切换到只创建CSS类定义，一切正常。

我相信有人会指出我错了和/或详细说明如何正确地做；在那之前，这是有效的。

仅限类！

“组件”层仅允许类定义！文档顺便提到了这一点，但我的直接假设是我可以在组件层中使用任何CSS选择器。我发现指定元素类型（例如label或input[type="text"],input[type="email"]）不起作用；没有生成样式。一旦我切换到只创建CSS类定义，一切正常。

我相信有人会指出我错了和/或详细说明如何正确地做；在那之前，这是有效的。

但是，有时，使用图层不起作用。

什么时候？

通常，在生成内容时。我遇到的两次问题：

• 我有通过cronjob或webhook生成的内容，并且HTML不在运行Tailwind时我可以依赖的任何源文件中。
• 我还有其他内容生成于-the-fly通过JavaScript，这些只生成常规的HTML标签。

对于这些，您在所有层之外创建声明。这样做可确保Tailwind始终在生成的CSS中包含定义，无论它是否找到任何标记和他们在一起。

幸运的是，即使有这些，您也可以继续使用@apply。而且，更好的是，您可以使用任何您想要的CSS选择器，这让您可以根据需要进行指定。

技巧#2使用预处理器

我经常有想要包含的第3方CSS，PrismJS和FontAwesome是典型示例。使用普通CSS甚至预处理器，我可以使用@import将它们包含在内，但Tailwind不会不知道如何自行执行此操作（老实说，不应该这样做）。此外，最小化CSS是获得小幅性能提升的好方法，因为它确保浏览器可以获取更小的文件大小。

幸运的是，您也可以将Tailwind与预处理器一起使用，文档详细介绍了各种预处理器的配置。

我最终选择了PostCSS，因为它几乎没有依赖项，而且设置起来很简单。但是，在这样做的过程中，我不能再只使用TailwindCLI来查看我的CSS，并且需要设置额外的工具.

结果并不难实现。我在本地安装了PostCSS，并在全局安装了PostCSSCLI工具。我还安装了postcss-import插件、autoprefixer和cssnano。我的postcss.config.js最终是这样的：

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.IS_PROD ? { cssnano: {} } : {})
  }
}

"scripts": {
  "dev:css": "postcss css/site.css -o dist/css/site.css",
  "watch": "npx chokidar \"./css/*.css\" \"../templates/**/*.phtml\" \"../src/**/*.phtml\" -c \"npm run dev:css\""
}

<a class="block border-t border-mwop-light border-dotted px-2 py-4 no-underline text-sm font-semibold text-mwop-light transition duration-300 hover:bg-mwop-fg hover:text-mwop-bg" href="<?= $this->url('blog') ?>">Blog</a>