L6: Styling with Tailwind CSS

Transform your components with Tailwind CSS utility classes for a professional look.

Your components work, but they need visual polish! Let's add Tailwind CSS - a utility-first CSS framework that makes styling fast and consistent.

Why Tailwind CSS?

Instead of writing custom CSS:

Traditional CSS Approach

/* Traditional CSS */
.property-card {
   padding: 16px;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Tailwind uses utility classes directly in JSX:

Tailwind Utility Classes

<div className="p-4 rounded-lg shadow-md">

Benefits:

Faster development
Consistent design system
No naming conflicts
Responsive by default
Smaller bundle size (unused styles removed)

Step 1: Install Tailwind CSS

If Vite doesn't have Tailwind yet, install it:

Install Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure Tailwind

Update tailwind.config.js:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
      extend: {},
   },
   plugins: [],
};

Add Tailwind Directives

Update src/index.css:

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
      sans-serif;
}

Restart your dev server after these changes!

Step 2: Style the PropertyCard

Update your PropertyCard component with Tailwind classes:

src/components/PropertyCard.jsx

// src/components/PropertyCard.jsx

function PropertyCard({ title, location, price, rating, image }) {
   return (
      <div className='bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 cursor-pointer'>
         {/* Image */}
         <div className='relative h-64 w-full'>
            <img
               src={image}
               alt={title}
               className='w-full h-full object-cover'
            />
         </div>

         {/* Content */}
         <div className='p-4'>
            <div className='flex items-start justify-between mb-2'>
               <h3 className='text-lg font-semibold text-gray-900 line-clamp-1'>
                  {title}
               </h3>
               <span className='flex items-center text-sm font-medium'>
                  <span className='text-yellow-500 mr-1'>⭐</span>
                  <span className='text-gray-900'>{rating}</span>
               </span>
            </div>

            <p className='text-gray-600 text-sm mb-3'>{location}</p>

            <div className='flex items-center justify-between'>
               <div>
                  <span className='text-xl font-bold text-gray-900'>
                     ${price}
                  </span>
                  <span className='text-gray-600 text-sm'> / night</span>
               </div>
            </div>
         </div>
      </div>
   );
}

export default PropertyCard;

Understanding Tailwind Classes

Let's break down the key classes:

Step 3: Style the PropertyList

Update PropertyList to use a responsive grid:

src/components/PropertyList.jsx

// src/components/PropertyList.jsx
import PropertyCard from "./PropertyCard";

function PropertyList({ properties }) {
   return (
      <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'>
         {properties.map((property) => (
            <PropertyCard
               key={property.id}
               title={property.title}
               location={property.location}
               price={property.price}
               rating={property.rating}
               image={property.image}
            />
         ))}
      </div>
   );
}

export default PropertyList;

Grid classes explained:

grid - CSS Grid layout
grid-cols-1 - 1 column on mobile
sm:grid-cols-2 - 2 columns on small screens (640px+)
lg:grid-cols-3 - 3 columns on large screens (1024px+)
xl:grid-cols-4 - 4 columns on extra-large screens (1280px+)
gap-6 - Gap between grid items (1.5rem)

Step 4: Style the HomePage

Complete the styling with hero section and page layout:

src/pages/HomePage.jsx

// src/pages/HomePage.jsx
import PropertyList from "../components/PropertyList";

function HomePage() {
   const properties = [
      // ... your properties array
   ];

   return (
      <div className='min-h-screen bg-gray-50'>
         {/* Hero Section */}
         <header className='bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20'>
            <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center'>
               <h1 className='text-4xl md:text-5xl lg:text-6xl font-bold mb-4'>
                  Find Your Perfect Stay
               </h1>
               <p className='text-xl md:text-2xl text-blue-100'>
                  Discover amazing places to stay around the world
               </p>
            </div>
         </header>

         {/* Listings Section */}
         <section className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12'>
            <h2 className='text-3xl font-bold text-gray-900 mb-8'>
               Featured Properties
            </h2>
            <PropertyList properties={properties} />
         </section>
      </div>
   );
}

export default HomePage;

Responsive Design

Tailwind makes responsive design easy with breakpoint prefixes:

Responsive Text Sizes

className = "text-base sm:text-lg md:text-xl lg:text-2xl";

Breakpoints:

Default (0px+) - Mobile first
sm: (640px+) - Small tablets
md: (768px+) - Tablets
lg: (1024px+) - Desktops
xl: (1280px+) - Large desktops
2xl: (1536px+) - Extra large screens

Hover Effects

Add interactivity with hover states:

Hover Effects

className = "hover:shadow-xl hover:scale-105 transition-all duration-300";

This creates a smooth lift effect when hovering over property cards!

Verify in Browser

Save all files and check your browser. You should see:

✨ Visual improvements:

Gradient hero section with large heading
Property cards with shadows and rounded corners
Responsive grid layout
Hover effects on cards
Professional typography
Proper spacing and colors

Try resizing your browser to see the responsive grid in action!

Common Tailwind Patterns

Customizing Colors

Want to use your brand colors? Update tailwind.config.js:

tailwind.config.js

export default {
   theme: {
      extend: {
         colors: {
            primary: {
               50: "#eff6ff",
               100: "#dbeafe",
               500: "#3b82f6",
               600: "#2563eb",
               900: "#1e3a8a",
            },
         },
      },
   },
};

Then use:

Using Custom Colors

className = "bg-primary-500 text-primary-900";

Practice Challenges

What You Learned

Concepts Mastered

✅ Installing and configuring Tailwind CSS
✅ Using utility classes for styling
✅ Creating responsive layouts with grid
✅ Implementing hover effects and transitions
✅ Building professional-looking components
✅ Understanding Tailwind's design system
✅ Responsive breakpoints and mobile-first design

Checkpoint ✅

Before continuing, verify:

✅ Tailwind CSS is installed and configured
✅ Property cards have rounded corners and shadows
✅ Hero section has gradient background
✅ Grid layout adjusts on different screen sizes
✅ Hover effects work on property cards
✅ Typography looks professional
✅ Colors and spacing are consistent

Next Up

Excellent work! Your homepage looks fantastic. In the final lesson of this module, we'll review everything you've learned and explore component composition patterns.

L6: Styling with Tailwind CSS

Layout & Spacing

Colors

Typography

Effects & Transitions

Flexbox

Centering Content

Container Pattern

Card Pattern

Challenge 1: Add Dark Mode Toggle

Challenge 2: Add a Favorite Button

Challenge 3: Add Loading Skeleton

On this page