NextJS Portfolio

# NextJS portfolio setting up - part 2 In the [last part](https://daily-dev-tips.com/posts/creating-a-nextjs-portfolio-part-1/) we had an overall look at what we would build, and I even gave you some homework to find an excellent design and analyze it into building blocks. This article will look at setting up the project and installing all the dependencies we need. ## Setting up the Next.js project The basic [Next.js set up](https://daily-dev-tips.com/posts/setting-up-nextjs-with-tailwind-css/) is quite forward these days, so let's run through it. First, open your terminal and run the following command to create a new Next.js project. ```bash npx create-next-app ``` Once done, it will install the project inside a folder whose name you picked in the CLI prompt. Navigate to this folder (in my case, `next-portfolio`). ```bash cd next-portfolio ``` If you are eager to see it work, run `npm run dev` to start up the server. However, we will look into adding Tailwind CSS. First, Tailwind is an easy way to style the application neatly. You can also opt for regular CSS if you are unfamiliar with it. First, install the needed dependencies: ```bash npm install -D tailwindcss@latest postcss@latest autoprefixer@latest ``` After that, run the following command to initialize a tailwind config file. ```bash npx tailwindcss init -p ``` Open the project in your favorite editor and find the `tailwind.config.js` file. Add the pages and components config into the `content` part like this: ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', ], theme: { extend: {}, }, plugins: [], }; ``` Then we have to modify the `styles/global.css` to include the Tailwind imports. ```css @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; ``` While we are at it, also remove some of the things we won't be needing: - `styles/Home.module.css` - `pages/api` And let's modify our `pages/index.js` file to see if Tailwind is working. ```js import Head from 'next/head'; export default function Home() { return (

NextJS Portfolio

Next + Tailwind ❤️

Next and Tailwind CSS are a match made in heaven. Check out this article on how you can combine these two for your next app.

); } ``` Now run your app: `npm run dev` and visit `http://localhost:3000/` to see it in action. ![NextJS Tailwind set up](https://cdn.hashnode.com/res/hashnode/image/upload/v1664433986676/pHmSKfgEo.png) Alright, that's our setup for today! We created the project and added Tailwind to it. Keep an eye out for tomorrow's article, where we'll dive into layouts in Next.js. You can find the code for today on [GitHub](https://github.com/rebelchris/next-portfolio/tree/part-2). ### Thank you for reading, and let's connect! Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)