Unit 4: React.js and Tailwind CSS

Welcome to Unit 4! Here we'll explore the powerful combination of React.js and Tailwind CSS. React.js revolutionizes how we build dynamic, interactive user interfaces, while Tailwind CSS streamlines the styling process with its utility-first approach. We'll be leveraging Codespaces to make the development process smooth and accessible for everyone.

Lesson 4.1: Getting Started with React.js

Discover the fundamentals of building dynamic user interfaces with React.js.

Environment Setup in Codespaces

Navigate to CodeSpaces
Select 'Use React Template'

Example: Building Your First React Component

Let's create a fundamental React component. This demonstrates how to organize and structure UI elements using React's component-based architecture.

// Example: Your first React component
import React from 'react'

function GreetingCard() {
  return <h1>Hello, React Developer!</h1>
}

export default GreetingCard

Lesson 4.2: Styling with Tailwind CSS

Learn to create beautiful, responsive designs using Tailwind CSS utility classes.

Installing Tailwind CSS in Codespaces

Launch your React project in Codespaces
Navigate to the 'Dependencies' panel and include tailwindcss, postcss, and autoprefixer

Setup Configuration

Tailwind Config Setup

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Stylesheet Imports

/* Add to your main CSS file */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

HTML Integration

<head>
  ...
  <script src="https://cdn.tailwindcss.com"></script>
</head>

Example: Creating Styled Components with Tailwind

Here's a practical example of how to apply Tailwind CSS classes to style a React component:

<!-- Example: Tailwind CSS styling in React -->
<div
  className="p-8 max-w-md mx-auto bg-gradient-to-r from-purple-400 to-pink-400 rounded-2xl shadow-xl flex items-center space-x-6"
>
  <div>
    <h1 className="text-2xl font-bold text-white">TaskMaster</h1>
    <p className="text-purple-100">You have 3 new tasks!</p>
  </div>
</div>

In this example, we've applied styling to the heading (TaskMaster) using text-2xl, font-bold, and text-white, while the paragraph (You have 3 new tasks!) uses text-purple-100. Here's what each class accomplishes:

text-2xl: Sets the text size to extra large (24px)
font-bold: Applies bold font weight
text-white: Sets the text color to white
text-purple-100: Applies a light purple text color

Tailwind CSS makes it incredibly straightforward to create polished, professional-looking interfaces! Be sure to explore the comprehensive Tailwind CSS Documentation for additional utility classes.

Essential Resources

Assignment: Personal Portfolio Website

Build an impressive personal portfolio website showcasing your skills with React.js and Tailwind CSS.

Project Setup

Begin by completing Lessons 4.1 and 4.2 for your foundation. Then, craft a compelling personal portfolio website that highlights your unique skills and personality!

Must-Have Components

Your full name prominently displayed
An engaging personal introduction or bio
A representative image (can be a photo, avatar, or meaningful graphic)
Professional, visually appealing design and layout

Project Submission

Upload your completed portfolio website to Schoology for evaluation and feedback.

Was this page helpful?