CSS Styling Guidelines with TailwindCSS and DaisyUI

1import { clsx } from "@akanjs/client";
2
3// Basic usage
4<div className={clsx(
5  "base-classes",
6  condition && "conditional-classes",
7  className
8)}>
9  {/* Content */}
10</div>
11
12// Object syntax
13<div className={clsx(
14  "base-styles",
15  {
16    "bg-primary": isPrimary,
17    "bg-secondary": isSecondary,
18    "bg-error": isError,
19  },
20  className
21)}>
22  {/* Content */}
23</div>

1interface CardProps {
2  className?: string;
3}
4
5export const Card = ({ className }: CardProps) => (
6  <div className={clsx("card bg-base-100 shadow-md", className)}>
7    {/* Content */}
8  </div>
9);

1<div className="flex flex-col gap-4 md:flex-row">
2  <div className="w-full md:w-1/3">Sidebar</div>
3  <div className="w-full md:w-2/3">Main Content</div>
4</div>

1<button className="
2  bg-primary 
3  hover:bg-primary-focus 
4  focus:ring-2 focus:ring-primary
5  active:scale-95
6  disabled:opacity-50
7">
8  Interactive Button
9</button>

1<div className="space-y-4 p-4">
2  <div>Section 1</div>
3  <div>Section 2</div>
4  <div>Section 3</div>
5</div>

1export const Card = ({ className, project }: CardProps) => (
2  <Link
3    href={href}
4    className={clsx(
5      "border-base-300 bg-base-100 flex flex-col gap-3 rounded-lg border-2 p-4",
6      "hover:border-primary transition-all hover:shadow-md",
7      className
8    )}
9  >
10    <h3 className="text-base-content text-lg font-semibold">
11      {project.name}
12    </h3>
13  </Link>
14);

1export const Detail = ({ className, project }: ViewProps) => (
2  <div className={clsx("bg-base-100 rounded-lg p-6 shadow-lg", className)}>
3    <div className="border-base-content mb-6 border-l-4 pl-4 py-2">
4      <h1 className=" text-2xl font-bold">{project.name}</h1>
5    </div>
6    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
7      {/* Content */}
8    </div>
9  </div>
10);

1export const Form = ({ className }: { className?: string }) => (
2  <div className={clsx("card bg-base-100 p-6 shadow-lg", className)}>
3    <h2 className="card-title mb-4">Project Details</h2>
4    <div className="form-control w-full">
5      <label className="label">
6        <span className="label-text">Project Name</span>
7      </label>
8      <input
9        type="text"
10        className="input input-bordered w-full"
11        value={project.name}
12      />
13    </div>
14  </div>
15);

1export const StatusBadge = ({ status }: { status: string }) => (
2  <span className={clsx(
3    "badge font-medium",
4    status === "active" && "badge-success",
5    status === "pending" && "badge-warning",
6    status === "error" && "badge-error"
7  )}>
8    {status}
9  </span>
10);

1export const Dashboard = ({ className }: { className?: string }) => (
2  <div className={clsx("grid grid-cols-1 gap-6 lg:grid-cols-3", className)}>
3    <div className="lg:col-span-2"><ProjectSummary /></div>
4    <div><ProjectStats /></div>
5    <div className="lg:col-span-3"><ProjectTimeline /></div>
6  </div>
7);

1<div className="card bg-base-100 shadow-md transition-shadow hover:shadow-lg">
2  <figure className="px-4 pt-4">
3    <img src={image} className="rounded-lg object-cover h-48 w-full" />
4  </figure>
5  <div className="card-body">
6    <h2 className="card-title">{title}</h2>
7    <p className="text-base-content/70">{description}</p>
8    <div className="card-actions mt-4 justify-end">
9      <button className="btn btn-primary btn-sm">View Details</button>
10    </div>
11  </div>
12</div>

1<div className="form-control w-full max-w-md">
2  <label className="label">
3    <span className="label-text">Email</span>
4  </label>
5  <input type="email" className="input input-bordered w-full" />
6  <label className="label">
7    <span className="label-text-alt text-error">Error message</span>
8  </label>
9</div>