Tailwind CSS Styling with HTML

Overview

• Utilizing the Live Server package for previewing HTML files in the browser.
• Focus on styling with Tailwind CSS, which provides low-level utility classes for design.

Tailwind CSS Basics

• Utility Classes:
  • Tailwind offers classes that perform single functions, such as:
    • Changing color
    • Adjusting font size
    • Changing position
    • Adjusting padding
• Unlike frameworks like Bootstrap, Tailwind utilizes many low-level classes instead of component-based classes.

Font Size Classes

• Font size classes available in Tailwind:
  • Example classes:
    • text-xs: 0.75 rems (very small)
    • text-sm: 0.875 rems (small)
    • Up to text-6xl: 4 rems (very large)
• Unit of Measurement:
  • rem: Root em, a responsive unit based on the root font size.

Color Classes

• Extensive color palette available in Tailwind.
• Color classes can be applied to text and backgrounds.
• Syntax for Text Color:
  • text-{color}-{strength}
  • Example: text-yellow-400, text-red-700, text-gray-600

Practical Examples

• Change all text color:
  • Apply text-gray-600 to the body for a softer look.
• Override colors at the element level:
  • Example: To make an LI darker, apply text-gray-700.
• Experimenting with Colors:
  • Different shades can be applied using strengths from 100 to 900.

Font Sizes in Practice

• Making Headers Bigger:
  • Use classes such as text-lg, text-xl, and text-6xl to adjust size.
  • Example: Use text-2xl for subtitles.

Font Weight Classes

• Font weights can also be adjusted:
  • font-bold: Bold font.
  • font-light: Light font.
  • font-semibold: Semi-bold font.
• Applying Font Weight:
  • Example: Apply font-bold to headers for emphasis.
  • Apply uppercase class to make text capitalized.

Summary and Resources

• Tailwind CSS allows for quick styling adjustments with simple classes.
• Explore the Tailwind documentation for comprehensive class options for various styling needs.
  • Documentation link provided for reference.

Next Steps

• Upcoming lesson will cover margin, padding, and border classes.