テキストの色と不透明度
Tailwindのカラーパレットによるテキストカラーのユーティリティを適用し、不透明度を調整して階層とコントラストを作ります。
「テキストの色と不透明度」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Tailwind's Color System
Tailwind ships a rich color palette: 22 colors like blue, indigo, red, and green, each with 11 shades from 50 (near-white) to 950 (near-black). Plenty to work with.
<!-- Tailwind color naming: {color}-{shade} -->
<p class="text-blue-500">Blue 500</p>
<p class="text-blue-700">Blue 700 (darker)</p>
<p class="text-blue-200">Blue 200 (lighter)</p>Applying Text Color
Color text with text-{color}-{shade}. Low shades are light, mid are vivid, high are dark. text-gray-700 reads softly on white; text-gray-900 gives bold contrast.
<h1 class="text-gray-900">Main Heading</h1>
<h2 class="text-gray-700">Sub Heading</h2>
<p class="text-gray-600">Body text at a comfortable shade.</p>
<span class="text-gray-400">Metadata or secondary info</span>Brand Colors in Text
Use vivid shades for meaning: text-blue-600 for links, text-red-600 for errors, text-green-600 for success. These conventions feel instantly familiar to users.
<a href="#" class="text-blue-600 hover:text-blue-800 underline">Link</a>
<p class="text-red-600">Error: Invalid email address.</p>
<p class="text-green-600">Success: Changes saved!</p>
<p class="text-yellow-700">Warning: Disk space is low.</p>Text Opacity Modifier
Fade a color with the slash modifier: text-blue-600/50 shows blue at 50% opacity. It is cleaner than element opacity, which would dim the children too.
<p class="text-gray-900/100">Fully opaque</p>
<p class="text-gray-900/75">75% opacity</p>
<p class="text-gray-900/50">50% opacity</p>
<p class="text-gray-900/25">25% opacity</p>Color Contrast for Accessibility
For accessibility, text needs enough contrast — aim for a 4.5:1 ratio. Shade 700 on white usually passes; avoid light shades 50 to 400 as text on white.
<!-- Accessible: dark text on light background -->
<p class="bg-white text-gray-800">Good contrast ratio (passes WCAG AA)</p>
<!-- Inaccessible: light text on white background -->
<p class="bg-white text-gray-300">Poor contrast (fails WCAG)</p>Text Color on Dark Backgrounds
On dark backgrounds, flip the text light: text-white or text-gray-100 for primary, text-gray-400 for secondary. That is the heart of a clean dark theme.
<div class="bg-gray-900 p-8 rounded-xl">
<h2 class="text-white font-bold text-2xl mb-2">Dark Card</h2>
<p class="text-gray-400 text-sm">Secondary text on dark background.</p>
<a href="#" class="text-indigo-400 hover:text-indigo-300">Learn more</a>
</div>Gradient Text Effect
Make a gradient text effect with bg-gradient-to-r from-* to-* plus bg-clip-text text-transparent. The gradient shows only through the letters — very modern.
<h1 class="text-5xl font-extrabold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Gradient Headline
</h1>Hover Color Changes
Add a hover: variant to change text color on hover — essential for links and buttons. Use transition-colors for a smooth fade, and pair it with focus:.
<a href="#"
class="text-gray-600 hover:text-indigo-600 focus:text-indigo-600 transition-colors duration-200 font-medium">
Hover or focus me
</a>Semantic Color Usage
Pick a semantic palette: one color for brand, red for danger, green for success, yellow for warnings. Used consistently, color teaches users at a glance.
<div class="space-y-2">
<p class="text-indigo-600 font-medium">Primary action</p>
<p class="text-red-600 font-medium">Danger / Error</p>
<p class="text-green-600 font-medium">Success / Confirmed</p>
<p class="text-yellow-700 font-medium">Warning / Caution</p>
<p class="text-gray-500 font-medium">Neutral / Disabled</p>
</div>Text Color in Dark Mode
Add a dark: prefix to any text color and it kicks in during dark mode. One line of HTML serves both your light and dark themes — no duplicate markup.
<p class="text-gray-900 dark:text-gray-100">
Adapts automatically between themes.
</p>
<p class="text-gray-500 dark:text-gray-400">
Secondary text adapts too.
</p>Using Arbitrary Color Values
Need a color outside the palette? Use brackets: text-[#ff5733] for an exact hex. Handy for brand colors, but use sparingly to keep your system consistent.
<!-- Arbitrary color (one-off brand match) -->
<span class="text-[#ff5733] font-bold">Brand Orange</span>
<!-- Better: define in config for reuse -->
/* tailwind.config.js theme.extend.colors.brand: '#ff5733' */
<span class="text-brand font-bold">Brand Orange</span>Quick Check
Quick check! See how color and opacity landed. 🎨
Lesson Recap
Great! text-{color}-{shade} taps the palette, the slash sets opacity without dimming children, and dark: handles dark mode. Next up: line height and spacing.
よくある質問
「テキストの色と不透明度」レッスンは無料ですか？
はい。「テキストの色と不透明度」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「テキストの色と不透明度」で何を学びますか？
Tailwindのカラーパレットによるテキストカラーのユーティリティを適用し、不透明度を調整して階層とコントラストを作ります。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「テキストの色と不透明度」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- フォントサイズとフォントの太さ
- テキストの色と不透明度
- 行の高さと文字間隔
- テキストの配置と装飾