前端框架Tailwind CSS用法

什么是Tailwind CSS

Tailwind CSS 是一个实用程序优先的 CSS 框架，旨在使用户能够更快、更轻松地创建应用程序。 开发者可以使用实用程序类来控制布局、颜色、间距、排版、阴影等，以创建完全自定义的组件设计， 无需保留 HTML 或编写一行自定义 CSS。

Tailwind CSS官网：https://tailwindcss.com/docs/hover-focus-and-other-states

例如，假设要创建一个具有固定高度、水平填充、黑色背景色、圆角边缘和白色半粗体字体的按钮。 下面是使用 Tailwind CSS 的 HTML：

<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">Buy now</button>

HTML 包含六个实用程序类，比如：

h-10：此类将按钮设置为 10 个单位的固定高度。 px-6：该类将按钮的水平填充设置为 6 个单位。 font-semibold：此类将按钮的字体粗细设置为半粗体。 rounded-md：此类设置按钮的边框半径，使其具有圆角。 bg-black：该类将按钮的背景颜色设置为黑色。 text-white：此类将按钮的文本颜色设置为白色。

每一个类的含义也很容易理解，使用 Tailwind CSS 的学习曲线主要包括熟悉其实用程序类。 但一旦熟悉了，开发者就能够快速、一致地创建自定义组件。

Tailwind CSS的特点

Tailwind CSS 是一个底层框架， 这意味着与 Bootstrap 和 Materialize 等其他 CSS 框架不同，Tailwind CSS 不提供完全样式化的组件，如按钮、下拉菜单和导航栏。 相反，它提供实用程序类，以便开发者可以创建自己的可重用组件。

因此，与其他 CSS 框架相比，它对应用程序的外观提供了更大的灵活性和控制力，从而允许开发者创建一个更加独特的网站。

关于为什么 Tailwind CSS 如此受欢迎，下面几点也可能是一些潜在的原因：

不再有命名问题：比如通常的 “primary-link”或“primary”之间的命名纠结，又或者是遵循 BEM 并采用类似“primary__link”的规则。 Tailwind CSS 允许开发者在 HTML 标签内联样式，其范围仅限于特定标签，不会污染其他类似标签。更加可喜的是，Tailwind CSS还支持 伪类和响应性，从而最大限度保持易用性。

<a class="hover:underline">link</a>
<h1 class="text-xs sm:text-sm md:text-base lg:text-lg">Title</h1>

无应用上下文切换逻辑：Tailwind CSS 的目标是快速构建现代网站，无需离开 HTML。 出发点是正确的，而且很少有开发人员直接编写 HTML，取而代之的是JSX 或 TSX。 因此，切换到使用 CSS 文件来更改样式是一种代价高昂的上下文切换，通常开发人员只是将 CSS 编写为应用程序中的实用程序类，从而极大简化了复杂 CSS 构建管道。

- bulma.scss
- general.scss
- blog.scss
- tidbit.scss
- pagination.scss
- banner.scss
- footer.scss
- header.scss

可简单复制粘贴： Bootstrap 提供了易于上手的模板，成为任何副业或创业公司的事实标准。 但页面设计是不容易轻易复制粘贴的，因为需要同时复制 CSS 和 HTML。 然而，TailwindCSS 这一点非常友好，每个人都使用相同的实用程序类，因此开发者只需将类列表或 HTML 块复制并粘贴到应用程序就可正常工作。

<a class="text-blue hover:text-red">Link</a>

依赖性更少，体积更小： Tailwind CSS 默认情况下是 tree-shaking 的，并且没有自己的 Grid 网格或 Flexbox 设计（默认底层 CSS 概念）。 与 Bootstrap 等上一代套件相比，Bootstrap 实际上在迫使用户采用 JS、HTML、CSS 和 Saas 等 CSS 构建系统。从这一点来看，Tailwind CSS 很容易与其他框架共存。

/** 自定义的 tailwind.config.js 文件*/
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

可重复使用性： 多年来，开发人员认为 CSS 可重用性是通过 Saas 和 Less 等预处理器向 CSS 添加类层次结构来实现的。 编写最少 CSS 的最佳方法是只编写基本样式（不定义自定义样式）。

更新于：3个月前