# What Styling Solution Is Used in Securo Frontend?
> Discover the styling solution powering Securo frontend. Learn how Tailwind CSS, shadcn UI, and a custom cn helper function create a sleek, efficient user interface.
- Repository: [securo-finance/securo](https://github.com/securo-finance/securo)
- Tags: deep-dive
- Published: 2026-08-28
---
**Securo's frontend uses Tailwind CSS as its primary styling framework, layered with shadcn UI components and managed through a `tailwind-merge` utility wrapped in a `cn` helper function.**
The Securo web application, located in the `securo-finance/securo` repository on GitHub, implements a modern, utility-first styling architecture. This setup combines the rapid development benefits of Tailwind CSS with pre-built, customizable UI primitives from shadcn UI, all orchestrated through Vite's build pipeline.
## Tailwind CSS Integration Via Vite
The styling pipeline begins in [`frontend/vite.config.ts`](https://github.com/securo-finance/securo/blob/main/frontend/vite.config.ts), where Tailwind is registered as a Vite plugin using the official `@tailwindcss/vite` package.
```ts
// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [react(), tailwindcss()],
});
```
This plugin-based approach replaces older PostCSS-based setups and enables faster builds with on-demand CSS generation. The Tailwind Vite plugin processes utility classes directly during the build, eliminating the need for a separate CSS compilation step.
## Global Stylesheet Configuration
Tailwind's layers are imported in [`frontend/src/index.css`](https://github.com/securo-finance/securo/blob/main/frontend/src/index.css) using standard CSS `@import` directives. This file also pulls in shadcn UI's theming layer.
```css
/* src/index.css */
@import "tailwindcss";
@import "shadcn/tailwind.css";
```
The first `@import` statement loads Tailwind's **base** (CSS reset), **components** (container, form controls), and **utilities** (spacing, colors, flexbox) layers. The second import activates shadcn UI's design tokens, including CSS variables for theming such as `--primary`, `--background`, and `--foreground`.
## Class Name Management with tailwind-merge
To handle dynamic class composition, Securo implements a utility helper in [`frontend/src/lib/utils.ts`](https://github.com/securo-finance/securo/blob/main/frontend/src/lib/utils.ts). This wrapper combines `clsx` for conditional class handling with `tailwind-merge` for conflict resolution.
```ts
// src/lib/utils.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
```
The **cn** helper serves three critical purposes:
- **Conditional classes**: `clsx` evaluates boolean expressions and arrays to determine which classes apply
- **Conflict resolution**: `twMerge` removes duplicate utilities, keeping only the last occurrence when conflicts arise (e.g., `p-2 p-4` becomes `p-4`)
- **Type safety**: The `ClassValue` type from `clsx` ensures proper TypeScript integration
### Using the cn Helper in Components
Components throughout the codebase leverage `cn` to compose flexible, theme-aware class names:
```tsx
import { cn } from '@/lib/utils';
export default function Button({ primary }: { primary?: boolean }) {
return (
);
}
```
Without `tailwind-merge`, passing both `bg-red-500` and `bg-blue-500` would produce invalid CSS with competing background colors. The `cn` helper automatically deduplicates, ensuring predictable styling.
## shadcn UI Component Library
On top of raw Tailwind, Securo integrates **shadcn UI**—a collection of copy-paste React components built on Tailwind primitives. The library appears as a devDependency in [`frontend/package.json`](https://github.com/securo-finance/securo/blob/main/frontend/package.json) (v4 at time of analysis).
shadcn components arrive pre-styled with Tailwind classes but remain fully customizable. Developers can override any style by passing additional Tailwind utilities through the `className` prop.
```tsx
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
export default function DashboardCard() {
return (
Overview
{/* Content */}
);
}
```
The `shadow-lg` utility extends the base Card styling without requiring CSS module edits or inline style objects. This pattern—base shadcn styling plus Tailwind overrides—appears consistently across components like [`src/components/agents/markdown.tsx`](https://github.com/securo-finance/securo/blob/main/src/components/agents/markdown.tsx).
## Dependency Overview
| Package | Purpose | Location |
| --- | --- | --- |
| `@tailwindcss/vite` | Build-tool integration | [`vite.config.ts`](https://github.com/securo-finance/securo/blob/main/vite.config.ts) |
| `tailwindcss` | Core utility framework | [`package.json`](https://github.com/securo-finance/securo/blob/main/package.json) |
| `shadcn` | Pre-built component primitives | [`package.json`](https://github.com/securo-finance/securo/blob/main/package.json) |
| `tailwind-merge` | Class deduplication logic | [`src/lib/utils.ts`](https://github.com/securo-finance/securo/blob/main/src/lib/utils.ts) |
| `clsx` | Conditional class construction | [`src/lib/utils.ts`](https://github.com/securo-finance/securo/blob/main/src/lib/utils.ts) |
## Summary
- **Tailwind CSS** provides the foundational styling engine, integrated via Vite's official plugin in [`frontend/vite.config.ts`](https://github.com/securo-finance/securo/blob/main/frontend/vite.config.ts)
- **Global styles** are configured in [`frontend/src/index.css`](https://github.com/securo-finance/securo/blob/main/frontend/src/index.css) with layered imports for Tailwind and shadcn theming
- **The `cn` helper** in [`frontend/src/lib/utils.ts`](https://github.com/securo-finance/securo/blob/main/frontend/src/lib/utils.ts) wraps `tailwind-merge` and `clsx` to safely compose dynamic class names
- **shadcn UI** delivers ready-made, Tailwind-styled components that accept further customization through standard utility classes
- The entire architecture favors **utility-first CSS** written directly in TSX/JSX, eliminating the need for separate CSS files per component
## Frequently Asked Questions
### Is Securo using CSS Modules or styled-components?
No. Securo's frontend does not use CSS Modules, styled-components, or other CSS-in-JS libraries. The codebase follows a **utility-first approach** with Tailwind CSS classes applied directly to JSX elements. All styling logic—static, conditional, or dynamic—flows through the `cn` helper and standard `className` props.
### What version of shadcn UI does Securo use?
The repository depends on **shadcn UI v4**, as declared in [`frontend/package.json`](https://github.com/securo-finance/securo/blob/main/frontend/package.json). This version ships with Tailwind v4 compatibility and uses CSS-native `@import` syntax rather than JavaScript-based configuration. The v4 release also introduces streamlined theming through CSS variables defined in [`src/index.css`](https://github.com/securo-finance/securo/blob/main/src/index.css).
### How does the `cn` function handle conflicting Tailwind classes?
The `cn` function passes classes through `tailwind-merge`, which implements a **last-write-wins** strategy for conflicting utilities. For example, `cn('p-2', 'p-4')` returns `'p-4'` because the second padding utility overrides the first. This resolution happens at runtime, ensuring the generated DOM contains only valid, non-conflicting class strings.
### Can I use arbitrary values with Tailwind in Securo?
Yes. Standard Tailwind arbitrary value syntax works throughout the codebase. You can write `w-[123px]` or `bg-[#1da1f2]` directly in components. The Vite plugin processes these at build time. For repeated arbitrary values, consider extending the theme in a Tailwind configuration file or using CSS variables mapped through shadcn's theming system.