In this tutorial, we will be creating a responsive portfolio website using ReactJS and Tailwind CSS with Vite. Vite is a next-generation frontend tooling that is fast, lean, and easy to use for modern web development.
To get started, make sure you have Node.js installed on your computer. You can download it from the official website if you haven’t already. Once you have Node.js installed, you can use npm to install Vite by running the following command in your terminal:
npm install -g create-viteNext, create a new Vite project by running the following command in your terminal:
create-vite my-portfolioNavigate into the newly created project directory:
cd my-portfolioNow, let’s install ReactJS and Tailwind CSS in our project. Run the following commands in your terminal:
npm install react react-dom
npm install -D tailwindcss@latest postcss autoprefixerGenerate a Tailwind CSS config file by running the following command:
npx tailwindcss init -pNext, we need to create a new file called tailwind.config.js in the root of your project directory and add the following code to enable Tailwind CSS in our project:
module.exports = {
mode: 'jit',
purge: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
darkMode: 'class',
theme: {},
variants: {},
plugins: [],
}Create a new folder called src in the root of your project directory. Inside the src folder, create a new file called App.js and add the following code to set up our React component:
import React from 'react';
function App() {
return (
<div className="container mx-auto">
<h1 className="text-2xl font-bold">My Portfolio Website</h1>
</div>
);
}
export default App;Next, we need to import Tailwind CSS in our project. Open the index.html file in the root of your project directory and add the following line in the <head> tag:
<link href="./node_modules/tailwindcss/dist/tailwind.min.css" rel="stylesheet">Now, let’s import our React component in the main.js file. Open the main.js file in the src folder and add the following code:
import { render } from 'react-dom';
import App from './App';
render(<App />, document.getElementById('root'));Finally, start the Vite development server by running the following command in your terminal:
npm run devYou should now see your portfolio website running on http://localhost:3000 in your browser. You can now start customizing and adding content to your portfolio website using ReactJS and Tailwind CSS.
That’s it! You have successfully created a responsive portfolio website using ReactJS and Tailwind CSS with Vite. Feel free to explore more features and customize your website further. Happy coding!
figma link can be given to me?
i just failed to understand who watches such tutorial without explanation
This tutorial was incredibly helpful! Thanks for sharing