kiso

Configure TailwindCSS

Update your globals.css and tailwind.config.ts.

Use in your project.

Take advantage of tree splitting to minimise the Javascript sent to the end-user.

import { Button } from "kiso-core/button"

const AddToCartButton = () => {
  return (
    <div>
      <Button>Add to cart</Button>
    </div>
  );
};

Extend components.

Take advantage of tree splitting to minimise the Javascript sent to the end-user.

import { Avatar, AvatarFallback, AvatarImage } from "kiso-core/avatar";
import { motion } from "framer-motion";

const MotionAvatar = motion(Avatar);

Style components.

Add custom styling to components with TailwindCSS.

import { Button } from "kiso-core/button"

const AddToCartButton = () => {
  return (
    <div>
      <Button className=”hover:scale-150”>Add to cart</Button>
    </div>
  );
};