Install Tailwind CSS
Install Tailwind CSS with Next.js
Create your project
npx create-next-app@latest my-project --typescript --eslint
cd my-projectInstall Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configure your template paths
tailwind.config.ts
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
};Add the Tailwind directives to your CSS
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;Start your build process
npm run devStart using Tailwind
index.tsx
export default function Home() {
return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}