Installation

Get started with Frastra using the latest Tailwind CSS v4 and Next.js 15. Follow these steps to set up your development environment.

Create Next.js Project

Create a new Next.js 15 project with TypeScript and ESLint. Note that we don't include the --tailwind flag since we'll install the latest version manually.

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

This creates a new Next.js project with TypeScript, ESLint, and the App Router structure.

Tailwind CSS v4 Setup

1. Install Tailwind CSS v4

Install the latest Tailwind CSS v4 with the new PostCSS plugin architecture.

npm install tailwindcss @tailwindcss/postcss postcss

2. Configure PostCSS

Create a postcss.config.mjs file and add the Tailwind PostCSS plugin. This replaces the old tailwind.config.js approach.

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

3. Import Tailwind CSS

Update your globals.css file with the new v4 import syntax and add Frastra's design system variables.

@import "tailwindcss";

:root {
  --background: #000000;
  --foreground: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

The new "@import tailwindcss;" syntax replaces the old three-line directive approach.

4. Test Your Setup

Test your Tailwind setup by adding some utility classes to your main page.

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline text-white">
      Hello Frastra!
    </h1>
  )
}

Run npm run dev and you should see styled text with the new Tailwind v4 setup.

Install Frastra Dependencies

Install the essential packages needed for Frastra components. These provide icons, animations, and unique identifiers.

npm install framer-motion @heroicons/react uuid

framer-motion - Smooth animations and transitions

@heroicons/react - Beautiful SVG icons

uuid - Unique identifiers for components

Ready to use Frastra components! You now have a complete setup with Tailwind CSS v4 and all dependencies needed for Frastra components.

Introduction

Typography