Ruby-on-Rails和Tailwind CSS的使用教程

DebugUsery
439 阅读6分钟

你为什么要在Rails中使用Tailwind CSS？

Tailwind CSS的核心概念是其实用性优先的基本原理，也就是能够从一组受限的简单实用程序中构建复杂的组件。这带来了许多好处，我将不按特定顺序列出这些好处

  1. 不用再浪费精力去想类的名字了。现在要为一个特定的组件设计样式，你所需要做的就是在HTML文件中直接使用该组件上的实用类。不再需要找一个完美的抽象类名来命名该组件，这样你就可以在一个单独的CSS文件中对其进行样式设计。

  2. 很少需要编写新的CSS。由于实用程序是可重复使用的，而且几乎可以涵盖所有可以想象的情况，你的CSS文件将停止增长！它们终于可以被维护了。它们最终将是可维护的和苗条的。

  3. 更安全的变化。HTML中的类是本地的，所以它们可以被改变而不用担心破坏其他东西。这与CSS相反，它是全局性的--如果你改变了什么，就会引起一系列的问题。

  4. 高性能。Tailwind旨在通过只生成您在项目中实际使用的CSS，产生尽可能小的CSS文件。再加上优化，如最小化和网络压缩，这就产生了非常轻的CSS文件（小于10kB）。

所有这些都导致了代码的快速编写，易于维护，并且无论项目变得多大，都能轻松扩展。想想看，你是愿意...

  • 重用实用类，还是想出一个类的名字，然后为它编写大量的CSS？
  • 你愿意通过查看适用于单个组件的实用类的列表来进行调试，还是扫描几个巨大的CSS文件？
  • 想象一下，如果你正在处理一个有几十个软件开发人员参与的代码库。你是愿意使用因实用类而完全一致的代码，还是在HTML/CSS中苦苦寻找，看看哪些样式适用于每个组件，以及为什么。

对Tailwind CSS的普遍关注

那为什么不直接使用内联样式呢？

  1. 设计时的限制。如果你使用内联样式，每个值都是一个神奇的数字。使用实用工具，你会从一个预定义的设计系统中选择样式，所以会更容易创建视觉上一致的用户界面。
  2. 响应式设计。在内联样式中使用媒体查询是不可能的，但Tailwind CSS有响应式工具，可以轻松地建立响应式界面。
  3. 状态管理。内联CSS不能针对状态，如悬停、焦点等，而Tailwind CSS的状态变体使其很容易用实用类来设计上述状态。

这不是DRY！（不要重复自己的工作）

但是，如果一堆组件需要相同的重复效用组合呢？一遍又一遍地写它们肯定不是DRY。这些问题可以通过 Tailwind CSS重用样式指南的以下解决方案来解决...

  1. 循环。如果只是一系列只用一次的重复，就在一个循环中渲染实际的标记。
  2. 提取组件和准组件。如果一些样式需要在多个文件中重复使用，最好的策略是创建一个组件或部分，这取决于你是否使用了一个前端框架或模板语言。
  3. 用@apply提取类。如果你使用的是模板语言，那么有时为一些可以在基本的CSS类中完成的小东西创建一个局部，会让人感觉有些矫枉过正。而这正是@apply指令的用武之地；使用现有的实用工具组成一个自定义CSS类。

Tailwind CSS vs Bootstrap 5

Tailwind CSS是目前最流行的实用程序优先的CSS框架，而Bootstrap 5是最流行的UI工具包（预建组件和资源的集合）。我们已经有一个关于Rails和Bootstrap的教程，我们也讨论了关于Rails应用的Tailwind与Bootstrap。到目前为止，我们的选择是坚持使用Bootstrap，只要你能在旅程结束后清除CSS。

尾风CSS比Bootstrap 5好在哪里？

使用Tailwind，你（理论上）不需要编写任何CSS类，相反，你把现有的实用CSS类直接放到你的HTML中--不再有CSS文件。也不再有 "神奇的数字"，每一种字体、颜色、间距都属于一个精心设计的、预先定义的尺度。

Bootstrap 5比Tailwind CSS好在哪里？

Bootstrap的知名度更高，所以你会比Tailwind更容易找到帮助（到目前为止）。你可以更容易地添加你自己的CSS类--而Tailwind则不鼓励这样做。这也意味着，调整是可能的。

到目前为止，在Bootrails中，我们坚持使用最新的Bootstrap版本，主要是因为所有的动态组件：1）可以使用（a11y）；2）已经免费、开源，并包含在堆栈中。这是在Tailwind区域的一个私人、锁定的主题。

利用Tailwind CSS创建一个Rails应用程序

首先，确保你已经安装了所有必要的工具

$> ruby -v  
ruby 3.1.2 # you need at least version 3 here
$> rails -v
Rails 7.0.2.4 # And Rails 7 to keep things fresh
$> bundle -v  
Bundler version 2.3.14 # Bundler 2.xx
$> foreman -v
0.87.2

初始化并设置该项目

rails new --css tailwind my_project
cd my_project

然后运行这个命令来完成设置

foreman start -f Procfile.dev

创建路由、控制器和视图来玩玩吧

配置一个默认路由。

echo "Rails.application.routes.draw do" > config/routes.rb  
echo ' get "welcome/index"' >> config/routes.rb  
echo ' root to: "welcome#index"' >> config/routes.rb  
echo 'end' >> config/routes.rb

创建一个控制器。

echo "class WelcomeController < ApplicationController" > app/controllers/welcome_controller.rb  
echo "end" >> app/controllers/welcome_controller.rb

创建一个视图。

mkdir app/views/welcome  
echo '<h1 class="text-3xl font-bold underline">Hello world!</h1>' > app/views/welcome/index.html.erb

现在你应该可以通过在浏览器中粘贴http://127.0.0.1:3000 来查看视图了！

localhost

Tailwind课程

学习的绝对最好的方法就是实验，看看会发生什么。在index.html.erb里面用Tailwind的CSS实用类来写HTML，看看你能创造什么像往常一样，在学习新东西时，手头要有 Tailwind的CSS文档!

总结

Tailwind CSS的实用性第一的方法使你可以很容易地快速设计你的应用程序。它不仅可以快速编码，还具有极强的可维护性，并且随着应用程序的增大，它的扩展性也非常好。如果你玩一玩实用类，你会立即注意到两件事：它是一致的和自成一体的。这使得推理组件的样式变得非常简单--它就在你的面前我希望你能给Tailwind CSS和实用性优先的CSS写作范式一个机会。

avatar
文章
阅读
粉丝