CSS Styling Guidelines with TailwindCSS and DaisyUI

Comprehensive styling guidelines for Akan.js components using TailwindCSS and DaisyUI ensuring consistency, maintainability and proper theming across applications.
Core Principles
Follow these fundamental principles for consistent styling:
Utility-First

Use Tailwind's utility classes instead of custom CSS

1className='p-4 bg-base-100'
Component Composition

Design for composition with className overrides

1Accept className prop in components
Theme Consistency

Use DaisyUI's semantic color system

1bg-primary text-primary-content
Responsive Design

Mobile-first layouts with breakpoint prefixes

1flex flex-col md:flex-row
Accessibility

Ensure proper contrast and focus states

1focus:ring-2 focus:ring-primary
Class Management with clsx
Use clsx for conditional class handling and composition:
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>
Component Structure Best Practices
1. Forward className Prop
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);
2. Semantic Color System
primary:color:theme-defined

Primary brand color

1bg-primary text-primary-content
secondary:color:theme-defined

Secondary brand color

1bg-secondary text-secondary-content
base-100:color:theme-defined

Base background color

1bg-base-100 text-base-content
3. Responsive Design
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>
4. State Variants
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>
5. Consistent Spacing
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>
Component Types in Akan.js
Unit Components (*.Unit.tsx)
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);
View Components (*.View.tsx)
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);
Edit Components (*.Edit.tsx)
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);
Util Components (*.Util.tsx)
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);
Zone Components (*.Zone.tsx)
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);
Common UI Patterns
Card Pattern
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>
Form Pattern
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>
Best Practices
Component Composition

Create small, focused components combined to build complex UIs

1Compose <Card> + <Header> + <Body>
Color Usage

Use DaisyUI theme colors with proper contrast ratios

1text-primary bg-base-100
Dark Mode

Leverage automatic dark mode adaptation

1bg-base-100 text-base-content
Common Mistakes to Avoid
Hardcoded Colors

Using hex codes instead of theme variables

1bg-[#3b82f6] instead of bg-primary
Missing className

Not forwarding className prop for composition

1Component without className prop
Inconsistent Spacing

Mixing arbitrary values instead of Tailwind's scale

1m-2 vs m-[8px]
Troubleshooting
styles-not-applying:issue:-

Check class name typos and Tailwind configuration

1Verify tailwind.config.js
daisyui-components:issue:-

Verify DaisyUI installation and theme config

1npx daisyui@latest init
responsive-issues:issue:-

Test breakpoints and use mobile-first approach

1Use md: lg: xl: prefixes
Additional Resources
Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2025 Akan.js. All rights reserved.
System managed bybassman