Chapter 3: Styling and Beautification

Haiyue
18min

Chapter 3: Styling and Beautification

Learning Objectives
  • Master the color system and custom color configuration
  • Learn font, text, and typography-related utility classes
  • Proficiently use borders, shadows, and background effects
  • Understand the use of transition and animation utility classes

Color System

Built-in Color Palette

Tailwind CSS provides a rich color system, with each color having 10 shades (50-900):

<!-- Gray scale -->
<div class="bg-gray-50">Light gray</div>
<div class="bg-gray-100">Lighter gray</div>
<div class="bg-gray-500">Medium gray</div>
<div class="bg-gray-900">Dark gray</div>

<!-- Color series -->
<div class="bg-red-500">Red</div>
<div class="bg-blue-500">Blue</div>
<div class="bg-green-500">Green</div>
<div class="bg-yellow-500">Yellow</div>
<div class="bg-purple-500">Purple</div>
<div class="bg-pink-500">Pink</div>
<div class="bg-indigo-500">Indigo</div>

Color Application Scenarios

<!-- Background color -->
<div class="bg-blue-500">Blue background</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">Gradient background</div>

<!-- Text color -->
<p class="text-red-500">Red text</p>
<p class="text-gray-700">Dark gray text</p>

<!-- Border color -->
<div class="border border-green-500">Green border</div>

<!-- Placeholder color -->
<input type="text" placeholder="Enter..." class="placeholder-gray-400">

<!-- Ring color (focus and other states) -->
<button class="focus:ring-2 focus:ring-blue-500">Shows blue ring on focus</button>

Color Opacity

<!-- Opacity variants -->
<div class="bg-red-500">Opaque red</div>
<div class="bg-red-500/75">75% opacity red</div>
<div class="bg-red-500/50">50% opacity red</div>
<div class="bg-red-500/25">25% opacity red</div>
<div class="bg-red-500/10">10% opacity red</div>

<!-- Text opacity -->
<p class="text-black/90">90% opacity text</p>
<p class="text-black/60">60% opacity text</p>
<p class="text-black/30">30% opacity text</p>

Custom Colors

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // Add custom colors
        'brand-blue': '#1e40af',
        'brand-gray': '#6b7280',
        // Add color series
        'custom': {
          50: '#f8fafc',
          100: '#f1f5f9',
          500: '#64748b',
          900: '#0f172a',
        }
      }
    }
  }
}
<!-- Use custom colors -->
<div class="bg-brand-blue">Brand blue</div>
<div class="bg-custom-500">Custom color</div>

Text and Typography

Font Family

<!-- Font family -->
<p class="font-sans">Sans-serif font</p>
<p class="font-serif">Serif font</p>
<p class="font-mono">Monospace font</p>

<!-- Custom font configuration -->
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'custom': ['Inter', 'system-ui', 'sans-serif'],
        'chinese': ['PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
      }
    }
  }
}

Font Size and Line Height

<!-- Font size -->
<p class="text-xs">Extra small text (12px)</p>
<p class="text-sm">Small text (14px)</p>
<p class="text-base">Base text (16px)</p>
<p class="text-lg">Large text (18px)</p>
<p class="text-xl">Extra large text (20px)</p>
<p class="text-2xl">2x large text (24px)</p>
<p class="text-3xl">3x large text (30px)</p>
<p class="text-4xl">4x large text (36px)</p>

<!-- Line height -->
<p class="leading-tight">Tight line height</p>
<p class="leading-normal">Normal line height</p>
<p class="leading-loose">Loose line height</p>
<p class="leading-6">Fixed line height 24px</p>

Font Weight and Style

<!-- Font weight -->
<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-black">Black (900)</p>

<!-- Font style -->
<p class="italic">Italic text</p>
<p class="not-italic">Not italic text</p>

Text Decoration and Transform

<!-- Text decoration -->
<p class="underline">Underlined text</p>
<p class="overline">Overlined text</p>
<p class="line-through">Strikethrough text</p>
<p class="no-underline">No decoration text</p>

<!-- Text transform -->
<p class="uppercase">UPPERCASE TEXT</p>
<p class="lowercase">lowercase text</p>
<p class="capitalize">Capitalized Text</p>
<p class="normal-case">Normal Case</p>

Text Alignment and Handling

<!-- Text alignment -->
<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified</p>

<!-- Text overflow handling -->
<div class="w-32">
  <p class="truncate">This is a long text that will be truncated with ellipsis</p>
</div>

<div class="w-32">
  <p class="overflow-hidden">
    <span class="line-clamp-2">
      This is a long text that will be truncated after two lines with ellipsis
    </span>
  </p>
</div>

<!-- Whitespace handling -->
<p class="whitespace-nowrap">No wrap text</p>
<p class="whitespace-normal">Normal wrap</p>
<p class="whitespace-pre">Preserve whitespace format</p>

Text Typography Example

