Installations

How to install dependencies and structure your app.

New Project

Create New Project using alma, just need following the experience CLI, there are several templates you can use.

Terminal
Copy
npx @erudilabs/create-app@latest

This command will creates a new directory with the specified name and sets up a basic project structure using React, Tailwind CSS and Alma Interface inside it.

Existing Project

Make sure you are on React project and will using Tailwind CSS.

Install Alma

Terminal
Copy
yarn add @erudilabs/alma @erudilabs/icons

Install Tailwind

Install Tailwind CSS and its dependencies using npm, yarn or pnpm.

Terminal
Copy
yarn add tailwindcss

Once the installation is complete, generate a default Tailwind CSS configuration file by running the following command

Terminal
Copy
npx tailwindcss init

This will create a tailwind.config.js file in your project's root directory.

Setup Tailwind

Open the tailwind.config.js, Make sure the config like this

Code Editor
Copy
/** @type {import('tailwindcss').Config} */
 
module.exports = {
  mode: 'jit',
  darkMode: 'class',
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    'node_modules/@erudilabs/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: '16px',
      screens: {
        '2xl': '1400px',
      },
    },
    colors: {
      black: '#000',
      white: '#fff',
      transparent: 'transparent',
      gray: {
        50: '#f8fbfc',
        100: '#f7fafc',
        200: '#edf2f7',
        300: '#e2e8f0',
        400: '#cbd5e0',
        500: '#a0aec0',
        600: '#718096',
        700: '#4a5568',
        800: '#1c2029',
        900: '#030711',
      },
      blue: {
        50: '#eff9ff',
        100: '#ebf8ff',
        200: '#BEE3F8',
        300: '#90CDF4',
        400: '#63B3ED',
        500: '#3151aa',
        600: '#2c4999',
        700: '#274188',
        800: '#223977',
        900: '#1d3166',
      },
      red: {
        50: '#fff7f7',
        100: '#fff5f5',
        200: '#fed7d7',
        300: '#feb2b2',
        400: '#fc8181',
        500: '#f56565',
        600: '#e53e3e',
        700: '#c53030',
        800: '#9b2c2c',
        900: '#742a2a',
      },
      yellow: {
        50: '#fefdcc',
        100: '#fefcc5',
        200: '#FEFCBF',
        300: '#FAF089',
        400: '#F6E05E',
        500: '#ECC94B',
        600: '#D69E2E',
        700: '#B7791F',
        800: '#975A16',
        900: '#975A16',
      },
      green: {
        50: '#f2fff5',
        100: '#f0fff4',
        200: '#c6f6d5',
        300: '#9ae6b4',
        400: '#68d391',
        500: '#48bb78',
        600: '#38a169',
        700: '#2f855a',
        800: '#276749',
        900: '#22543d',
      },
      orange: {
        50: '#fffbf3',
        100: '#fffaf0',
        200: '#feebc8',
        300: '#fbd38d',
        400: '#f6ad55',
        500: '#ed8936',
        600: '#dd6b20',
        700: '#c05621',
        800: '#9c4221',
        900: '#7b341e',
      },
      indigo: {
        50: '#eff6ff',
        100: '#ebf4ff',
        200: '#c3dafe',
        300: '#a3bffa',
        400: '#7f9cf5',
        500: '#667eea',
        600: '#5a67d8',
        700: '#4c51bf',
        800: '#434190',
        900: '#3c366b',
      },
      purple: {
        50: '#fbf6ff',
        100: '#FAF5FF',
        200: '#E9D8FD',
        300: '#D6BCFA',
        400: '#B794F4',
        500: '#9F7AEA',
        600: '#805AD5',
        700: '#6B46C1',
        800: '#553C9A',
        900: '#44337A',
      },
      pink: {
        50: '#fff7f9',
        100: '#FFF5F7',
        200: '#FED7E2',
        300: '#FBB6CE',
        400: '#F687B3',
        500: '#ED64A6',
        600: '#D53F8C',
        700: '#B83280',
        800: '#97266D',
        900: '#702459',
      },
    },
  },
  plugins: [],
}

Inside your css, scss or less file, import Tailwind's base, components, and utilities styles by adding the following lines:

Code Editor
Copy
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
 
@layer base {
  html {
    @apply scroll-smooth;
  }
  body {
    @apply antialiased text-sm bg-white dark:bg-gray-900;
    @apply text-gray-700 dark:text-gray-500;
  }
  h1,
  .h1 {
    line-height: 48px;
    font-size: 40px;
    @apply text-black dark:text-white font-bold;
  }
  h2,
  .h2 {
    font-size: 32px;
    line-height: 40px;
    @apply text-black dark:text-white font-bold;
  }
  h3,
  .h3 {
    font-size: 28px;
    line-height: 40px;
    @apply text-black dark:text-white font-bold;
  }
  h4,
  .h4 {
    font-size: 24px;
    line-height: 32px;
    @apply text-black dark:text-white font-bold;
  }
  h5,
  .h5 {
    font-size: 20px;
    line-height: 28px;
    @apply text-black dark:text-white font-bold;
  }
  h6,
  .h6 {
    font-size: 16px;
    line-height: 24px;
    @apply text-black dark:text-white font-bold;
  }
  p {
    line-height: 24px;
    @apply text-gray-700 dark:text-gray-500;
  }
  .paragraph {
    line-height: 24px;
    @apply text-gray-800 dark:text-gray-500;
  }
  [type='checkbox']:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  }
  [type='checkbox']:checked:disabled {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  }
}

Setup finish, you can import the component from @erudilabs/alma in your page

Finish

Now, you have successfully integrated @erudilabs/alma and Tailwind CSS into your React project

Code Editor
Copy
import { Button } from `@erudilabs/alma`
<Button>Button already setup</Button>

We are currently setup DarkMode using class Taiwlind so you need setup next-themes to provide Theme Provider
You can change the theme colo, but it's will be impact to interface, just make sure your changes is correct in the colors.