tawindcss新手入门

一、简单使用

先看下这段代码

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5>
  <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />
  <div>
    <div class="text-xl font-medium text-black dark:text-white">ChitChat</div>
    <p class="text-gray-500 dark:text-gray-400">You have a new message!</p>
  </div>
</div>

显示效果如下：

 在上面的UI中，列举几个实用类和css样式的映射：

实用类	css样式
flex	display： flex;
bg-white	background-color: white;
size-12	width:12px;height:12px;
text-xl	font-size: 20px;

 

• `display` 和 `padding` 实用工具（`flex`、`shrink-0` 和 `p-6`）来控制整体布局；
• `max-width` 和 `margin` 实用工具（`max-w-sm` 和 `mx-auto`）来约束卡片宽度并使其水平居中；
• `background-color`、`border-radius` 和 `box-shadow` 实用工具（`bg-white`、`rounded-xl` 和 `shadow-lg`）来设置卡片外观的样式；
• `width` 和 `height` 实用工具（`size-12`）来设置 logo 图片的宽度和高度；
• `gap` 实用工具（`gap-x-4`）来处理 logo 和文本之间的间距；
• `font-size`、`color` 和 `font-weight` 实用工具（`text-xl`、`text-black`、`font-medium` 等）来设置卡片文本的样式。

以上实现方式都可以在官网文档中找到对应样式：https://tailwindcss.com/docs/flex

二、核心功能

1.使用实用类（utility classes）进行样式设置

     tailwindcss制定了大量预定原子类，能够方便的定义css样式，类似于内联样式，不用写style代码块，但是和内联样式有很大区别。

2.悬停、焦点和其他状态

    Tailwind 包括几乎所有需要的变体，包括：

• 伪类，例如 :hover、:focus、:first-child 和 :required
• 伪元素，例如 ::before、::after、::placeholder 和 ::selection
• 媒体和功能查询，例如响应式断点、暗黑模式和 prefers-reduced-motion
• 属性选择器，例如 [dir="rtl"] 和 [open]
• 子选择器，例如 & > * 和 & *

<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700">
  Save changes
</button>

3.响应式设计

   Tailwind 提供5个不同的常见断点，不需要像postcss等插件配置，五个断点，来自常见的设备分辨率。

断点前缀	最小宽度	CSS
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }

4.主题变量

当想要使用 :root 定义常规 CSS 变量在 Tailwind 项目中可以使用。当您希望定义的样式映射到 utility 类时，必须使用 @theme。

 <p class="text-gray-700">
      <span class="font-medium text-gray-950 dark:text-white">Tom Watson</span> mentioned you in
      <span class="font-medium text-gray-950 dark:text-white">Logo redesign</span>
    </p>

'text-gray-700' 是tailwindcss提供的用于控制元素文本颜色的实用类，如果通过自定义主题变量，使用 --color-* 主题变量来自定义项目中的颜色 

@theme {
  --color-main-700: #383874;
  --color-main-600: #1d2129;
  --color-main-500: #435067;
  --color-main-400: #86909c;
  --color-main-300: #4e5969;
}

在项目中使用

 <p class="text-main-700"> </p>

5.暗黑模式

Tailwind 包括一个 dark 变体，使您可以在启用暗黑模式时以不同的方式设置网站样式。

6.函数和指令

指令是Tailwind 特有自定义的 @规则，列举几个常见的指令和函数。

@import    使用 @import 指令内联导入 CSS 文件，包括 Tailwind 本身

@import "tailwindcss";

@theme   使用 @theme 指令自定义项目的主题或者样式，例如字体、颜色和断点

@utility 使用 @utility 指令将自定义样式，这些实用程序可与 hover、focus 和 lg 等变体一起使用

@apply 使用 @apply 指令将任何现有的实用类内联到您自己的自定义 CSS 中

@layer utilities {
  .df-center {
    @apply flex items-center justify-center;
  }
  .slider-transition {
    transition: transform 0.3s ease-out;
  }
  .textover-ellipsis-two {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 设置最大显示行数 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
}
// 使用：
<div class="df-center"></div>

--alpha()  使用 --alpha() 函数调整颜色的不透明度

输入css
.my-element {
  color: --alpha(var(--color-lime-300) / 50%);
}
编译后的css
.my-element {
  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}

--spacing() 使用 --spacing() 函数根据您的主题生成间距值

输入css
.my-element {
  margin: --spacing(4);
}
编译后的css
.my-element {
  margin: calc(var(--spacing) * 4);
}