In this section we will install & setup tailwind css 3 in nextjs, also use typescript. Next.js is good for SEO it is also provider hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
Create Nextjs project
npx create-next-app my-project
# or
npx create-next-app@latest
# or
yarn create next-app
If you want to start with a TypeScript project you can use the --typescript flag:
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
tailwind 3 with nextjs typescript
Move to project folder
cd tail-next
npm run dev
Install Tailwind 3
run below command to install tailwind css and generate both tailwind.config.js and postcss.config.js.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Setup config path in tailwind.config.js
tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Add the Tailwind directives to your CSS
./styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Tailwind CSS 3 Next.js with typescript
index.tsx
import type { NextPage } from 'next';
const Home: NextPage = () => {
return (
<div className="m-40">
<h1 className="text-3xl text-cyan-500">
Tailwind CSS 3 with{' '}
<span className="font-sans text-gray-700 shadow-md shadow-cyan-500/30 px-2 py-2 font-light rounded-full">
Next.JS
</span>
</h1>
</div>
);
};
export default Home;
Tailwind CSS 3 Nextjs with js file
index.js
export default function Home() {
return (
<div className="m-40">
<h1 className="text-3xl text-cyan-500">
Tailwind CSS 3 with{' '}
<span className="font-sans text-gray-700 shadow-md shadow-cyan-500/30 px-2 py-2 font-light rounded-full">
Next.JS
</span>
</h1>
</div>
)
}
tailwind nextjs index page
Run project
npm run dev
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS v3 Cards Examples
