很火的CSS框架

安装 - TailwindCSS中文文档 | TailwindCSS中文网

特性

安装

可以通过vite,postcss,tailwind cli等工具使用tailwind.比如在vite下

1
2

npm install tailwindcss @tailwindcss/vite

1
2
3
4
5
6
7
8

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

1

@import "tailwindcss";

1

npm run dev

Preflight

基于 modern-normalize构建，Preflight 是一组为 Tailwind 项目设计的基样式，旨在平滑跨浏览器的差异，并使得在设计系统约束内工作更加容易. 导入tailwincss到项目中时,preflight.css被注入到’base’层

核心概念

使用工具类修改样式

tailwindcss提供一系列utility classes,它类似inline styles担有差异,但是使用工具类比内联样式具有许多重要优势，例如：

• 设计受限制——使用内联样式，每个值都是一个魔法数字。使用utility classes，您可以从预定义的设计系统中选择样式，这使得构建视觉上一致的 UI 变得容易得多。
• 悬停、聚焦和其他状态——内联样式无法针对悬停或聚焦等状态，但 Tailwind 的状态变体使得使用实用类轻松地为这些状态添加样式。
• 媒体查询 — 你不能在行内样式中使用媒体查询，但你可以使用 Tailwind 的响应式变体轻松构建完全响应式界面。

修饰hover与focus状态

1

<button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>

媒体查询与断点

1
2
3

<div class="grid grid-cols-2 sm:grid-cols-3">
  <!-- ... -->
</div>

dark mode

现代网站经常使用黑白模式。设置暗黑模式下的元素样式只需在想要应用的任何实用工具前添加 dark: 前缀即可

使用任意值

1
2
3

<button class="bg-[#316ff6] ...">
  Sign in with Facebook
</button>

当需要在主题外使用一个一次性值时，使用特殊方括号语法来指定任意值：

1

<button class="bg-[#316ff6] ...">  Sign in with Facebook</button>

复杂选择器

有时需要在多种条件组合下对元素进行样式设置，例如在暗黑模式下、在特定断点处、鼠标悬停时以及当元素具有特定数据属性时

1
2
3

<button class="dark:lg:data-current:hover:bg-indigo-600 ...">
  <!-- ... -->
</button>

主题变量

主题变量是使用 @theme 指令定义的特殊 CSS 变量，它们影响项目中存在的实用类。主题变量不仅仅是 CSS 变量，它们还指示 Tailwind 创建可以在 HTML 中使用的新实用类。主题变量不仅仅是 CSS 变量，它们还指示 Tailwind 创建您可以在 HTML 中使用的新实用类。

一些 Tailwind 中的实用类，如 flex 和 object-cover 是静态的，并且从项目到项目总是相同的。但许多其他类是由主题变量驱动的，并且仅因为您定义了主题变量而存在

比如说,font-sans ， font-serif ，和 font-mono 工具类默认存在，因为 Tailwind 的默认主题定义了 --font-sans ， --font-serif ，和 --font-mono 主题变量

如果定义了另一个主题变量，如 --font-poppins ，则将可用一个 font-poppins 实用类与之配合

主题变量在命名空间中定义，每个命名空间对应一个或多个实用类或变体 API。

在当前命名空间中定义新的主题变量，将使项目中的相应实用工具和变体可用

在导入tailwindcss时,导入了主题,base(也就是预定义的一些样式)和工具类.

1
2
3
4

@layer theme, base, components, utilities;
@import "./theme.css" layer(theme);
@import "./preflight.css" layer(base);
@import "./utilities.css" layer(utilities);

自定义主题变量

默认主题变量非常通用，适用于构建截然不同的设计，但它们仍然只是一个起点。自定义颜色方案、字体和阴影等元素以构建心中的设计是非常常见的。

1
2
3
4

@import "tailwindcss";
@theme {
  --font-script: Great Vibes, cursive;
}

1

<p class="font-script">This will use the Great Vibes font family.</p>

覆盖主题变量

1
2
3
4

@import "tailwindcss";
@theme {
  --breakpoint-sm: 30rem;
}

使用自定义主题

刚才是重定义与默认主题相同变量以覆盖. 如果想要全禁用默认主题并仅使用自定义值，请将全局主题变量命名空间设置为 initial

1
2
3
4
5
6
7
8
9
10
11

@import "tailwindcss";
@theme {
  --*: initial;
  --spacing: 4px;
  --font-body: Inter, sans-serif;
  --color-lagoon: oklch(0.72 0.11 221.19);
  --color-coral: oklch(0.74 0.17 40.24);
  --color-driftwood: oklch(0.79 0.06 74.59);
  --color-tide: oklch(0.49 0.08 205.88);
  --color-dusk: oklch(0.82 0.15 72.09);
}

添加自定义样式

如果想更改颜色调板、间距比例、字体比例或断点等设置，使用 CSS 中的 @theme 指令添加您的自定义设置

1
2
3
4
5
6
7
8
9
10
11
12
13

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

使用任意值

1
2
3

<div class="top-[117px] lg:top-[344px]">
  <!-- ... -->
</div>

当任意值需要包含空格时，请使用下划线（ _ ）代替，Tailwind 将在构建时自动将其转换为空格

如果只想为页面设置一些默认值（如文本颜色、背景颜色或字体家族），最简单的选项就是向 html 或 body 元素添加一些类：

1
2
3
4
5
6
7
8

@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
  h2 {
    font-size: var(--text-xl);
  }
}

如果想为特定的 HTML 元素添加自己的默认基础样式，使用 @layer 指令将这些样式添加到 Tailwind 的 base 层

1
2
3
4
5
6
7
8

@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
  h2 {
    font-size: var(--text-xl);
  }
}

添加variant

使用 @variant 指令在自定义 CSS 中应用 Tailwind 变体

1
2
3
4
5
6
7
8

.my-element {
  background: white;
  @variant dark {
    @variant hover {
      background: black;
    }
  }
}

自定义设置值

在tailwind.config.js文件中,由于 Tailwind 是一个用于构建定制用户界面的框架，因此在设计之初就考虑到了定制化。

默认情况下，Tailwind会在项目根目录下查找一个可选的 tailwind.config.js 文件，您可以在其中定义任何自定义内容。

1

npx tailwindcss init

1
2
3
4
5
6
7
8
9

module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

Customizing Colors - TailwindCSS中文文档 | TailwindCSS中文网

重用

Reusing Styles - TailwindCSS中文文档 | TailwindCSS中文网

一般使用两种方法,一种使用@layer和@apply,另一种使用react或者vue框架定义component.