To use it correctly, you have to install some dependencies:
pnpm i -D @neuralytics/alpine-ds tailwindcss autoprefixer @egoist/tailwindcss-icons
pnpm i class-variance-authority @iconify-json/mdi
After that, you have to init your tailwindcss configuration:
npx tailwindcss init
And add the following lines to your tailwind.config.js
:
TO DO : Export tailwind config
const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{vue,ts,mdx}"],
theme: {
fontSize: {
sm: ["12px", "16px"],
base: ["14px", "20px"],
lg: ["16px", "24px"],
xl: ["18px", "28px"],
},
colors: {
black: "#000000",
white: "#ffffff",
transparent: "transparent",
inherit: "inherit",
// brand
brand: {
100: "color-mix(in srgb, var(--color-brand) 10%, white)",
200: "color-mix(in srgb, var(--color-brand) 30%, white)",
300: "color-mix(in srgb, var(--color-brand) 50%, white)",
400: "color-mix(in srgb, var(--color-brand) 70%, white)",
500: "var(--color-brand)",
600: "color-mix(in srgb, var(--color-brand), black 10%)",
700: "color-mix(in srgb, var(--color-brand), black 30%)",
800: "color-mix(in srgb, var(--color-brand), black 50%)",
900: "color-mix(in srgb, var(--color-brand), black 70%)",
},
// neutral
gray: {
50: "#fafafa",
100: "#f5f5f5",
200: "#e5e5e5",
300: "#d4d4d4",
400: "#a3a3a3",
500: "#737373",
600: "#525252",
700: "#404040",
800: "#262626",
900: "#171717",
},
// red
red: {
100: "#fee2e2",
200: "#fecaca",
300: "#fca5a5",
400: "#f87171",
500: "#ef4444",
600: "#dc2626",
700: "#b91c1c",
800: "#991b1b",
900: "#7f1d1d",
},// amber
yellow: {
100: "#fef3c7",
200: "#fde68a",
300: "#fcd34d",
400: "#fbbf24",
500: "#f59e0b",
600: "#d97706",
700: "#b45309",
800: "#92400e",
900: "#78350f",
},
// blue
blue: {
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
},
// green
green: {
100: "#dcfce7",
200: "#bbf7d0",
300: "#86efac",
400: "#4ade80",
500: "#22c55e",
600: "#16a34a",
700: "#15803d",
800: "#166534",
900: "#14532d",
}
},
extend: { boxShadow: { "inner-md": "inset 0px 4px 6px rgba(0, 0, 0, 0.1)", }, }
},
plugins: [
iconsPlugin({
// Collections: https://icones.js.org/
collections: getIconCollections(["mdi"]),
})
],
}
Add those lines to your main css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
and import the @neuralytics/alpine-ds
style to your main file:
import "@neuralytics/alpine-ds/css"
To use @neuralytics/alpine-ds components, follow the examples below:
import { AlpineButton } from "@neuralytics/alpine-ds"
Do not worry, it's a V0 ! We are working on it to provide you more components and features. Thank you for your patience and your interest in our design system.
Love. P-a ❤️