Tailwind CSS Class Reference
Complete reference of EBRAINS-specific Tailwind utility classes. All classes listed here are pre-configured with EBRAINS design tokens.
Colors
Background Colors
EBRAINS brand colors for backgrounds:
| Class | Color | Usage |
|---|---|---|
bg-primary | #00A595 (Teal) | Primary brand color, CTAs |
bg-secondary | Navy Blue | Secondary actions, accents |
bg-dark | Dark Gray | Dark backgrounds |
bg-light | Light Gray | Light backgrounds |
bg-inverse | White/Light | Inverse backgrounds |
bg-subtle | Very Light Gray | Subtle backgrounds |
Example:
Text Colors
| Class | Color | Usage |
|---|---|---|
text-primary | Primary Color | Emphasis, links |
text-secondary | Secondary Color | Less emphasis |
text-dark | Dark Text | Main text on light backgrounds |
text-light | Light Text | Text on dark backgrounds |
text-inverse | White/Dark | Inverse text color |
text-subtle | Muted Text | De-emphasized text |
Example:
Border Colors
| Class | Color | Usage |
|---|---|---|
border-primary | Primary Color | Primary borders |
border-secondary | Secondary Color | Secondary borders |
border-subtle | Light Gray | Subtle dividers |
border-dark | Dark Gray | Strong dividers |
Example:
Gradient Backgrounds
EBRAINS provides gradient utilities:
| Class | Gradient | Usage |
|---|---|---|
bg-gradient-primary | Primary gradient | Hero sections |
bg-gradient-secondary | Secondary gradient | Feature highlights |
Example:
Typography
Font Families
| Class | Font | Usage |
|---|---|---|
font-sans | Inter | Default sans-serif (body text, headings) |
font-mono | JetBrains Mono | Code, technical content |
Example:
Typesets (f-* classes)
EBRAINS typography scale with predefined size, weight, and line-height:
Headings
| Class | Size | Weight | Line Height | Usage |
|---|---|---|---|---|
f-heading-01 | 48px | 700 (Bold) | 1.2 | Page titles |
f-heading-02 | 36px | 700 (Bold) | 1.3 | Section titles |
f-heading-03 | 28px | 600 (Semibold) | 1.3 | Subsection titles |
f-heading-04 | 24px | 600 (Semibold) | 1.4 | Card titles |
f-heading-05 | 20px | 600 (Semibold) | 1.4 | Small headings |
Body Text
| Class | Size | Weight | Line Height | Usage |
|---|---|---|---|---|
f-body-01 | 16px | 400 (Regular) | 1.5 | Default body text |
f-body-02 | 14px | 400 (Regular) | 1.5 | Secondary text, captions |
Example:
Spacing
EBRAINS uses a pixel-based spacing scale (not Tailwind’s default rem-based scale).
Available Spacing Values
| Class Suffix | Value | Example Classes |
|---|---|---|
8 | 8px | p-8, m-8, gap-8 |
16 | 16px | p-16, m-16, gap-16 |
24 | 24px | p-24, m-24, gap-24 |
32 | 32px | p-32, m-32, gap-32 |
48 | 48px | p-48, m-48, gap-48 |
64 | 64px | p-64, m-64, gap-64 |
80 | 80px | p-80, m-80, gap-80 |
96 | 96px | p-96, m-96, gap-96 |
128 | 128px | p-128, m-128, gap-128 |
Padding Classes
Apply to all sides or individually:
Margin Classes
Same values as padding:
Gap Classes (Flexbox/Grid)
Grid System
EBRAINS provides a 12-column grid system with custom utilities.
Grid Columns
| Class | Columns | Usage |
|---|---|---|
grid-cols-1 | 1 column | Mobile |
grid-cols-2 | 2 columns | Tablet |
grid-cols-3 | 3 columns | Desktop |
grid-cols-4 | 4 columns | Cards grid |
grid-cols-6 | 6 columns | Dense grid |
grid-cols-12 | 12 columns | Full grid |
Example:
Grid Column Span
| Class | Span | Usage |
|---|---|---|
grid-col-span-2 | 2 columns | Small element |
grid-col-span-3 | 3 columns | Medium element |
grid-col-span-4 | 4 columns | Large element |
grid-col-span-6 | 6 columns | Half width |
grid-col-span-8 | 8 columns | Two-thirds width |
grid-col-span-12 | 12 columns | Full width |
grid-col-span-full | All columns | Full width (any grid) |
Example:
Grid Column Start
Position elements at specific columns:
| Class | Starts At | Usage |
|---|---|---|
grid-col-start-1 | Column 1 | Start |
grid-col-start-2 | Column 2 | After first |
grid-col-start-7 | Column 7 | Center-right |
Example:
Border Radius
EBRAINS border radius scale:
| Class | Value | Usage |
|---|---|---|
rounded-none | 0 | No rounding |
rounded-sm | 2px | Subtle rounding |
rounded | 4px | Default rounding |
rounded-md | 8px | Medium rounding |
rounded-lg | 12px | Large rounding |
rounded-xl | 16px | Extra large |
rounded-full | 9999px | Fully rounded (circles, pills) |
Example:
Individual Corners
Shadows
EBRAINS elevation scale using shadows:
| Class | Elevation | Usage |
|---|---|---|
shadow-none | No shadow | Flat elements |
shadow-sm | Small | Subtle elevation |
shadow | Default | Cards, buttons |
shadow-md | Medium | Elevated cards |
shadow-lg | Large | Modals, dropdowns |
shadow-xl | Extra large | Top-level overlays |
Example:
Drop Shadows (for images/icons)
Breakpoints
EBRAINS responsive breakpoints:
| Breakpoint | Min Width | Usage |
|---|---|---|
sm: | 640px | Small tablets |
md: | 768px | Tablets |
lg: | 1024px | Desktops |
xl: | 1280px | Large desktops |
2xl: | 1536px | Extra large screens |
Example:
Container
EBRAINS provides a custom container for consistent max-width:
Special Utilities
Line Clamp
Truncate text to specific line count:
| Class | Lines | Usage |
|---|---|---|
line-clamp-1 | 1 line | Single line truncation |
line-clamp-3 | 3 lines | Preview text |
line-clamp-4 | 4 lines | Card descriptions |
Example:
Aspect Ratios
EBRAINS aspect ratio utilities:
| Class | Ratio | Usage |
|---|---|---|
aspect-square | 1:1 | Squares |
aspect-video | 16:9 | Videos |
aspect-4/3 | 4:3 | Images |
Example:
State Variants
All classes support state variants:
Hover
Focus
Active
Disabled
Related Documentation
- Configure Tailwind Tutorial - Setup guide
- Tailwind Factory API - Configuration reference
- Design Tokens - Complete token list
- Official Tailwind Docs - All Tailwind utilities