Install Tailwind CSS

Install Tailwind CSS with Next.js (v3 and v4).

Tailwind CSS v3 Installation (Legacy)

Create a new project

To get started, create a new Next.js project using your preferred package manager:

npx create-next-app@latest my-project --typescript --eslint
cd my-project

Install 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

global.css

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

Start using Tailwind

page.tsx

export default function Home() {
  return <h1 className="text-4xl font-semibold italic text-blue-600">Welcome!</h1>;
}

Note

ScrollX UI components are built for Tailwind CSS v4.
We’ve recently moved away from Tailwind v3. Although several components remain compatible, v3 support is not fully stable and certain components may require adjustments.

Tailwind CSS v4 Installation (Recommended)

Create a new project

To get started, create a new Next.js project using your preferred package manager:

npx create-next-app@latest my-project --typescript --eslint
cd my-project

Install Tailwind CSS

npm install tailwindcss @tailwindcss/postcss @tailwindcss/cli

Next Steps

After installation, check out globals.css format.

Set up styles v4

src/styles/globals.css
@import "tailwindcss";
@import "tw-animate-css";
 
@custom-variant dark (&:is(.dark *));
 
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.21 0.006 285.885);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.705 0.015 286.067);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.141 0.005 285.823);
--sidebar-primary: oklch(0.21 0.006 285.885);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.967 0.001 286.375);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.705 0.015 286.067);
}
 
.dark {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.21 0.006 285.885);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.92 0.004 286.32);
--primary-foreground: oklch(0.21 0.006 285.885);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.552 0.016 285.938);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.006 285.885);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.274 0.006 286.033);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.552 0.016 285.938);
}
 
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
 
@layer base {
* {
  @apply border-border outline-ring/50;
}
body {
  @apply bg-background text-foreground;
}
}
 
@utility lustre-text {
@apply inline-block font-extrabold text-transparent bg-clip-text bg-size-[200%_auto] bg-position-[0%_center];
}
 
@utility lustre-light {
background-image: linear-gradient(
  90deg,
  rgba(0, 0, 0, 0.05) 0%,
  rgba(0, 0, 0, 0.3) 30%,
  rgba(0, 0, 0, 0.7) 45%,
  #ffffff 50%,
  rgba(0, 0, 0, 0.7) 55%,
  rgba(0, 0, 0, 0.3) 70%,
  rgba(0, 0, 0, 0.05) 100%
);
}
 
@utility lustre-dark {
background-image: linear-gradient(
  90deg,
  rgba(255, 255, 255, 0.05) 0%,
  rgba(255, 255, 255, 0.15) 30%,
  rgba(255, 255, 255, 0.4) 45%,
  #ffffff 50%,
  rgba(255, 255, 255, 0.4) 55%,
  rgba(255, 255, 255, 0.15) 70%,
  rgba(255, 255, 255, 0.05) 100%
)
}

Configure PostCSS

postcss.config.js

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

Start using Tailwind

page.tsx

export default function Home() {
  return <h1 className="text-4xl font-semibold italic text-blue-600">Welcome!</h1>;
}

Done , All Set

Built withby Ahdeetai.