Episyche
NextJS/Tailwind CSS/
2022-10-17T09:30:52.208522Z
Published on
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
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser. and NPM is a package manager for Node. js packages. The NPM program is installed on your computer when you install Node.js. 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
1npx create-next-app my-project
2cd my-project
and then install Tailwind CSS with the following commands. To know more about tailwind configuration, please click here.
1npm install -D tailwindcss postcss autoprefixer
2npx tailwindcss init -p
my-project → tailwind.config.js
Update the tailwind.config.js in the above path, using the following snippet.
1 content: [
2 "./pages/**/*.{js,ts,jsx,tsx}",
3 "./components/**/*.{js,ts,jsx,tsx}",
4 ],
As shown in the following screenshot
my-project →styles→global.css
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
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
my_project →pages→index.js
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.
1export default function Example() {
2 return (
3 <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
4 Configure Tailwind CSS with Next.JS
5 </p>
6 );
7}
A Sample GitHub repo, with all the required configurations, is given below.
GitHub - episyche/nextjs_tailwindcss_example
Run the Next Application with the following command.
1npm run dev (or) yard dev
After running your application open your browser and check the following URL:
1http://localhost:3000/
The Example UI is shown in the following screenshot.
Comments