- Documentation

Install Aura Design System with Next.js

Setting up Tailwind CSS in a Next.js project with Aura Design System.

Create your project

Start by setting up a new Next.js project if you haven’t already. The most common method is to use Create Next App.

bash

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

Install Radix UI

Radix UI is a set of accessible, high-quality, and unstyled UI components for React applications. It provides a solid foundation for building custom components with accessibility and flexibility in mind. To install Radix UI, use the following command with pnpm:

bash

pnpm install radix-ui

Install Tailwind CSS

Set up Tailwind CSS by installing @tailwindcss/postcss along with its peer dependencies using pnpm.

bash

pnpm install tailwindcss @tailwindcss/postcss postcss

Configure PostCSS Plugins

Create a postcss.config.mjs file in your project's root directory and include the @tailwindcss/postcss plugin in your PostCSS configuration.

javascript

// postcss.config.mjs

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

export default config;

Import Tailwind CSS

Add an @import to ./app/globals.css that imports Tailwind CSS.

css

@import "tailwindcss";

Install Aura Design System

Set up Aura Design System by installing the necessary packages along with its peer dependencies using pnpm.

bash

pnpm install @aura-design/system

Initial Configuration of Aura Design with Tailwind CSS

This is the initial setup for integrating Aura Design System with Tailwind CSS. Below is the configuration file that defines custom theme variables, spacing, and color schemes, while also importing the necessary styles from Aura Design System.

css

/* globals.css */

@import "tailwindcss";

@theme {
  --radius-0.5: calc(var(--spacing) * 0.5);
  --radius-1: calc(var(--spacing) * 1);
  --radius-1.5: calc(var(--spacing) * 1.5);
  --radius-2: calc(var(--spacing) * 2);

  --spacing: 13px;

  --color-info: #e8ebfe;
  --color-info-contrast: #0927ec;
  --color-success: #e8fef7;
  --color-success-contrast: #045d3c;
  --color-danger: #feefe8;
  --color-danger-contrast: #8e3106;
  --color-warning: #fefbe8;
  --color-warning-contrast: #5d5104;
}

@layer base {
  @import "@aura-design/system/main.css";
}

@layer utilities {}

@layer components {}