likes
comments
collection
share

Tailwind CSS v3——核心思想（一）基础类与响应式设计

作者站长头像
站长
· 阅读数 23

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

系列文章可以查看《Tailwind》专栏

参考：

基础类

Tailwind 提供了多种默认基础类，如断点 bg 表示 background，这些基础类按照规则可以用横线 - 相连进行组合，构成特点的语义，例如 bg-white 表示背景色采用白色，经过编译后生成相应的样式表，这样就可以将样式应用在 HTML 元素上。

使用 Tailwind 提供的这些基础类 class 不同组合，可以不写一行代码，（无需离开 HTML 文档）就实现复杂的页面样式设计。

💡 使用基础类，实际是从预设的设计系统中挑选样式，这样可以保持设计的视觉统一；而这些底层 low level 的基础样式的自由组合，则满足定制化的需求，避免设计出来的网页千遍一律。这样一致性和自由度都可以兼得。

💡 使用基础类来设置样式，其中一个问题是页面会出现很多重复的基础类组合，例如页面的所有按钮元素需要设置相同的样式，所以它们具有相同的基础类组合，而如果对它们进行样式更新时就变得很繁琐了，需要依次改它们的类名。Tailwind 支持将这些重复使用的基础类组合提取出来，并提供 @apply 指令来将它们应用到样式表中，再给它们其一个更抽象的类名，如 btn，这样就可以复用这些基础类组合了，而且便于后续的维护。

重用样式

使用上述如「原子级别」精细的基础类会有一个「副作用」，就是在 HTML 中会有大量相同的类组合，如页面的按钮都使用了很多相同基础类。

为了避免代码冗余以及后续维护方便，Tailwind 还提供了一种抽取共用基础类的方法。

可以将这些相同的一系列基础类提取出来，在它们前面添加指令 @apply，然后写在样式表中，并为它们指定一个类名，即可将它们「汇总」在一个新的更抽象的类名下 high level abstract class。

然后我们就可以将新类名添加在 HTML 标签中，最后产生相同的样式效果。

<!-- 原始的按钮元素 -->
<!-- 📄 index.html -->
<!-- Before extracting a custom class -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
  Save changes
</button>

/* 📄 styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 应该指定这些自定义类应用到哪一个容器中 */
/* 由于先后顺序对于 CSS 的优先级很重要 */
/* 应用到 components 容器中，这样在 HTML 页面同时使用 btn-primary 和其他基础类，如 bg-sky-400 最终背景色还是以基础类 bg-sky-400 为准，由于 utilities 容器在更后的次序才添加到样式表中，它们的优先级更高 */
@layer components {
  /* 将基础类组合抽取出来 */
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

💡 此外，还可以结合编辑器的多光标编辑功能，实现高效的编辑。例如对于 VS Code 可以按住 Alt 键后用鼠标点击不同位置就可以同时创建多个光标同时编辑；也可以选择特定的类名，多次按下快捷键 Ctrl+D 可以依次选中页面中的相同的类名。如果使用前端框架进行开发，还可以将多个页面复用的代码抽取出来形成组件，这样也只需要维护一套代码。

响应式设计

Tailwind 提供五个默认的断点：

  • sm 640px
  • md 768px
  • lg 1024px
  • xl 1280px
  • 2xl 1536px

只需要在类名前添加断点名称，并用冒号 : 分隔，即可将该样式设定特定页面宽度下才起作用

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

💡 Tailwind 的断点都是基于 min-width 最小宽度的，这是遵循移动优先 mobile first 的原则，即默认样式就是移动端小屏的样式，然后各断点是指当页面宽度大于特定值时，才将样式响应式地进行变化。

可以在 Tailwind 的配置文件 tailwind.config.js 定制断点

// 📄 tailwind.config.js
module.exports = {
  theme: {
    // 直接在 theme 的 screens 属性中定制的断点会覆盖所有默认断点
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}
转载自:https://juejin.cn/post/7072173398129901598
评论
请登录