WHAT - Tailwind 样式方案（不写任何自定义样式）

目录

• 一、官网
• 二、设计理念
• 三、示例
• Design System

一、官网

https://tailwindcss.com/

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
It’s fast, flexible, and reliable — with zero-runtime.

Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.

• utility-first fundamental: using a utility-first workflow to build complex components from a constrained set of primitive utilities.
• responsive design: build fully responsive user interfaces that adapt to any screen size using responsive modifiers.
• hover, focus & other states: style elements in interactive states like hover, focus, and more using conditional modifiers.
• dark mode: optimize your site for dark mode directly in your HTML using the dark modifiers.
• reusing styles: manage duplication and keep your projects maintainable by creating reusable abstractions.
• customizing the framework: customize the framework to match your brand and extend it with your own custom styles.

二、设计理念

Tailwind CSS 是一个 utility-first 的 CSS 框架，它通过提供大量的 utility 类来帮助快速构建界面，从而减少了传统 CSS 中需要编写和维护的自定义样式的数量。它的设计理念是通过组合这些 utility 类来构建界面，而不是通过手动编写每个样式。

虽然 Tailwind 可以在很大程度上取代传统的自定义 CSS 样式，但是否可以完全替代取决于具体的项目和使用场景。以下是一些考虑因素：

1. 项目规模和复杂性：对于简单的项目和原型，Tailwind 可能完全够用，因为它可以快速构建样式而不需要额外的 CSS 文件。但是对于大型、复杂的项目，可能需要更多的自定义样式或组件化的方法，这时可能还需要传统的自定义 CSS。

2. 团队使用和接受度：如果团队已经熟悉并接受了 Tailwind 的工作方式，那么可以更容易地完全使用 Tailwind。然而，如果团队成员对于 utility-first 的方法不太熟悉或有抵触情绪，可能会倾向于使用传统的自定义 CSS。

3. 性能考虑：Tailwind 生成的 CSS 文件可能会比手动编写的 CSS 文件更大，因为它包含了大量的 utility 类。这可能对于一些对性能要求非常高的项目有影响，需要进行权衡。

4. 定制化需求：如果需要非常具体和个性化的样式，可能需要额外的自定义 CSS。虽然 Tailwind 提供了一些扩展和自定义的能力，但仍然可能无法完全满足所有定制化的需求。

因此，虽然 Tailwind 可以在很多情况下取代传统的自定义 CSS 样式，但是否可以完全替代取决于项目的具体需求和团队的偏好。有些项目可能会选择混合使用 Tailwind 和传统的自定义 CSS，以达到最佳的灵活性和效率。

三、示例

以下是一些使用 Tailwind CSS 创建的常见示例或 demo：

1. 卡片组件：

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="img/card.jpg" alt="Card image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Card Title</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="px-6 py-4">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag2</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#tag3</span>
  </div>
</div>

2. 按钮组件：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

3. 响应式布局：

<div class="flex flex-wrap -mx-4">
  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-4">
    <div class="bg-white rounded shadow p-6">
      <p class="text-gray-700">Content 1</p>
    </div>
  </div>
  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-4">
    <div class="bg-white rounded shadow p-6">
      <p class="text-gray-700">Content 2</p>
    </div>
  </div>
  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-4">
    <div class="bg-white rounded shadow p-6">
      <p class="text-gray-700">Content 3</p>
    </div>
  </div>
</div>

4. 导航栏：

<nav class="bg-gray-800 p-4">
  <div class="max-w-7xl mx-auto flex items-center justify-between">
    <div class="flex items-center flex-shrink-0 text-white mr-6">
      <span class="font-semibold text-xl tracking-tight">Logo</span>
    </div>
    <div class="block lg:hidden">
      <button class="text-white hover:text-gray-400 focus:outline-none">
        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
          <path fill-rule="evenodd" d="M4 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 5h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 5h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
        </svg>
      </button>
    </div>
    <div class="hidden lg:block">
      <div class="flex">
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-gray-400 mr-4">
          Home
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-gray-400 mr-4">
          About
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-gray-400">
          Contact
        </a>
      </div>
    </div>
  </div>
</nav>

这些示例展示了如何使用 Tailwind CSS 创建简单但功能强大的界面组件和布局。通过组合各种 utility 类，可以快速实现各种设计需求，而无需手动编写大量的自定义 CSS 样式。

Design System

Using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.

https://tailwindcss.com/docs/theme