Configure NextJS with Storybook and TailwindCSS

Configure NextJS with Storybook and TailwindCSS

A step-by-step guide on how to configure a NextJS application with Storybook and TailwindCSS

In this article, we are going to show how you can create a NextJs project with Storybook and TailwindCSS.

Before starting, I want to explain who are the actors and why it should be better to add them to our frontend application.


NextJS doesn’t need a lot of presentations. If you are here, you probably already know what NextJS is and why we should use it to build robust applications.

NextJS is a great React frontend framework, and it’s mainly used to build SEO-friendly applications since you can use three different types of rendering/pre-rendering methods:

  • SSG (Static-site generation) the HTML is generated at build time and will be reused on each request
  • SSR (Server-side rendering) the HTML is generated on each request using a node server, so the response is SEO-friendly
  • CSR (Client-side rendering) the normale React behavior, the response is simply Javascript run by the client

tailwind-css frontend nextjs storybook

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Build a Pokedex with NextJS and Tailwind CSS - SSR vs SSG

NextJS is a powerful framework built on top of React that allows you to easily mix Static Pages and Server Side Rendered pages. In this video, we'll use NextJS to build a cool Pokedex using the Pokemon API. The index page will be a statically generated page while the Pokemon details pages will be server-side rendered. We'll also use Tailwind CSS for styling the app.

Tailwind CSS tutorial

Start learning about Tailwind CSS with this guide which covers installing via a package manager, generating the configuration file, building a website and reducing the final CSS file.

Tailwind CSS Cheatsheet

Master Tailwind CSS with this Cheatsheet. Tailwind CSS allows us to build modern websites with the respective classes without writing a single native CSS. Tailwind is amazing since we have to only to specify the respective classes and Tailwind CSS will take care of everything. We will see the most basic CSS classes and their relative properties in CSS.

How To Install Tailwind CSS | Install Tailwind Via NPM | Tailwind Tutorial | Learn Tailwind 2 CSS

In this video you’ll learn how to install Tailwind CSS via NPM. Before you could install it, you do need to have Node.JS installed.

Introduction to Tailwind CSS | Tailwind CSS Tutorial

This video is created as an introduction to Tailwind. Tailwind is a utility CSS framework to make your life as a developer easier. You will see what the advantages and disadvantages are of using Tailwind and what the difference is between Tailwind and Bootstrap.