使用 Tailwind CSS 快速进行 UI 开发

Tailwind css 是什么

Tailwind CSS 是一个实用优先的 CSS 框架，旨在简化 Web 应用程序的构建，使其更快速，更少地关注编写自定义 CSS，而无需离开 HTML 代码的舒适区，同时实现出色的界面。

然而，尽管 Tailwind 被认为是一个框架，但它与其他框架的理念并不相同。Tailwind 主要是一个实用工具🛠框架，或者更确切地说是一个实用工具包。

Utility-class从一组受限的原始实用程序构建复杂的组件。

其他 CSS 框架（例如 Bootstrap）为您提供了各种预定义组件（例如模态框、按钮、警报、卡片）。但使用 Tailwind CSS，您可以创建自己的组件，或者根据项目模型强制创建自己的组件。换句话说，您实际上拥有这些组件，并且您可以对您选择的任何组件进行自定义。

这意味着不再需要与框架对抗，并试图找出需要覆盖哪些类才能获得最初想要的结果。

例子

为了帮助您入门，我提供了一个使用实用类构建的组件示例，或许能为您创建 UI 界面提供一些灵感。源代码在我的Codepen
上。

<div class = "max-w-sm mx-auto bg-gray-300 shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class = "block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full"src="https://res.cloudinary.com/drrzwqvfh/image/upload/v1590779925/profile-pic-7b90c94f567c1a6c63b5873983d557e4_tact1l.jpg" alt="jeff">
    <div class ="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class ="text-xl leading-tight text-white-100"> Jeff Ubayi</p>
      <p class ="text-sm leading-tight text-gray-700"> Software Developer</p>
      <div class = "mt-4">
        <button class ="text-blue-600 hover:text-white hover:bg-blue-300 border border-blue-400 text-xs font-semibold rounded-full px-4 py-1 -normal"> Hire me</button>
      </div>
    </div>
  </div>
</div>

在上面的例子中，我们使用了；

• max -width和margin实用程序（max-w-sm和mx-auto）用于限制卡片宽度并将其水平居中
• 背景颜色、边框半径和box-shadow实用程序（bg-gray-300、rounded-lg和shadow-lg）用于设置卡片的外观
• 宽度和高度实用程序（和）用于调整个人资料图像的大小w-12h-16
• 用于设置卡片文本样式的字体大小、文本颜色和行高实用程序（text-xl、、等）text-gray-700leading-tight
• 边距和填充实用程序（mt-4和px-6）用于定位卡片文本

现在我知道你在想什么了：“这简直是暴行，简直是一团糟！”你说得对，它确实有点丑。事实上，你第一次看到它时几乎不可能觉得这是个好主意——你必须亲自尝试一下。

但是一旦你真的以这种方式构建了一些东西，你很快就会注意到一些非常重要的好处：
响应式设计，使用预定义的设计系统和使用伪类进行样式设置。

为什么要使用 Tailwind

1. 组件友好

Tailwind 提供了从重复的实用程序模式中提取组件类的工具，从而可以轻松地从一个地方更新组件的多个实例：

2. 没有命名约定

编写自定义 CSS 最让人头疼的部分之一就是命名类。每次都需要思考哪些类应该通用，哪些类应该具体化。该如何组织它们并确保它们层叠？Tailwind CSS 通过提供可随时使用的基于实用程序的类，无缝解决了这些问题。

3. 定制设计

Tailwind 用 [PostCSS] 编写并用 Javascript 配置，可以轻松自定义颜色、边框大小、字体粗细、间距实用程序、断点、阴影等。

4. 缓存的好处

编写自定义 CSS 时，每次修改设计时都需要修改 CSS 文件。使用 Tailwind CSS，您无需担心这一点，因为您可以在标记中反复使用相同的类。

5. 响应式

Tailwind 使用直观的 {screen}: 前缀，可以很容易地注意到标记中的响应类，同时保持原始类名的可识别性和完整性。

• sm：小屏幕
• md：中等屏幕
• lg：大屏幕
• xl：特大

使用 Tailwind 游乐场创建您的第一个项目

Tailwindcss 游乐场是一个简单的启动项目，用于在适当的 PostCSS 环境中使用 Tailwind。

开始：

克隆存储库：

      git clone https://github.com/tailwindcss/playground.git tailwindcss-playground

cd tailwindcss-playground

       Install the dependencies:

使用 npm

        npm install

使用 Yarn

        yarn

启动开发服务器：

使用 npm

      npm run serve

使用 Yarn

       yarn run serve

现在您应该能够看到项目正在运行localhost:8080。

在编辑器中打开 public/index.html 并开始根据您的期望配置您的项目！

配置 Tailwindcss 文件

您可以使用 Tailwinds CLI 实用程序轻松生成配置文件。

`npx tailwind init`

它生成一个如下所示的“tailwind.config.js”文件。

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

tailwind.config.js 文件的主题部分是您定义项目的调色板、类型比例、字体堆栈、断点、边框半径值等的地方。

结论

我认为“实用优先”的理念才是未来的发展方向。这为工程师提供了灵活性，让他们能够以自己喜欢的方式构建 UI，同时充分利用实用程序的强大功能。底层实用程序的更新可以更好地支持浏览器。

使用 Tailwind CSS，您可以创建适合您需求或工作内容的组件。这些组件可以通过利用 Tailwind CSS 的实用功能来创建。如果您厌倦了使用 Bootstrap 及其类似的工具，您会发现 Tailwind CSS 非常适合创建美观的界面，因为它提供实用类来实现您需要的设计。