Modifying Styles
Learn how to safely change colors, spacing, fonts, and other visual elements using Tailwind CSS classes.
What You'll Learn
- How to change colors on buttons, text, and backgrounds
- Adjusting spacing (padding, margins)
- Modifying text sizes and fonts
- Changing borders and shadows
- Testing style changes
Before You Start
Prerequisites:
- Completed Chapter 05: Styling Basics
- Dev server running
- Browser open at localhost:3000
- Basic understanding of Tailwind classes
Quick Tailwind reminder:
- Classes are added to
className="..." - Multiple classes separated by spaces
- Changes update immediately on save
Exercise 1: Change Button Color
Find a Button
Open app/page.tsx and find the primary button (around line 23):
<Link
href="/launching"
className="px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
>
Join the Launching Committee
</Link>
Change the Color
Current: White background with blue text
Change to green:
<Link
href="/launching"
className="px-8 py-3 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition-colors"
>
Join the Launching Committee
</Link>
What changed:
bg-white→bg-green-600text-blue-600→text-whitehover:bg-gray-100→hover:bg-green-700
Test It
- Save and preview
- Check button color (should be green)
- Hover over button (should darken)
- Does text still readable? (white on green)
Try Other Colors
Purple button:
className="px-8 py-3 bg-purple-600 text-white hover:bg-purple-700"
Red button:
className="px-8 py-3 bg-red-600 text-white hover:bg-red-700"
Outlined button (no fill):
className="px-8 py-3 border-2 border-blue-600 text-blue-600 hover:bg-blue-50"
Exercise 2: Change Section Background
Find a Section
In app/page.tsx, find the Mission section (around line 41):
<section className="py-16 bg-gray-50">
Change Background Color
Try different backgrounds:
{/* Light blue */}
<section className="py-16 bg-blue-50">
{/* Light purple */}
<section className="py-16 bg-purple-50">
{/* White */}
<section className="py-16 bg-white">
{/* Gradient */}
<section className="py-16 bg-gradient-to-r from-blue-50 to-purple-50">
Test Contrast
Make sure text is still readable:
- Dark text on light backgrounds
- Light text on dark backgrounds
- Check in browser DevTools for contrast warnings
Exercise 3: Adjust Spacing
Change Padding
Find a card (around line 96):
<div className="text-center p-6 bg-blue-50 rounded-lg">
Increase padding:
<div className="text-center p-8 bg-blue-50 rounded-lg">
Decrease padding:
<div className="text-center p-4 bg-blue-50 rounded-lg">
Different vertical/horizontal:
<div className="text-center px-8 py-4 bg-blue-50 rounded-lg">
Change Margins
Find a heading (around line 16):
<h1 className="text-4xl md:text-6xl font-bold mb-6">
Increase bottom margin:
<h1 className="text-4xl md:text-6xl font-bold mb-10">
Add top margin:
<h1 className="text-4xl md:text-6xl font-bold mt-8 mb-6">
Test Spacing
- Save and preview
- Does content feel balanced?
- Is there enough breathing room?
- Too cramped or too spread out?
Exercise 4: Modify Text Size
Change Heading Size
Find the main heading:
<h1 className="text-4xl md:text-6xl font-bold mb-6">
Every Student Can Achieve Their Full Academic Potential
</h1>
Make it larger:
<h1 className="text-5xl md:text-7xl font-bold mb-6">
Every Student Can Achieve Their Full Academic Potential
</h1>
Make it smaller:
<h1 className="text-3xl md:text-5xl font-bold mb-6">
Every Student Can Achieve Their Full Academic Potential
</h1>
Change Body Text Size
Find paragraph text:
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
Options:
{/* Larger */}
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
{/* Smaller */}
<p className="text-base text-gray-600 max-w-3xl mx-auto">
{/* Extra large */}
<p className="text-2xl text-gray-600 max-w-3xl mx-auto">
Exercise 5: Change Border Radius
Round Corners More
Find a button or card:
<div className="rounded-lg">
Options:
<div className="rounded"> {/* Small - 4px */}
<div className="rounded-lg"> {/* Large - 8px */}
<div className="rounded-xl"> {/* Extra large - 12px */}
<div className="rounded-2xl"> {/* 2x large - 16px */}
<div className="rounded-full"> {/* Full - pill/circle */}
Try on Different Elements
Button:
{/* Super rounded button */}
<button className="px-8 py-3 bg-blue-600 text-white rounded-full">
Pill Button
</button>
Card:
{/* Extra rounded card */}
<div className="p-6 bg-white shadow-lg rounded-2xl">
Card content
</div>
Exercise 6: Adjust Shadows
Change Shadow Size
Find an element with shadow:
<div className="shadow-lg">
Options:
<div className="shadow-sm"> {/* Small */}
<div className="shadow"> {/* Default */}
<div className="shadow-md"> {/* Medium */}
<div className="shadow-lg"> {/* Large */}
<div className="shadow-xl"> {/* Extra large */}
<div className="shadow-2xl"> {/* 2x large */}
Add Hover Shadow
Make element lift on hover:
<div className="shadow-md hover:shadow-xl transition-shadow">
Hover to see shadow grow
</div>
Exercise 7: Change Font Weight
Find Text to Modify
<h2 className="text-3xl font-bold">
Try Different Weights
<h2 className="text-3xl font-light"> {/* Light - 300 */}
<h2 className="text-3xl font-normal"> {/* Normal - 400 */}
<h2 className="text-3xl font-medium"> {/* Medium - 500 */}
<h2 className="text-3xl font-semibold"> {/* Semibold - 600 */}
<h2 className="text-3xl font-bold"> {/* Bold - 700 */}
Common Style Combinations
Card Style Variations
Subtle card:
<div className="p-6 bg-gray-50 rounded-lg">
Elevated card:
<div className="p-6 bg-white rounded-lg shadow-xl">
Bordered card:
<div className="p-6 bg-white rounded-lg border-2 border-gray-200">
Colored card:
<div className="p-6 bg-blue-500 text-white rounded-lg shadow-lg">
Button Variations
Solid button:
<button className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
Outlined button:
<button className="px-6 py-3 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition">
Ghost button:
<button className="px-6 py-3 text-blue-600 hover:bg-blue-50 rounded-lg transition">
Large button:
<button className="px-8 py-4 text-lg bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
Text Link Variations
Simple link:
<Link className="text-blue-600 hover:text-blue-800">
Underlined link:
<Link className="text-blue-600 hover:text-blue-800 underline">
Arrow link:
<Link className="text-blue-600 hover:text-blue-800 font-semibold">
Learn more →
</Link>
Best Practices
1. Maintain Consistency
{/* ✅ Good: Consistent button styles */}
<button className="px-6 py-3 bg-blue-600 text-white rounded-lg">
<button className="px-6 py-3 bg-green-600 text-white rounded-lg">
{/* ❌ Bad: Inconsistent styles */}
<button className="px-6 py-3 bg-blue-600 text-white rounded-lg">
<button className="px-4 py-2 bg-green-700 text-white rounded-full">
Tip: Use the same padding, border-radius, and hover states for similar elements
2. Consider Contrast
{/* ✅ Good: High contrast */}
<div className="bg-blue-600 text-white">
<div className="bg-white text-gray-900">
{/* ❌ Bad: Low contrast */}
<div className="bg-gray-200 text-gray-300">
3. Use Appropriate Hover States
{/* ✅ Good: Subtle hover feedback */}
<button className="bg-blue-600 hover:bg-blue-700 transition">
{/* ❌ Bad: Jarring color change */}
<button className="bg-blue-600 hover:bg-red-600">
4. Test Responsive Sizes
{/* ✅ Good: Responsive text */}
<h1 className="text-3xl md:text-5xl lg:text-6xl">
{/* ❌ Bad: Fixed size too large for mobile */}
<h1 className="text-6xl">
5. Add Transitions
{/* ✅ Good: Smooth transitions */}
<button className="bg-blue-600 hover:bg-blue-700 transition-colors">
<div className="shadow-md hover:shadow-xl transition-shadow">
{/* ❌ Bad: Abrupt changes */}
<button className="bg-blue-600 hover:bg-blue-700">
Testing Style Changes
Visual Testing Checklist
- Colors have sufficient contrast
- Text is readable at all sizes
- Buttons are large enough to click
- Spacing feels balanced
- Hover states work smoothly
- Responsive on mobile (resize browser)
Multi-Browser Testing
Test in:
- Chrome
- Safari
- Firefox
- Mobile browser (if possible)
Accessibility Testing
Check:
- Can you navigate with keyboard (Tab key)?
- Do links have clear hover states?
- Is color contrast 4.5:1 or better?
Use browser DevTools to check contrast ratios!
Common Mistakes
Mistake 1: Forgetting Hover States
{/* ❌ No feedback on interaction */}
<button className="bg-blue-600 text-white px-6 py-3 rounded">
{/* ✅ Clear hover feedback */}
<button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded transition">
Mistake 2: Too Many Different Styles
{/* ❌ Inconsistent design */}
<button className="rounded">Button 1</button>
<button className="rounded-full">Button 2</button>
<button className="rounded-xl">Button 3</button>
{/* ✅ Consistent */}
<button className="rounded-lg">Button 1</button>
<button className="rounded-lg">Button 2</button>
<button className="rounded-lg">Button 3</button>
Mistake 3: Removing Important Classes
{/* ❌ Don't delete structural classes */}
<div className="bg-blue-600"> {/* Removed flex, items-center */}
{/* ✅ Only change style classes */}
<div className="flex items-center bg-blue-600"> {/* Keep layout classes */}
Mistake 4: Poor Color Contrast
{/* ❌ Hard to read */}
<div className="bg-gray-300 text-gray-400">
{/* ✅ Good contrast */}
<div className="bg-gray-900 text-white">
Undoing Style Changes
Quick Undo
Cmd+Z (Mac) or Ctrl+Z (Windows)
Reset File
git checkout -- app/page.tsx
Compare Changes
git diff app/page.tsx
Shows exactly what you changed!
Troubleshooting
Problem: Style doesn't apply
Check:
- Did you save the file?
- Is the class name spelled correctly?
- Is there a conflicting class?
- Inspect element (F12) to see applied styles
Problem: Hover state doesn't work
Check:
- Do you have the
hover:prefix? - Did you add
transitionortransition-colors? - Is the element actually hoverable? (not disabled)
Problem: Color looks different than expected
Possible causes:
- Using wrong shade number (-500 vs -600)
- Conflicting background/text colors
- Browser rendering differences
Solution: Inspect element to see computed styles
Problem: Text becomes unreadable
Solution:
- Increase contrast
- Change text color to match new background
- Use Tailwind's gray-900 for dark text, white for light text
Quick Reference
Change colors:
bg-{color}-{shade} // Background
text-{color}-{shade} // Text
border-{color}-{shade} // Border
Change spacing:
p-{size} // Padding all sides
px-{size} // Horizontal padding
py-{size} // Vertical padding
m-{size} // Margin
mb-{size} // Margin bottom
Change text size:
text-sm, text-base, text-lg, text-xl, text-2xl, etc.
Change borders:
rounded, rounded-lg, rounded-xl, rounded-full
border, border-2, border-4
Change shadows:
shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl
Add transitions:
transition // All properties
transition-colors // Only colors
transition-shadow // Only shadow
Practice Challenges
Try these for additional practice:
-
Change the hero gradient
- From blue/purple to your chosen colors
- Save and preview
-
Style all buttons consistently
- Pick a color scheme
- Apply to all buttons on homepage
-
Increase all heading sizes
- Make H1 one size larger
- Make H2 one size larger
- Test responsiveness
-
Add hover effects to cards
- Make cards lift on hover (shadow)
- Add smooth transition
-
Create a color theme
- Pick primary color
- Update all blues to your color
- Ensure contrast is good
What's Next
Now that you can change content, links, and styles, let's learn how to properly test your changes: