Tailwind CSS Configuration
Relevant source files
The following files were used as context for generating this wiki page:
Tailwind CSS serves as the primary styling framework for the @cellarnode/auth library, providing a utility-first approach to designing shared UI components such as login forms, registration panels, and unauthorized access pages. The configuration is designed to be compatible with Tailwind CSS v4.0.0 and above, ensuring that consumers of the library can seamlessly integrate these components into their own dashboards while maintaining visual consistency.
Sources: package.json:48, README.md:1-5
Content Scanning and Integration
To ensure that the utility classes used within the pre-compiled library are correctly identified and generated by the consumer's Tailwind CSS compiler, a specific source directive is required. This directive instructs Tailwind to scan the distributed JavaScript files of the package for CSS class names.
@source "../node_modules/@cellarnode/auth/dist/**/*.js";
Sources: README.md:32-34
Library Dependencies
The library defines Tailwind CSS as an optional peer dependency, allowing consuming projects to provide their own version while ensuring compatibility with the library's utility-based styling.
| Dependency | Version | Type |
|---|---|---|
tailwindcss | >=4.0.0 | Peer Dependency (Optional) |
clsx | ^2.1.0 | Direct Dependency |
Sources: package.json:42-55
Styling Architecture and Implementation
The library utilizes a combination of standard Tailwind utility classes, conditional class merging via clsx, and raw CSS-in-JS for complex animations or component-specific overrides.
Utility Class Usage
Components like LoginForm and UnauthorizedPage rely heavily on Tailwind's layout and typography utilities to achieve a responsive design. For example, the LoginForm uses a grid layout that shifts from a single column to two columns on large screens.
<div className="grid min-h-dvh lg:grid-cols-2">
{/* Left: Form Panel */}
<div className="flex flex-col px-6 py-6 sm:px-10 sm:py-8 lg:px-14 lg:py-10">
{/* ... */}
</div>
</div>
Sources: src/react/login-form.tsx:181-184
Conditional Styling
The library uses clsx to dynamically apply Tailwind classes based on component state, such as error conditions or loading states.
className={clsx(
"flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm shadow-xs",
error
? "border-destructive focus-visible:ring-destructive/30 focus-visible:border-destructive"
: "border-input focus-visible:ring-ring/50 focus-visible:border-ring",
)}
Sources: src/react/login-form.tsx:254-260
Specialized Component Styling
OTP Input Styles
The One-Time Password (OTP) component requires sophisticated styling for individual slots, carats, and error animations. While it uses Tailwind for basic properties, it also injects custom CSS for keyframe animations and pseudo-selectors that Tailwind cannot easily target.
The InputOTP component uses a data-slot architecture to apply styles to internal elements like groups, slots, and separators.
Sources: src/react/input-otp-slots.tsx:12-45
Theme Support
Components like SquircleShift and LoginForm support explicit "light" and "dark" themes. These themes influence background colors and accent tints.
| Property | Light Mode | Dark Mode |
|---|---|---|
SquircleShift Background | #f6f3ec | #101715 |
| Primary Color (CSS Var) | --primary | --primary |
| Text Color | text-foreground | text-foreground |
Sources: src/react/squircle-shift.tsx:180-185, src/react/login-form.tsx:21-25
Visual Flow of Themed Components
The following sequence shows how the LoginForm interacts with the SquircleShift background component to provide a cohesive visual experience.
Conclusion
The Tailwind CSS configuration for @cellarnode/auth is designed for high portability. By using the @source directive, developers can ensure that the auth UI remains visually consistent with their application's design system while leveraging the library's pre-defined responsive layouts and interactive states.
Sources: README.md:32-34, src/react/index.ts:1-15