Next.js is a React framework. Next.js is constitutionally an excellent tool to achieve great SEO performance. building super fast static websites that behave dynamically. Next.js when building UI and UX there is flexibility. and the important great community support. To know more about relative links click here
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, and easy integration of existing classes directly into the HTML code. This is to remove unused CSS code for improving our application overall. To know more about relative links click here
You will need a desktop or laptop with one of the following OS and an internet connection.
Windows OS (with administrative access).
Ubuntu OS (should have a non-root user account with sudo access).
Mac OS (High Sierra or higher with administrative access).
Before we create Next App we need to install node.js.
if you already installed node.js please ignore this step 1 and go to step 2
Step 2: Create a Next-app
After installing Node.js open the terminal or command prompt and create a Next app with the following commands
and then install Tailwind CSS with the following commands. To know more about tailwind configuration, please click here.
my-project → tailwind.config.js
Update the tailwind.config.js in the above path, using the following snippet.
As shown in the following screenshot
Add the @tailwind directives for each of Tailwind’s layers to your global.css in the above path. using the following snippet. As shown in the following screenshot
In Tailwind CSS we follow the inline styling method, therefore to test the tailwind CSS installation, please replace the contents of index.js in the above path, with the below snippet in your project.
A Sample GitHub repo, with all the required configurations, is given below.
Run the Next Application with the following command.
After running your application open your browser and check the following URL:
The Example UI is shown in the following screenshot.