A step-by-step guide on how to configure a NextJS application 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 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.
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.
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.
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.
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.