Getting Started with Next.js, Storybook, Tailwind CSS, and Playwright: A Beginner's Guide.

This is a beginner's guide to the integration of these wonderful technologies.

Overview

• Setup a Next.js project with typescript
• Configure Tailwind CSS
• Configure Storybook
• Configure Playwright

Prerequisite

1. Node.js installed in you machine
2. Package management tool like pnpm, yarn or npm
3. Code editor like vs code.

Next.js

Next.js is a popular React-based framework that makes it easier to build server-side rendered applications. It provides routing out of the box, improved SEO, automatic code splitting(diving your code into smaller chunks that can be loaded on demand,hence reducing the load time), image optimization,built-in CSS support and most importantly Hot Module replacement which helps developers see changes immediately without refreshing the page.

On your command line run one the following:

yarn create next-app --typescript 
or
pnpm create next-app --typescript
or
npx create-next-app@latest --typescript

Follow the prompt by passing the necessary info like app-name e.t.c. this will create a pre-configured next.js application.

Tailwind CSS

This is a utility-first CSS framework that helps developers create responsive and customizable UI's quickly and efficiently.
Unlike traditional CSS framework like Bootstrap or Material-UI with pre-defined components, Tailwind CSS provides a low-level utility classes that can be used to style HTML elements.
There are several ways to add Tailwind CSS to our project as provided in the offical docs, so we will be using the PostCSS.

In the directory containing out next.js project run the following:

yarn add postcss autoprefixer tailwindcss -D
npx tailwindcss init -p

the second command will create two configuration files i.e tailwind.config.js and postcss.config.js

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{ts,tsx, js, jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Now we have to add th tailwind directives to our main css file. For our project global.css located in the styles directory.

@tailwind base;
@tailwind components;
@tailwind utilities;

And you can start using tailwind in your project.

Storybook
Storybook is a tool for building and testing isolated UI components in a development environment allowing developers to showcase components visually hence making it easier to collaborate and maintain a consistent design system.

npx storybook@next init

We need to update .storybook/main.js file.

// .storybook/main.js
export default {
  addons: ['@storybook/addon-essentials'],
  framework: {
    name: '@storybook/nextjs',

    options: {},
  },
};

Playwright
Playwright is an open-source testing framework that helps you create and run automated end-to-end tests hence deploy your applications with confidence.

yarn add @playwright/test -D

Add Playwright to the package.json script field.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "test:e2e": "playwright test",
}

Resources
Next.js Docs
Tailwind CSS Docs
Storybook/next docs
Playwright