Building a Portfolio Website with React and Tailwind CSS

2025-04-16
8 min read
ReactTailwind CSSWeb Development

Setting Up the Project

Getting started with a React and Next.js project is straightforward:

bash
npx create-next-app my-portfolio
cd my-portfolio
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Adding Tailwind CSS

Tailwind CSS provides a utility-first approach that makes styling incredibly easy:

jsx
function Hero() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <div className="text-center">
        <h1 className="text-4xl font-bold text-gray-800">Hello, I'm a Developer</h1>
        <p className="mt-4 text-xl text-gray-600">I build things for the web</p>
      </div>
    </div>
  );
}

Implementing Animations

Framer Motion is a fantastic library for adding smooth animations to React components:

jsx
import { motion } from 'framer-motion';
 
function AnimatedComponent() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      This content will fade in!
    </motion.div>
  );
}

Conclusion

Building a portfolio with React and Tailwind CSS offers the perfect balance of flexibility, performance, and developer experience. Give it a try for your next project!

Further Reading