KlayPeter的学习博客

听说还有人不会TailwindCss？最全实践指南它来啦（环境篇-附源码与效果展示）江湖传言TailwindCss 是目 - 掘金 (opens new window)

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. (opens new window)

江湖有言：TailwindCss是目前最流行的 “原子化CSS框架” ？😱 无论是github的高start还是活跃的社区，都说明他是一个好用的css的框架

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板中的类名，生成相应的样式，然后将它们写入静态 CSS 文件。

它快速、灵活、可靠 - 零运行时间

爱上TailwindCss的理由那就太多了

--- 其实一般我都是在后台或者是自己内部使用的页面使用

  • 可高度定制化，

    TailwindCss为我们提供了大量系统预设类名以及一些基础设计套件，比如尺寸、配色、布局、阴影等（换用官方的话，就是让你不离开html而开发界面😄）。不得不说，tailwindcss真的是“不爱写css的前端党”的福音呐！😏

  • 性能优化

    通过按需加载样式类，TailwindCss可以显著减少css文件大小，提高页面加载速度

  • 强大的响应式集成

    产物单位会自动转换成rem，当然也可以是其它比如em或者px等。再也无需通过媒体查询、百分比等一系列手段实现响应式了。

    .h-60{
    height: 15rem
}

.h-1{
    height: 0.25rem
}

TailwindCss安装

TailwindCss支持很多的框架

下面将 Tailwind CSS 安装为 Vite 插件

npm install tailwindcss @tailwindcss/vite

配置 Vite 插件

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

导入 Tailwind CSS

向 CSS 文件添加一个，用于导入 Tailwind CSS。@import

@import "tailwindcss";

# 开始构建过程

使用文件中配置的任何命令运行构建过程。npm run dev``package.json

npm run dev

# 开始在 HTML 中使用 Tailwind

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/src/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

还有Play CDN脚本标签可以直接添加到HTML文件中，然后开始使用 Tailwind 的实用程序类来设置内容的样式

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

然后在我们的VScode中安装一个插件Tailwind CSS IntelliSense，有了他就可以加强体验感，获得帮助了

然后再安装一个prettier-plugin-tailwindcss，帮助我们安装推荐类顺序自动对我们的类进行排序

然后使用的话就对照这个链接找对应的样式来写就好了 Tailwind CSS 组件 Playground - Tailwind Plus (opens new window)

当然我们也要学点基本的这样敲起来才快，才爽

注意

不建议将 CSS 模块和 Tailwind 一起使用

使用Tailwind ，可以通过直接再HTML中应用预先存在的类来设置元素的样式

如下面的例子，这样就不用写css<style>

div class="py-8 px-8 max-w-sm mx-auto space-y-2 bg-white rounded-xl shadow-lg sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:gap-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">
        Erin Lindford
      </p>
      <p class="text-slate-500 font-medium">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

然后到这里会有人问，为什么不直接使用内联样式呢？ “这不就是内联样式吗？”

但是与内联样式相比，使用 Util 类有几个重要的优势：

  • 响应性设计强，您不能在内联样式中使用媒体查询，但可以使用 Tailwind 的响应式实用程序轻松构建完全响应式界面。
  • 约束设计，使得构建视觉一致的 UI 变得更加容易
  • Hover、focus和其他状态容易实现

下面的知识就是官网上根据我自己的学习情况整理下来的，方便我自己复习使用

想看官方文档的跳：[Utility-First Fundamentals - Tailwind CSS (opens new window)](https://v3.tailwindcss.com/docs/hover-focus-and-other-states)

Tailwind 包含几乎所有我们需要的修饰符，包括：

这些修饰符甚至可以堆叠 (opens new window)以针对更具体的情况，例如，在深色模式下、在中间断点、悬停时更改背景颜色：

<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</button>

第一个、最后一个、奇数和偶数

:first :end :odd :even

:only-child :first-of-type :empty

表单状态

使用修饰符（如 、 和 ）设置不同状态的表单元素的样式：required invalid disabled

一些单位的要点

# 一、间距比例

在使用 Tailwind CSS 时，py-、mr- 等类名后面跟的数值是基于 Tailwind CSS 的默认间距比例系统

这些数值是从 0 到 96 的倍数，单位是 rem（即基于根元素字体大小的相对单位）。

默认间距比例系统如下：

0 -> 0rem
1 -> 0.25rem
2 -> 0.5rem
3 -> 0.75rem
4 -> 1rem
5 -> 1.25rem
6 -> 1.5rem
8 -> 2rem
10 -> 2.5rem
12 -> 3rem
16 -> 4rem
20 -> 5rem
24 -> 6rem
32 -> 8rem
40 -> 10rem
48 -> 12rem
56 -> 14rem
64 -> 16rem
72 -> 18rem
80 -> 20rem
96 -> 24rem

你可以使用这些数值来控制元素的内边距（py-、px-、pt-、pr-、pb-、pl-）和外边距（my-、mx-、mt-、mr-、mb-、ml-）。

例如：

<div className="py-4 mr-8">
  <!-- 内容 -->
</div>

如果需要更精确的控制，可以自定义 Tailwind CSS 配置文件 (tailwind.config.js) 中的 spacing 选项。以下是一个示例：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '1.5': '0.375rem', // 添加一个自定义间距值
        '2.5': '0.625rem',
      }
    }
  }
}

# 二、尺寸：宽高

在 Tailwind CSS 中，w- 和 h- 类后面的数值同样遵循默认的尺寸比例系统，不过它们可以接受的值范围更广，包括百分比、视口单位、任意值等。

以下是一些常用的示例：

# 宽度 (w-)

固定值

w-0: 0rem
w-1: 0.25rem
w-2: 0.5rem
w-3: 0.75rem
w-4: 1rem
w-5: 1.25rem
w-6: 1.5rem
w-8: 2rem
w-10: 2.5rem
w-12: 3rem
w-16: 4rem
w-20: 5rem
w-24: 6rem
w-32: 8rem
w-40: 10rem
w-48: 12rem
w-56: 14rem
w-64: 16rem
w-72: 18rem
w-80: 20rem
w-96: 24rem

百分比

w-1/2: 50%
w-1/3: 33.333333%
w-2/3: 66.666667%
w-1/4: 25%
w-2/4: 50%
w-3/4: 75%
w-1/5: 20%
w-2/5: 40%
w-3/5: 60%
w-4/5: 80%
w-1/6: 16.666667%
w-2/6: 33.333333%
w-3/6: 50%
w-4/6: 66.666667%
w-5/6: 83.333333%
w-full: 100%
w-screen: 100vw

任意值

w-px: 1px
w-auto: auto

# 高度 (h-)

固定值

h-0: 0rem
h-1: 0.25rem
h-2: 0.5rem
h-3: 0.75rem
h-4: 1rem
h-5: 1.25rem
h-6: 1.5rem
h-8: 2rem
h-10: 2.5rem
h-12: 3rem
h-16: 4rem
h-20: 5rem
h-24: 6rem
h-32: 8rem
h-40: 10rem
h-48: 12rem
h-56: 14rem
h-64: 16rem
h-72: 18rem
h-80: 20rem
h-96: 24rem

百分比

h-1/2: 50%
h-1/3: 33.333333%
h-2/3: 66.666667%
h-1/4: 25%
h-2/4: 50%
h-3/4: 75%
h-full: 100%
h-screen: 100vh

任意值

h-px: 1px
h-auto: auto

示例用法

<div className="w-1/2 h-48 bg-blue-500">
  <!-- 内容 -->
</div>

上面的示例中，w-1/2 表示宽度为 50%，h-48 表示高度为 12rem。

你可以通过自定义 tailwind.config.js 来扩展或修改这些默认值：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      width: {
        '128': '32rem', // 添加自定义宽度
      },
      height: {
        '128': '32rem', // 添加自定义高度
      },
    }
  }
}

# 三、尺寸：最大宽高

min-w-和 max-w-

  • min-w-：设置元素的最小宽度，元素宽度不会小于这个值。

  • max-w-：设置元素的最大宽度，元素宽度不会大于这个值。

min-h- 和 max-h-

  • min-h-：设置元素的最小高度，元素高度不会小于这个值。
  • max-h-：设置元素的最大高度，元素高度不会大于这个值。

常用类名

min-w-

<div className="min-w-0"></div> <!-- 没有最小宽度限制 -->
<div className="min-w-full"></div> <!-- 最小宽度为 100% -->
<div className="min-w-min"></div> <!-- 内容最小宽度 -->
<div className="min-w-max"></div> <!-- 内容最大宽度 -->
<div className="min-w-fit"></div> <!-- 自适应内容宽度 -->

max-w-

<div className="max-w-xs"></div> <!-- 最大宽度为 20rem -->
<div className="max-w-sm"></div> <!-- 最大宽度为 24rem -->
<div className="max-w-md"></div> <!-- 最大宽度为 28rem -->
<div className="max-w-lg"></div> <!-- 最大宽度为 32rem -->
<div className="max-w-xl"></div> <!-- 最大宽度为 36rem -->
<div className="max-w-2xl"></div> <!-- 最大宽度为 42rem -->
<div className="max-w-3xl"></div> <!-- 最大宽度为 48rem -->
<div className="max-w-4xl"></div> <!-- 最大宽度为 56rem -->
<div className="max-w-5xl"></div> <!-- 最大宽度为 64rem -->
<div className="max-w-6xl"></div> <!-- 最大宽度为 72rem -->
<div className="max-w-full"></div> <!-- 最大宽度为 100% -->
<div className="max-w-screen-sm"></div> <!-- 最大宽度为 640px -->
<div className="max-w-screen-md"></div> <!-- 最大宽度为 768px -->
<div className="max-w-screen-lg"></div> <!-- 最大宽度为 1024px -->
<div className="max-w-screen-xl"></div> <!-- 最大宽度为 1280px -->

