@_tw/typography 中文文档教程
_tw Typography
Tailwind Typography 的一个分支:
- Removes the
className
argument, replacing it with separate arguments forpostTitleSelector
andpostContentSelector
- Uses a plain
body
selector whenpostContentSelector
isfalse
这些更改生成与 WordPress 块编辑器兼容的编辑器样式,并且还应用 Tailwind Typography 的 h1
样式到具有适当帖子标题选择器(例如,.entry-title
)的标题,而不考虑标题级别。
此分支的版本号将与 Tailwind Typography 本身的版本号保持同步。
Usage
对于前端样式:
// tailwind-frontend.config.js
module.exports = {
presets: [
require( './tailwind.config.js' ),
],
plugins: [
require( '@tailwindcss/typography' )(),
],
};
对于编辑器样式:
// tailwind-editor.config.js
module.exports = {
presets: [
require( './tailwind.config.js' ),
],
plugins: [
require( '@tailwindcss/typography' )( {
postTitleSelector: '.editor-post-title__block .editor-post-title__input',
postContentSelector: false,
} ),
],
};
要找到针对 WordPress 编辑器优化的 Tailwind 排版样式,请参阅 _tw 存储库。
_tw Typography
A fork of Tailwind Typography that:
- Removes the
className
argument, replacing it with separate arguments forpostTitleSelector
andpostContentSelector
- Uses a plain
body
selector whenpostContentSelector
isfalse
These changes generate editor styles compatible with the WordPress block editor and also apply Tailwind Typography’s h1
styles to headings with the appropriate post title selector (e.g., .entry-title
) regardless of heading level.
The version number of this fork will be kept in sync with that of Tailwind Typography itself.
Usage
For frontend styles:
// tailwind-frontend.config.js
module.exports = {
presets: [
require( './tailwind.config.js' ),
],
plugins: [
require( '@tailwindcss/typography' )(),
],
};
For editor styles:
// tailwind-editor.config.js
module.exports = {
presets: [
require( './tailwind.config.js' ),
],
plugins: [
require( '@tailwindcss/typography' )( {
postTitleSelector: '.editor-post-title__block .editor-post-title__input',
postContentSelector: false,
} ),
],
};
To find Tailwind Typography styles optimized for the WordPress editor, please see the tailwind/tailwind-typography.config.js
file in the _tw repository.