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 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.

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

export default config;

Import Tailwind CSS

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

bash
@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.

bash
@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 {}