min-h-

<div className="min-h-0"></div> <!-- 没有最小高度限制 -->
<div className="min-h-full"></div> <!-- 最小高度为 100% -->
<div className="min-h-screen"></div> <!-- 最小高度为 100vh -->

max-h-

<div className="max-h-0"></div> <!-- 最大高度为 0 -->
<div className="max-h-full"></div> <!-- 最大高度为 100% -->
<div className="max-h-screen"></div> <!-- 最大高度为 100vh -->

示例：

<div className="container mx-auto p-4">
  <div className="min-w-full max-w-2xl min-h-screen max-h-96 bg-blue-100 p-4">
    <!-- 内容 -->
  </div>
</div>

# 四、响应式设计

Breakpoint prefix 在 Tailwind CSS 中，sm:、md:、lg:、xl: 和 2xl: 这些前缀通常用于响应式设计，以定义不同屏幕尺寸下的样式。具体来说，它们代表以下屏幕断点：

-sm：适用于小屏幕（min-width: 640px），@media (min-width: 640px) { ... }
-md：适用于中等屏幕（min-width: 768px），@media (min-width: 768px) { ... }
-lg：适用于大屏幕（min-width: 1024px），@media (min-width: 1024px) { ... }
-xl：适用于超大屏幕（min-width: 1280px），@media (min-width: 1280px) { ... }
-2xl：适用于超超大屏幕（min-width: 1536px），@media (min-width: 1536px) { ... }

你可以使用这些前缀来定义在不同屏幕尺寸下的样式。例如：

<div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6">
  <!-- 内容 -->
</div>

在所有屏幕尺寸下，宽度为 100%（w-full）。
在小屏幕及更大屏幕下，宽度为 50%（sm:w-1/2）。
在中等屏幕及更大屏幕下，宽度为 33.333333%（md:w-1/3）。
在大屏幕及更大屏幕下，宽度为 25%（lg:w-1/4）。
在超大屏幕及更大屏幕下，宽度为 20%（xl:w-1/5）。
在超超大屏幕及更大屏幕下，宽度为 16.666667%（2xl:w-1/6）。

配置 你可以在 tailwind.config.js 文件中自定义这些断点：

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      // 自定义断点
      '3xl': '1920px',
    },
  },
};

# 场景

这些实际上可以用在几乎所有 Tailwind CSS 类中，以便为不同的屏幕尺寸设置不同的样式。这种使用方法基于 Tailwind CSS 的响应式设计原则。

  1. 布局相关类

    <div className="p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12 2xl:p-16">
  <!-- 内容 -->
</div>

    在这个示例中，不同屏幕尺寸下内边距（padding）会有所不同。

  2. 尺寸相关类

    <div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6">
  <!-- 内容 -->
</div>

    在这个示例中，不同屏幕尺寸下宽度会有所不同。

  3. 文字相关类

    <p className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl">
  响应式文本
</p>
在这个示例中，不同屏幕尺寸下字体大小会有所不同。

  4. 间距相关类

    <div className="mt-4 sm:mt-6 md:mt-8 lg:mt-10 xl:mt-12 2xl:mt-16">
  <!-- 内容 -->
</div>

    在这个示例中，不同屏幕尺寸下上外边距（margin-top）会有所不同。

  5. 背景颜色

    <div className="bg-gray-100 sm:bg-blue-100 md:bg-green-100 lg:bg-red-100 xl:bg-yellow-100 2xl:bg-purple-100">
  <!-- 内容 -->
</div>

    在这个示例中，不同屏幕尺寸下背景颜色会有所不同。

  6. Flexbox 和 Grid 类

    <div className="flex flex-col sm:flex-row md:flex-wrap lg:flex-nowrap xl:flex-row-reverse 2xl:flex-col-reverse">
  <!-- 内容 -->
</div>

    在这个示例中，不同屏幕尺寸下 flex 布局会有所不同。

综合示例

<div className="container mx-auto p-4">
  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
    <div className="bg-gray-300 h-24"></div>
    <div className="bg-gray-300 h-24"></div>
    <div className="bg-gray-300 h-24"></div>
    <div className="bg-gray-300 h-24"></div>
    <div className="bg-gray-300 h-24"></div>
    <div className="bg-gray-300 h-24"></div>
  </div>
</div>

学习vite