Docs›Getting Started›Installation

Installation & Setup

OutletUI has no npm package. Setup is just making sure Tailwind CSS is available in your project.

If you already have Tailwind CSS in your project, you're done. Just start copying components.

Option 1 — CDN (Quickest)

If you're building a static page or just want to prototype fast, add the Tailwind CDN to your HTML. No build step required.

HTML

<!-- Add to your <head> -->
<script src="https://cdn.tailwindcss.com"></script>

The CDN version is not recommended for production — it loads all Tailwind utilities (~3MB). Use the CLI or PostCSS for production.

Option 2 — Tailwind CLI

The recommended way for any real project. Install Tailwind as a dev dependency and generate a minimal CSS bundle.

Terminal

# Install Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init

# Or with PostCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure content paths

Tell Tailwind where your HTML files are so it can purge unused classes:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add directives to your CSS

CSS

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Option 3 — Framework Setups

Next.jsVite + ReactSvelteKitAstroLaravel

Terminal — Next.js

npx create-next-app@latest my-app --tailwind
# Tailwind is included by default ✓