DEV Community

Cover image for Install Next.js and Tailwind CSS to create a new project
Code of Relevancy
Code of Relevancy

Posted on • Updated on

Install Next.js and Tailwind CSS to create a new project

You will learn how to install Next.js, a popular framework for building server-rendered React applications. Finally, you will style your app with Tailwind CSS, a utility-first CSS framework that allows you to build custom designs without writing a lot of CSS.

Step 1: Install Next.js and create a new project

First, we will need to install Next.js on our system. To do this, run the following command:

npm install next
Enter fullscreen mode Exit fullscreen mode

Once Next.js is installed, we can create a new project by running the following command:

npx create-next-app my-app
Enter fullscreen mode Exit fullscreen mode

This will create a new Next.js project with the name "my-app" in a new directory.

Step 2: Install Tailwind CSS

Next, we will need to install Tailwind CSS in our project. To do this, run the following command in the root directory of your project:

npm install tailwindcss
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a tailwind.config.js file

We will need to create a configuration file for Tailwind CSS in our project. To do this, create a file called "tailwind.config.js" in the root directory of your project.

In this file, we can define the styles that we want to use in our project. For example:

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#00f',
      },
      fontSize: {
        'xl': '1.25rem',
      },
    },
  },
  variants: {},
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Integrate Tailwind CSS into Next.js

To use Tailwind CSS in our Next.js project, we will need to import it into our project. To do this, we will need to update our "next.config.js" file.

In this file, we will need to add the following code:

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  }
})
Enter fullscreen mode Exit fullscreen mode

Step 5: Create a "pages" directory and a "home" page

Next, we will need to create a "pages" directory in our project. In this directory, we will create a "home" page.

To do this, create a file called "home.js" in the "pages" directory and add the following code:

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>My App</title>
      </Head>

      <div className="text-center">
        <h1 className="text-4xl font-bold">Welcome to the My App</h1>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode
Step 6: Create a "css" directory and a "tailwind.css" file
Enter fullscreen mode Exit fullscreen mode

Next, we will need to create a "css" directory in our project. In this directory, we will create a "tailwind.css" file.

In this file, we will need to add the following code:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss
Enter fullscreen mode Exit fullscreen mode

Please consider following and supporting me by subscribing to my channel. Your support is greatly appreciated and will help me continue creating content for you to enjoy. Thank you in advance for your support!

YouTube
Discord
GitHub

Top comments (0)