🎨

Tailwind CSS Crash Course

Jun 29, 2024

Tailwind CSS Crash Course

Introduction

  • Topic: Tailwind CSS 't
  • Goal: Learn the fundamentals of Tailwind CSS and build a Nike landing page
  • Extras: Complementary starter kit including quick reference guide, list of component libraries, and a complete eBook

Tailwind CSS Overview

  • Definition: Utility-first CSS framework for creating responsive web interfaces
  • Comparison: Unlike Bootstrap, Tailwind doesn’t impose predefined styles, providing complete control over customization
  • Adoption: Used by companies like OpenAI, Shopify, GitHub, Microsoft, NASA
  • Core Feature: Utility classes that enhance development speed without writing custom CSS
  • Component Libraries: Tailwind UI, Headless UI, Shad CN

How Tailwind Works

  • Basic CSS vs Tailwind: Tailwind uses utility classes (e.g., flex, item-center) instead of writing CSS
  • Generated CSS: Tailwind automatically generates CSS classes for the utility classes used
  • Customization: Utilize custom values and just-in-time compiler for on-the-fly CSS generation
  • Breakpoints: Tailwind offers standardized breakpoints for responsive design
  • Pseudo-classes: Easily manage hover, active, focus states using Tailwind’s utility-first approach

Setup and Configuration

  • Initial Setup: Use Vite with Tailwind CSS
  • Configuration Files: Tailwind requires specific configuration files (tailwind.config.js) for setting up paths, themes, etc.
  • Integrating Fonts and Classes: Utilizing index.css for importing fonts and defining custom classes

Core Concepts and Components

Layout and Flexbox

  • Flexbox: Essential for responsive design; properties like flex, justify-center, items-center
  • Grids: Utilize grid properties for layout (grid-cols, gap)
  • Utility Classes: w-full, h-10, bg-color, rounded-md
  • Aspect-Ratio, Box Sizing, Position: Tailwind simplifies these with utility classes

Media Queries and Responsiveness

  • Breakpoints: SM, MD, LG, XL, 2XL (e.g., md:flex, lg:bg-gray)
  • Responsive Utilities: Set styles for different screen resolutions easily
  • Responsive Text and Elements: Example utilities like text-center md:text-left

Dark Mode

  • Setup: Use darkMode: 'class' in the Tailwind config
  • Classes: Prefix utility classes with dark: (e.g., dark:bg-black)

Customization and Extending

  • Config File: Extend Tailwind’s default theme using tailwind.config.js
  • Custom Colors and Sizes: Add custom sizes/colors using the extend property
  • Apply Directive: Use @apply to combine multiple utility classes into a single class

Building a Nike Landing Page

Project Structure

  • Files and Folders: Organized into components and sections (e.g., Components, Sections)
  • Initial Components: Navigation bar, Hero section, Product cards, Footer

Implementation Details

Hero Section

  • Components: Title, Description, Button, Shoe Image
  • Utility Classes: flex, justify-between, items-center, w-full, h-10, bg-color, rounded-md
  • Dynamic Elements: Changing the shoe image upon click

Popular Products Section

  • Components: Product cards displaying image, name, price, rating
  • Utility Classes: Grid utilities (grid-cols, gap), flex properties

Super Quality Section

  • Layout: Image and text sections
  • Components: Reused classes and styles from the Hero section

Services Section

  • Components: Repeating cards for different services using a flex layout
  • Utility Classes: Flex properties, margins, padding

Special Offers Section

  • Content: Promotional content with two buttons
  • Layout and Styling: Flex properties, dynamic utility classes, button reusability

Customer Reviews

  • Components: Individual review cards
  • Styling: Consistent typography and color usage
  • Layout: Flex, justify-center, items-center

Subscribe Section

  • Input and Button: Subscription form with dynamic button styling
  • Layout and Responsiveness: Flex properties for responsiveness

Footer

  • Content: Company information, links, social media icons
  • Layout: Flex properties, justify-between, items-start

Final Steps and Deployment

  • Build: Create optimized production build using npm run build
  • Deploy: Use Hostinger for deployment with fast servers and free domain
  • Overview: Production site has custom domain, is HTTPS secured, and is fully responsive

End Notes: Encourage practice and continued learning, specifically adding animations and more sections

Full transcript