Tailwind CSS Typography 插件实战

Tailwind Typography 是一个处理富文本样式的官方插件。

安装配置

npm install @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
};

基础用法

<article class="prose">
  <h1>标题</h1>
  <p>正文内容...</p>
</article>

自定义样式

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            h1: {
              color: '#000',
            },
          },
        },
      },
    },
  },
};

响应式

<article class="prose prose-sm md:prose-base lg:prose-lg">
  <!-- 响应式调整 -->
</article>

小结

Typography 插件让富文本样式处理变得简单，推荐使用。