Cor e opacidade do texto
Aplique utilitários de cor de texto da paleta de cores do Tailwind e ajuste a opacidade para criar hierarquia e contraste.
Cor e opacidade do texto é uma aula grátis de Tailwind CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Tailwind CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Tailwind CSS Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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.
Perguntas Frequentes
A aula “Cor e opacidade do texto” é grátis?
Sim — o texto completo de “Cor e opacidade do texto” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Tailwind CSS Academy, atualize para CoddyKit PRO. O curso de Tailwind CSS Academy inclui 4 aulas no total.
O que vou aprender em “Cor e opacidade do texto”?
Aplique utilitários de cor de texto da paleta de cores do Tailwind e ajuste a opacidade para criar hierarquia e contraste. Você pratica Tailwind CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Tailwind CSS Academy?
Nenhuma experiência prévia é necessária. Tailwind CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Cor e opacidade do texto”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Tailwind CSS Academy?
Sim. Cada aula de Tailwind CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Tamanho e peso da fonte
- Cor e opacidade do texto
- Altura da linha e espaçamento entre letras
- Alinhamento e decoração do texto