<!-- Article title combination -->
<div class="mb-8">
  <h1 class="text-4xl font-bold text-gray-900 mb-2">
    Article Main Title
  </h1>
  <h2 class="text-xl font-medium text-gray-600 mb-4">
    Subtitle Description
  </h2>
  <div class="flex items-center text-sm text-gray-500 space-x-4">
    <span>Author: John Doe</span>
    <span>•</span>
    <span>Published: 2024-01-15</span>
    <span>•</span>
    <span>Read time: 5 min</span>
  </div>
</div>

<!-- Paragraph text -->
<div class="prose max-w-none">
  <p class="text-base leading-7 text-gray-700 mb-4">
    This is the first paragraph of the article, using appropriate font size, line height, and color
    to ensure a good reading experience. There is appropriate spacing between paragraphs.
  </p>
  <p class="text-base leading-7 text-gray-700 mb-4">
    The second paragraph continues with consistent styling.
  </p>
</div>

Borders and Shadows

Border Width and Style

<!-- Border width -->
<div class="border">Default border 1px</div>
<div class="border-0">No border</div>
<div class="border-2">2px border</div>
<div class="border-4">4px border</div>
<div class="border-8">8px border</div>

<!-- Single side border -->
<div class="border-t-2">Top border</div>
<div class="border-r-2">Right border</div>
<div class="border-b-2">Bottom border</div>
<div class="border-l-2">Left border</div>

<!-- Border style -->
<div class="border-2 border-solid">Solid border</div>
<div class="border-2 border-dashed">Dashed border</div>
<div class="border-2 border-dotted">Dotted border</div>
<div class="border-2 border-double">Double border</div>

Border Radius

<!-- Border radius size -->
<div class="rounded">Small radius</div>
<div class="rounded-md">Medium radius</div>
<div class="rounded-lg">Large radius</div>
<div class="rounded-xl">Extra large radius</div>
<div class="rounded-full">Fully rounded</div>

<!-- Single side radius -->
<div class="rounded-t-lg">Top radius</div>
<div class="rounded-r-lg">Right radius</div>
<div class="rounded-b-lg">Bottom radius</div>
<div class="rounded-l-lg">Left radius</div>

<!-- Single corner radius -->
<div class="rounded-tl-lg">Top left corner</div>
<div class="rounded-tr-lg">Top right corner</div>
<div class="rounded-bl-lg">Bottom left corner</div>
<div class="rounded-br-lg">Bottom right corner</div>

Shadow Effects

<!-- Box shadow -->
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-2xl">2xl shadow</div>

<!-- Inner shadow -->
<div class="shadow-inner">Inner shadow</div>

<!-- No shadow -->
<div class="shadow-none">No shadow</div>

<!-- Shadow color -->
<div class="shadow-lg shadow-red-500/25">Red shadow</div>
<div class="shadow-lg shadow-blue-500/25">Blue shadow</div>

Combined Border and Shadow Applications

<!-- Card component -->
<div class="bg-white rounded-lg border border-gray-200 shadow-md hover:shadow-lg transition-shadow p-6">
  <h3 class="text-lg font-semibold text-gray-900 mb-2">Card Title</h3>
  <p class="text-gray-600 mb-4">Card content description...</p>
  <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
    View Details
  </button>
</div>

<!-- Input field style -->
<input
  type="text"
  placeholder="Enter content..."
  class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
         transition-colors"
>

<!-- Button variants -->
<div class="space-x-4">
  <!-- Primary button -->
  <button class="px-4 py-2 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600 hover:shadow-md transition-all">
    Primary Button
  </button>

  <!-- Secondary button -->
  <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
    Secondary Button
  </button>

  <!-- Danger button -->
  <button class="px-4 py-2 bg-red-500 text-white rounded-md shadow hover:bg-red-600 hover:shadow-md transition-all">
    Danger Button
  </button>
</div>

Backgrounds and Gradients

Background Color and Images

<!-- Background color -->
<div class="bg-blue-500">Solid color background</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">Gradient background</div>

<!-- Background image -->
<div class="bg-cover bg-center bg-no-repeat" style="background-image: url('image.jpg')">
  <!-- Or use Tailwind background utility classes -->
</div>

<!-- Background size -->
<div class="bg-auto">Auto size</div>
<div class="bg-cover">Cover</div>
<div class="bg-contain">Contain</div>

<!-- Background position -->
<div class="bg-center">Center</div>
<div class="bg-top">Top</div>
<div class="bg-right">Right</div>

Gradient Backgrounds

<!-- Linear gradients -->
<div class="bg-gradient-to-r from-red-500 to-blue-500">Left to right gradient</div>
<div class="bg-gradient-to-b from-green-400 to-blue-500">Top to bottom gradient</div>
<div class="bg-gradient-to-br from-pink-500 to-orange-400">Diagonal gradient</div>

<!-- Three-color gradient -->
<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
  Three-color gradient
</div>

