DEV Community

Cover image for Sailing Smoothly with Next.js and TailwindCSS: How to Create Gorgeous Websites with Ease
Beatrice Egumandi
Beatrice Egumandi

Posted on

Sailing Smoothly with Next.js and TailwindCSS: How to Create Gorgeous Websites with Ease

In this article, we're setting sail on a journey to create stunning websites with ease using Next.js and TailwindCSS; and the best part is, we're not stopping at just one tutorial! We'll have a series of articles that will take you on a journey from the basics of installation to advanced techniques and everything in between.

Before we begin, it's important to note that we assume you already have some basic familiarity with CSS and Next.js and have already created a Next.js project. In case you haven't, don't worry! You can visit this link for a step-by-step guide on how to get started with Next.js. If you're new to this, don't fret! We'll make sure you're sailing smoothly in no time. Let's get started with our first part:

Setting up and installing TailwindCSS in our Next.js project

There are different methods available to install TailwindCSS but for the essence of this article we'll be using the Framework Guides installation method. We'll also need to use a package manager such as npm or yarn. Choose the one that you prefer, depending on your project's setup. For this tutorial, we'll be using npm but the steps should be similar for yarn as well. Open your terminal and navigate to your Next.js project folder, and enter the following command:

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

This will install TailwindCSS, PostCSS, and Autoprefixer as development dependencies in your project. Then enter the following command:

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

This will generate a tailwind.config.js file in your project directory where your customizations can be done. The -p flag tells TailwindCSS to generate a postcss.config.js file as well. To configure TailwindCSS for your specific project setup, you'll need to add a template to the content array in the Tailwind config file. For example, if your project has an app folder, you'll need to add the app template to the content array.

"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
Enter fullscreen mode Exit fullscreen mode

Here, it is assumed that the project has an app, pages, components and src folder.

Tailwind configuration

In this image, the pages folder is what we have in the project hence, the pages template was used. Once you've updated the Tailwind config file, open the globals.css file in your project's styles directory and add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

This will configure Tailwind to apply its base, component, and utility styles to your project.

Tailwind directives

We can now start using Tailwind to style our content. Add the following code in your index.js file in your pages directory:

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Welcome to tailwind world!
    </h1>
  )
}
Enter fullscreen mode Exit fullscreen mode

The className 'text-3xl' will set the font size to 3 times the base font size, 'font-bold' will make the font bold and 'underline' will underline the text. Once that is done, run your development server using the following command:

npm run dev
Enter fullscreen mode Exit fullscreen mode

This will start the Next.js development server and you can access your application by visiting http://localhost:3000 in your web browser.

Hello WORLD

Conclusion

We've covered the basics of installation and getting started with TailwindCSS in your Next.js project, as well as how to style your content using TailwindCSS classes. Keep in mind that this is just the beginning! There are a lot more techniques and features of TailwindCSS and Next.js to explore, and there'll be more articles to help you become a pro in no time. Happy coding😁😁!

Top comments (0)