Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Basic Styling - Colors | Core Concepts and Basic Styling
Tailwind CSS: Styling for Modern Web Development
course content

Contenido del Curso

Tailwind CSS: Styling for Modern Web Development

Tailwind CSS: Styling for Modern Web Development

1. Introduction and Setup
2. Core Concepts and Basic Styling
3. Building Basic Components
4. Layout Basics
5. Responsiveness and Customization

bookBasic Styling - Colors

Colors

Tailwind CSS provides a wide range of color utilities that you can apply to elements. These utilities help you quickly set background colors, text colors, and border colors.

Note

The numbers in these classes represent different shades of the base color. These numbers range from 50 to 900:

  • Lower numbers (e.g., 50): Lighter shades;
  • Higher numbers (e.g., 900): Darker shades.

Background Colors

Use the bg- prefix followed by the color name and shade.

html

index

css

index

js

index

copy

Text Colors

Use the text- prefix followed by the color name and shade.

html

index

css

index

js

index

copy

Border Colors

Use the border- prefix followed by the color name and shade.

html

index

css

index

js

index

copy

Note

To see all the existing colors, you can refer to the Tailwind documentation below.

1. Which class would you use to set a background color to blue?
2. Which utility class would you use to set the text color to gray?
Which class would you use to set a background color to blue?

Which class would you use to set a background color to blue?

Selecciona la respuesta correcta

Which utility class would you use to set the text color to gray?

Which utility class would you use to set the text color to gray?

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 3
some-alt