<!-- Radial gradient (requires customization) -->
// tailwind.config.js - Add custom gradients
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      }
    }
  }
}

Complex Background Applications

<!-- Hero section -->
<div class="relative min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900">
  <!-- Background pattern or texture -->
  <div class="absolute inset-0 bg-black/20"></div>

  <!-- Content -->
  <div class="relative z-10 flex items-center justify-center min-h-screen text-center text-white">
    <div class="max-w-4xl mx-auto px-4">
      <h1 class="text-5xl md:text-7xl font-bold mb-6">
        Welcome to Our Website
      </h1>
      <p class="text-xl md:text-2xl text-white/90 mb-8">
        Creating the future, starting here
      </p>
      <button class="px-8 py-4 bg-white text-gray-900 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
        Get Started
      </button>
    </div>
  </div>
</div>

<!-- Feature section background -->
<section class="py-20 bg-gray-50 bg-gradient-to-b from-white to-gray-100">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">
      Our Features
    </h2>
    <!-- Content... -->
  </div>
</section>

Transitions and Animations

CSS Transitions

<!-- Basic transition -->
<button class="transition-colors duration-300 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Color transition
</button>

<!-- Multi-property transition -->
<button class="transition-all duration-300 bg-blue-500 hover:bg-blue-600 hover:scale-105 text-white px-4 py-2 rounded shadow hover:shadow-lg">
  Comprehensive transition
</button>

<!-- Transition duration -->
<div class="transition-all duration-75">75ms transition</div>
<div class="transition-all duration-150">150ms transition</div>
<div class="transition-all duration-300">300ms transition</div>
<div class="transition-all duration-500">500ms transition</div>
<div class="transition-all duration-1000">1000ms transition</div>

<!-- Transition delay -->
<div class="transition-all duration-300 delay-75">Delay 75ms</div>
<div class="transition-all duration-300 delay-150">Delay 150ms</div>

<!-- Transition timing function -->
<div class="transition-all duration-300 ease-linear">Linear transition</div>
<div class="transition-all duration-300 ease-in">Ease in</div>
<div class="transition-all duration-300 ease-out">Ease out</div>
<div class="transition-all duration-300 ease-in-out">Ease in-out</div>

Transform Effects

<!-- Scale -->
<div class="transform scale-95 hover:scale-100 transition-transform">Scale effect</div>
<div class="transform hover:scale-110 transition-transform">Zoom effect</div>

<!-- Rotate -->
<div class="transform hover:rotate-12 transition-transform">Rotate effect</div>
<div class="transform hover:rotate-180 transition-transform">180 degree rotation</div>

<!-- Translate -->
<div class="transform hover:translate-x-4 transition-transform">Horizontal move</div>
<div class="transform hover:translate-y-4 transition-transform">Vertical move</div>
<div class="transform hover:translate-x-4 hover:translate-y-4 transition-transform">Diagonal move</div>

<!-- Skew -->
<div class="transform hover:skew-x-12 transition-transform">X-axis skew</div>
<div class="transform hover:skew-y-12 transition-transform">Y-axis skew</div>

Built-in Animations

<!-- Pulse animation -->
<div class="animate-pulse bg-gray-300 h-4 rounded"></div>

<!-- Bounce animation -->
<div class="animate-bounce bg-blue-500 w-6 h-6 rounded-full"></div>

<!-- Spin animation -->
<div class="animate-spin w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full"></div>

<!-- Ping animation -->
<div class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></div>

Interactive Animation Examples

<!-- Button hover effect -->
<button class="group relative px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
  <span class="relative z-10">Get Started</span>
  <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</button>

<!-- Card hover effect -->
<div class="group bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden">
  <div class="relative overflow-hidden">
    <img src="image.jpg" alt="Image" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>
  <div class="p-6">
    <h3 class="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
      Card Title
    </h3>
    <p class="text-gray-600 mt-2">Card description content...</p>
    <div class="mt-4 transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
      <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
        View More
      </button>
    </div>
  </div>
</div>

<!-- Loading indicator -->
<div class="flex items-center justify-center space-x-2">
  <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
  <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
  <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
</div>
Animation Best Practices
  1. Performance Consideration: Prioritize CSS transforms over layout-changing properties
  2. User Experience: Animations should enhance, not interfere with user experience
  3. Accessibility: Respect user animation preference settings
  4. Moderate Use: Avoid excessive animations that lead to page clutter

Summary

Through this chapter, you should have mastered:

  • Color System: Tailwind’s complete color palette and opacity control
  • Typography Tools: Font, size, weight, alignment, and other text controls
  • Borders and Shadows: Creating visual hierarchy and depth effects
  • Background Effects: Application of solid colors, gradients, and image backgrounds
  • Animation Transitions: Adding smooth visual feedback for user interactions

These styling utility classes enable you to create beautiful, modern user interfaces. In the next chapter, we will learn about advanced features of Tailwind CSS, including custom directives and component extraction.