Installation

Installing Tailwind CSS

To integrate Tailwind CSS into your Next.js app, follow the installation steps outlined in the Tailwind CSS documentation for Next.js (opens in a new tab).

Installing Avishka-UI

You need to install Avishka-UI Style, and you can do so using npm, yarn, or pnpm.

# npm
npm install @avishka-ui/style
 
# yarn
yarn add @avishka-ui/style
 
# pnpm
pnpm add @avishka-ui/style

Configuring for a Next.js 14 App

To set up a Next.js 14 app, start by configuring your tailwind.config.js file with the following additions.

tailwind.confing.js

import type { Config } from "tailwindcss";
import { theme } from "@avishka-ui/style";
 
const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  
    "./node_modules/@avishka-ui/style/dist/**/*.{js,ts}",
 
  ],
  theme: {
    extend: {}
  },
  plugins: [
    theme({
      colors: {
        primary: {
          100: "#D4E6FDt",
          200: "#ABCBFC",
          300: "#80ACF7",
          400: "#5F90F0",
          500: "#2D66E7",
          600: "#204EC6",
          700: "#1639A6",
          800: "#0E2785",
          900: "#081B6E",
        },
        secondary: {
          100: "#FEFEFE",
          200: "#FDFDFE",
          300: "#FBFBFC",
          400: "#F8F8F9",
          500: "#F4F4F5",
          600: "#B2B2D2",
          700: "#7A7AB0",
          800: "#4D4D8E",
          900: "#2E2E75",
        },
        destructive: {
          100: "#FFE9D5",
          200: "#FFCEAC",
          300: "#FFAC82",
          400: "#FF8B63",
          500: "#FF5630",
          600: "#DB3723",
          700: "#B71D18",
          800: "#930F14",
          900: "#7A0916"
        }
      },
      text: {
        primary: "#fff",
        secondary: "#000",
        outline: "#fff",
        destructive: "#fff",
      },  
    }),
  ],
};
export default config;

install Button