Search for a command to run...
I am a developer from India with a good eye for frontend logic and design. I am also well acquainted with the backend and business logic so that's add to my ability to create a good frontend while making it easily integratable with backend.
great article,,,simple to grasp and understand
Understanding and Reading the MNIST Dataset
In the digital age, where data breaches are as common as coffee spills, one cryptographic algorithm stands out for its robustness in securing our passwords: bcrypt. Let's dive into the world of bcrypt hashing, uncovering its mechanics, the role of sa...
In our daily used language, we use Grammar, similarly, in computer language, we have a set of rules called grammar on which a language is defined. In this article, we will look into what those Grammars are and how we define and use them. Exploring th...
Introduction In the vast landscape of computer science, languages are not just confined to human communication; they also extend into the realm of formal languages, classified into regular and non-regular categories. Understanding these languages is ...
Hello Guys, welcome back to my blog. Today we will be creating our small server and React app to learn about Server-Sent Events and how to handle them in a React App. But before we even start building anything let's learn about Server-Side Events (SS...
Hello Guys,
I hope you all have seen the NEXTJS conference and all the new things that are shipped with the release of NEXTJS 13, NEXTJS 13 had breaking changes and it changes how we used to work with NEXTJS before and React in general
Here are some cool features which are launched with NEXTJS 13 launch.
Introducing Turbopack: Rust-based successor to Webpack
Turbo Pack is a bundler-like web pack but it's powered by Rust and It is said to be 700x faster than Webpack and 10x faster than the famous bundler Vite.
below is the comparison drawing for the turbo pack and other bundlers.
Though Turbo might feel amazing, webpack has a vast plugin ecosystem that turbopack lacks for now but Vercel Team is working hard to build those. This is also the reason we can't use preprocessor and Tailwind like we used to use in the Next 12 and earlier versions.
Nested routes are the best and most awaited feature we developers were waiting for though it is already been used in several other frameworks like Remix and it's finally in NEXTJS 13 now.
You will be having a simple app directory that is still in beta where you can define the layout and nested routes easily.
there are other features like dynamic OG image generation, Image, Layout, server components, and so on.., but with new technology, there is some trade-off as well, and one is we can't use Tailwind like we used to but there is a workaround to do that.
In this article, we will be discussing that workout and will be implementing that too.
Let's get started with the TailwindCSS and NEXTJS 13 with turbo pack
Note: Tailwind works fine with the simple command npm run dev but with flag --turbo it won't work as the turbo pack doesn't support the tailwind yet.
Now that we know that let's start with the basic installation.
if you are liking this article till now let's connect on Twitter :).
Open your favorite terminal and let's get started with the installation of NEXTJS 13. The following command will also generate the app directory where you can perform nested routes and other new features.
npx create-next-app@latest --experimental-app
Once that you can cd into the my-app which is now created.
Now we will install Tailwind in NEXTJS 13.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
run the above code inside your terminal which will create a new tailwind.config.js file for you.
Once the installation is done we need to set up the tailwind with PostCSS. Create a new file called postcss.config.js and paste the following content into that.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
once that is done we will configure the tailwind.config.js as per NEXTJS 13 requirements. Here we will be adding an experimental app dir too.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./app/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
once that is done Add the Tailwind directives to your CSS, just open the ./app/global.css and paste the below code on top.
/* ./app/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Now the trick is to concurrently compile our Tailwind CSS and add that to our file using the npm package called concurrently.
Go ahead and install concurrently by running the following command.
npm i concurrently
once that is done make a new file in the app directory and call it output.css after that open your package.json and make changes as follows
// package.json
"dev": "concurrently \"next dev\" \"tailwindcss --input ./app/globals.css --output ./app/output.css --watch\"",
"build": "tailwindcss ./app/globals.css --output ./app/output.css && next build",
layout.tsx
import Head from "next/head";
// import "./globals.css";
import "./output.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='en'>
<Head>
<title>Create Next App</title>
<meta name='description' content='Generated by create next app' />
<link rel='icon' href='/favicon.ico' />
</Head>
<body>{children}</body>
</html>
);
}
as you can see that I have commented on the global.css and imported output.css.
Open the page.tsx inside the app directory and add some TailwindCSS utility classes to your codebase and run npm run dev --turbo to see those changes.
Note: Make sure you are adding --turbo flag to use the turbo pack.
// page.tsx
import Image from "next/image";
import styles from "./page.module.css";
export default function Home() {
return (
<div className='w-full bg-black'>
<main className='flex justify-center items-center m-auto h-screen flex-col'>
<div className='text-8xl '>
Welcome to <a href='https://nextjs.org'>Next.js 13!</a>
</div>
<div className='text-4xl my-10 '>
This is a Tailwind Example with Next.js 13
</div>
</main>
<footer className={styles.footer}>
<a
href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
target='_blank'
rel='noopener noreferrer'
>
Powered by{" "}
<span className={styles.logo}>
<Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
</span>
</a>
</footer>
</div>
);
}
Use concurrently with postCSS so that each time it gets compiled the commands are as follows
// package.json
"dev": "concurrently \"next dev\" \"tailwindcss --input ./app/globals.css --output ./app/output.css --watch\"",
"build": "tailwindcss ./app/globals.css --output ./app/output.css && next build",
If you liked this post and got to learn something new give it a like and let's connect on Twitter. %[https://twitter.com/theysaymaurya/status/1438924150588915716?s=20&t=kyRt69Oek_pc86i07IReRg]