排版

Font Family

用于控制元素 Font Family 的工具类。

sans
serif
mono
CSS
Customizing
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['ui-sans-serif', 'system-ui'],
        serif: ['ui-serif', 'Georgia'],
        mono: ['ui-monospace', 'SFMono-Regular'],
        display: ['Oswald'],
        body: ['Open Sans'],
      },
    },
  },
}

Font Family 可以是数组或者逗号分隔的字符串:

{
  // Array format:
  "sans": ["Helvetica", "Arial", "sans-serif"],
  // Comma-delimited format:
  "sans": "Helvetica, Arial, sans-serif",
}

注意:Windi CSS 不会为你自动转义 Font Family 名称,如果你使用的 Font Family 包含无效标识符,请使用引号包裹或者转义它。

{
  // Won't work:
  "sans": ["Exo 2", /* ... */],
  // Add quotes:
  "sans": ["\"Exo 2\"", /* ... */],
}

字体大小

用来控制元素字体大小的工具类。

xs
sm
base
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
8xl
CSS
Customizing
windi.config.js
export default {
  theme: {
    fontSize: {
      'xs': '.75rem',
      'sm': '.875rem',
      'tiny': '.875rem',
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
    },
  },
}

你可以在 windi.config.js 文件中为每一个字体大小, 使用元组 [fontSize, lineHeight] 的形式来配置默认行高。

windi.config.js
export default {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    },
  },
}

你可以在 windi.config.js 文件中为每一个字体大小, 使用元组 [fontSize, {letterSpacing, lineHeight}] 的形式来配置默认行高。

windi.config.js
export default {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Or with a default line-height as well
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    },
  },
}

字体平滑度

用来控制元素字体平滑度的工具类。

antialiased
subpixel-antialiased
CSS

字体样式

用来控制文本样式的工具类。

italic
not-italic
CSS

字体粗细

用来控制元素字体粗细的工具类。

thin
extralight
light
normal
medium
semibold
bold
extrabold
black
400
600
CSS
Customizing
windi.config.js
export default {
  theme: {
    fontWeight: {
      'hairline': 100,
      'extra-light': 100,
      'thin': 200,
      'light': 300,
      'normal': 400,
      'medium': 500,
      'semibold': 600,
      'bold': 700,
      'extrabold': 800,
      'extra-bold': 800,
      'black': 900,
    },
  },
}

Font Variant Numeric

用来控制元素 Font Variant Numeric 的工具类。

normal-nums
ordinal
slashed-zero
lining-nums
oldstyle-nums
proportional-nums
tabular-nums
diagonal-fractions
stacked-fractions
CSS

连字符

使用 hyphens 工具类可以指定文本在多行换行时应如何断字。它可以完全防止断字,在文本中手动指定的点断字,或者让浏览器在适当的地方自动插入断字。

none
manual
auto
CSS

字符间距

用于控制元素字距的工具类。

tighter
tight
normal
wide
wider
widest
0px
2px
0.5em
CSS
Customizing
windi.config.js
export default {
  theme: {
    letterSpacing: {
      tightest: '-.075em',
      tighter: '-.05em',
      tight: '-.025em',
      normal: '0',
      wide: '.025em',
      wider: '.05em',
      widest: '.25em',
    },
  },
}

行高

用于控制元素前行距(行高)的工具类。

none
tight
snug
normal
relaxed
loose
0
1
2
3
4
5
6
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
      },
    },
  },
}

制表符宽度

用于自定义制表符(U+0009)宽度的工具类。

default
0
2
4
8
7.5px
2rem
CSS
Customizing
windi.config.js
export default {
  theme: {
    tabSize: {
      sm: '2',
      md: '4',
      lg: '8',
    },
  },
}

文本对齐

用来控制文本对齐的工具类。

left
center
right
justify
CSS

文本颜色

用于控制元素文本颜色的工具类。

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
Customizing
windi.config.js
export default {
  theme: {
    textColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

文本装饰

用于控制文本装饰的工具类。

文本装饰类型

用于控制文本装饰类型的工具类。

underline
overline
line-through
no-underline
CSS

文本装饰颜色

用于控制文本装饰颜色的工具类。

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
Customizing
windi.config.js
export default {
  theme: {
    textDecorationColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

文本装饰样式

用于控制文本装饰样式的工具类。

solid
double
dotted
dashed
wavy
CSS

文本装饰线粗细

用于控制文本装饰线粗细的工具类。

auto
from-font
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      textDecorationLength: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
    },
  },
}

文本装饰偏移量

用于控制文本装饰偏移量的工具类。

auto
1
2
3
4
5
6
7
8
0.6rem
8.5px
0.5em
CSS
Customizing
windi.config.js
export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

文本装饰不透明度

用于控制文本装饰颜色的不透明度的工具类。从 WindiCSS v3.4.0 开始作为 文本装饰颜色 的备用选项。

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      textDecorationOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

文本缩进

用于控制文本缩进的工具类。

default
xs
sm
md
lg
xl
2xl
3xl
1.8rem
2em
1/2
-xs
-1em
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      textIndent: {
        '4xl': '5rem',
        '5xl': '6rem',
      },
    },
  },
}

文本不透明度

用于控制文本颜色不透明度的工具类。

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      textOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

文本阴影

用于控制文本元素阴影的工具类。

default
sm
md
lg
xl
none
CSS
Customizing
windi.config.js
export default {
  theme: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
  },
}

文本描边

用于控制文本描边的工具类。

文本描边宽度

用于控制文本描边宽度的工具类。

default
none
sm
md
lg
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

文本描边颜色

用于控制文本描边颜色的工具类。

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
Customizing
windi.config.js
export default {
  theme: {
    textStrokeColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

文本转换

用于控制文本转换的工具类。

uppercase
lowercase
capitalize
normal-case
CSS

文本溢出

用于控制文本溢出的工具类。

truncate
overflow-ellipsis
overflow-clip
CSS

垂直对齐

用于控制 inline 或 table-cell 盒元素垂直对齐的工具类。

baseline
top
middle
bottom
text-top
text-bottom
CSS

空格

用于控制元素的空格属性的工具类。

normal
nowrap
pre
pre-line
pre-wrap
CSS

断字

用于控制元素中如何断字的工具类。

normal
words
all
CSS

书写模式

使用 writing-mode 工具类可以设置文本的书写方向是水平或是垂直排列,以及块的排列方向。为整个文档设置时,应设置在根元素上 (HTML 元素是 HTML 文档的根元素)。

normal
vertical-right
vertical-left
CSS

书写方向

使用 writing-orientation 工具类可以设置行内文本字符的方向。它只会在垂直模式对文本产生影响(当 书写模式 不是 水平上下排列 时)。它对于垂直方向的语言文本非常有用,当然也可以用于设置垂直方向的表格标题。

mixed
upright
sideways
CSS