Tailwind CSS is a popular CSS framework that enables developers to style within their HTML. It simplifies styling through pre-defined classes. If you want to build a personal portfolio website to share your skills and projects, this tutorial will guide you to quickly set up and configure Tailwind CSS.
- Create a new project folder and set up the basic structure:
mkdir portfolio-website
cd portfolio-website- Confirm that you have Node.js installed:
node -v
- Create a
package.jsonfile:
npm init
- Install Tailwind CSS. If you’re using
npm, you can install it via:
npm i tailwindcss
- Create a
tailwind.config.jsfile to configure Tailwind CSS:
npx tailwindcss init
-
Create a folder called
srcand in it create a fileindex.html. -
Add the paths to all the template files in
tailwind.config.js. In this example, the path is:"./src/*.{html,js}"
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- In
srccreate another file,input.css, and add the Tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;- Next, build your CSS file:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watchThis command will generate output.css where the Tailwind classes are compiled into a single CSS file that you can include in your HTML.
- Next, if you are on VS Code, install the extension
Tailwind CSS Intellisenseto get class suggestions.
In your index.html file, add output.css in the header. Continue by creating the basic structure of your portfolio website. The layout typically includes:
- A Header with your name and navigation links.
- A Hero Section with a brief introduction.
- A Projects Section showcasing your work.
- An About Section with your bio.
- A Contact Section with a form to reach out to you.
Here’s a simplified example of the HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link href="output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-900">
<header class="bg-white shadow-md">
<nav class="container mx-auto flex justify-between items-center p-5">
<h1 class="text-2xl font-bold">Your Name</h1>
<ul class="flex space-x-5">
<li><a href="#home" class="hover:text-blue-500">Home</a></li>
<li><a href="#projects" class="hover:text-blue-500">Projects</a></li>
<li><a href="#about" class="hover:text-blue-500">About</a></li>
<li><a href="#contact" class="hover:text-blue-500">Contact</a></li>
</ul>
</nav>
</header>
<section id="home" class="container mx-auto p-10 text-center">
<h2 class="text-4xl font-semibold">Welcome to My Portfolio</h2>
<p class="mt-4 text-xl">I am a frontend developer.</p>
</section>
<!-- Add more sections here -->
</body>
</html>- Tailwind CSS makes it easy to create responsive designs using utility classes. For example, you can adjust padding, margins, and font sizes based on the screen size:
<section id="home" class="container mx-auto p-10 text-center md:text-left">
<h2 class="text-4xl font-semibold md:text-6xl">Welcome to My Portfolio</h2>
<p class="mt-4 text-xl md:text-2xl">I am a frontend web developer.</p>
</section>- To make your portfolio more interactive, use JavaScript. For example, you can create a smooth scrolling effect when navigation links are clicked:
document.querySelectorAll('nav a').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});Keep experimenting with different Tailwind classes and features to make your portfolio truly unique.