---

Badges provided by

---

Installation

# using npm
npm install @axux/core @axux/data @axux/form @axux/utilies

# using yarn
yarn add @axux/core @axux/data @axux/form @axux/utilies

Add tailwind.config to project

// tailwind.config.js
const colors = require("tailwindcss/colors");
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@axux/**/dist/**/*.js",
  ],
  theme: {
    extend: {
      colors: {
        primary: colors.sky,
        accent: colors.pink,
        danger: colors.red,
        warning: colors.yellow,
        success: colors.green,
      },
    },
  },
  plugins: [
    // axux-core tailwind plugin
    require("@axux/core/css"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/line-clamp"),
    require("@tailwindcss/typography"),
  ],
};

for custom colors pass object of colors {50,100,200,300,400,500,600,700,800,900}

---

Usage

Basic styles

/* src/styles.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "@axux/core/css/style.css";
@import "@axux/data/css/style.css";
@import "@axux/date/css/style.css";
@import "@axux/form/css/style.css";

/* optional flag css */
/* country flags ≈100KB */
@import "@axux/utilities/css/flags.css";
/* country flags wavy ≈500KB */
@import "@axux/utilities/css/flags-wavy.css";

React root render

/* src/index.tsx */
import { AxViewport, AxApplicationProvider } from "@axux/core";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <StrictMode>
    <AxApplicationProvider>
      <AxViewport>. . .</AxViewport>
    </AxApplicationProvider>
  </StrictMode>
);

---

Build with Parcel

# using npm
npm install parcel @parcel/compressor-brotli @parcel/compressor-gzip postcss postcss-import postcss-nesting --save-dev

# using yarn
yarn add parcel @parcel/compressor-brotli @parcel/compressor-gzip postcss postcss-import postcss-nesting --dev

Add .parcelrc.json to project

// .parcelrc.json
{
  "extends": ["@parcel/config-default"],
  "compressors": {
    "*.{html,css,js,svg,map}": [
      "@parcel/compressor-gzip",
      "@parcel/compressor-brotli"
    ]
  }
}

Add .postcssrc.json to project

// .postcssrc.json
{
  "plugins": {
    "postcss-import": true,
    "tailwindcss/nesting": "postcss-nesting",
    "tailwindcss": true
  }
}

// package.json
{
  "source": "./public/index.html",
  "scripts": {
    "start": "parcel -p 3000",
    "build": "parcel build"
  }
}

Known Issue: doesn't work work with CRA

---

Dependencies

• react@18

• tailwindcss

CSS tooling

• postcss (version >=7 <8 due to monaco-editor)
• postcss-import
• postcss-nesting

Editor

• react-monaco-editor

Formatters

• date-fns
• numeral
• libphonenumber