Documentation

Install Tailwind CSS

Wire Tailwind into your Next.js project. SparkUI components use Tailwind utility classes throughout.

01.Create your project

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

02.Install Tailwind CSS and dependencies

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

03.Configure your template paths

tailwind.config.js

/** @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: [],
};

04.Add Tailwind directives

globals.css

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

05.Start the dev server

npm run dev
Next up

Install Motion

Continue →
sparkui