logo

High On Mint

Install Tailwind CSS

Install Tailwind CSS with Next.js

Tailwind CSS v4 Installation

Create your project

npx create-next-app@latest my-project --typescript --eslintcd my-project

Install Tailwind CSS

npm install tailwindcss @tailwindcss/postcss @tailwindcss/cli

Create your CSS file

Create a new CSS file (e.g., app/globals.css) and add the Tailwind import:

app/globals.css
@import "tailwindcss";@theme inline {/* Configure your theme variables here */--font-display: "Inter", "sans-serif" ;--color-primary-500: oklch(0.84 0.18 117.33);--spacing: 0.25rem;}

Configure PostCSS

Update your PostCSS configuration:

postcss.config.js
module.exports = {plugins: {"@tailwindcss/postcss": {},},};

Start your build process

npm run dev

Start using Tailwind

app/page.tsx
export default function Home() {return <h1 className= "text-3xl font-bold underline">Hello world!</h1>;}