text-(color)

文字色を変更する。

text-first_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-second_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-third_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-important_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-info_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

  <p class="text-first">text-first_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-second">text-second_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-third">text-third_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-important">text-important_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-info">text-info_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

text-mild

文字色を弱める。.text-(color)と併用すると、指定した色を弱める。

text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-first_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-second_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-third_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-info_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-important_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

  <p class="text-mild">text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-first text-mild">text-first_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-second text-mild">text-second_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-third text-mild">text-third_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-info text-mild">text-info_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-important text-mild">text-important_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

text-inverse

文字色を反転する(背景色を文字色とする)。

text-inverse_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

  <div class="bg-inverse">
      <p class="text-inverse">text-inverse_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  </div>

text-(size)

文字サイズを変更する。単位がremではなく、emである点に注意。

text-xxs_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-xs_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-sm_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-lg_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-xl_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

text-xxl_吾輩は猫である。名前はまだ無い。text-md_どこで生れたかとんと見当がつかぬ。

  <p class="text-xxs">text-xxs_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-xs">text-xs_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-sm">text-sm_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

  <p class="text-lg">text-lg_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-xl">text-xl_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
  <p class="text-xxl">text-xxl_吾輩は猫である。<span class="text-md">名前はまだ無い。text-md_どこで生れたか</span>とんと見当がつかぬ。</p>