Styling System (Tailwind CSS)
Relevant source files
The following files were used as context for generating this wiki page:
The styling system for the Boda Cris project is built upon Tailwind CSS, leveraging a hybrid approach that combines utility-first classes with a dynamic theme engine. The system is designed to provide a highly customizable visual experience for wedding invitations, allowing administrators to modify colors, typography, border radii, and animation intensities in real-time.
At its core, the system uses CSS variables (Custom Properties) defined in the :root scope, which are mapped to Tailwind's configuration. These variables are managed through a React Context API, enabling persistent theme switching and live previews within the administrative dashboard.
Core Architecture
The styling architecture follows a reactive flow where user selections in the UI update a global state, which in turn injects CSS variables into the Document Object Model (DOM).
Theme Data Flow
The following diagram illustrates how theme configurations flow from the ThemeContext to the final rendered components.
Configuration and Integration
The project utilizes PostCSS to process Tailwind CSS. The configuration is split between the Tailwind config file, the global CSS entry point, and the build tool settings.
Tailwind Configuration
The tailwind.config.js file extends the default theme to include both static and dynamic tokens. Dynamic tokens are prefixed with theme- and reference CSS variables.
| Category | Key | Reference |
|---|---|---|
| Colors | theme.primary | var(--color-primary) |
| Colors | theme.background | var(--color-background) |
| Fonts | serif | var(--font-heading) |
| Fonts | sans | var(--font-body) |
| Spacing | rounded-theme | var(--border-radius) |
| Transition | transition-theme | var(--animation-duration) |
Sources: tailwind.config.js:15-44, src/index.css:5-18
Global Styles and Utilities
The src/index.css file initializes the Tailwind directives and defines base styles. It also contains complex utility classes that are not easily representable via standard Tailwind utilities, such as gradients and glassmorphism.
text-gold-gradient: Useslinear-gradientwith theme primary colors andbackground-clip: text.divider-ornament: A decorative flex container using pseudo-elements with gradients.glass: Implements a translucent background withbackdrop-filter: blur(10px).
Sources: src/index.css:1-105
Dynamic Theming System
The ThemeContext manages the visual identity of the application. It provides predefined presets and allows for granular overrides.
Preset Themes
The system includes several built-in themes that define a cohesive look and feel.
| Preset Key | Name | Primary Color | Secondary Color |
|---|---|---|---|
classic | Clásico Dorado | #D4AF37 | #FFF8E7 |
romantic | Rosa Romántico | #E91E63 | #FFF0F5 |
elegant | Negro Elegante | #000000 | #F5F5F5 |
nature | Verde Natural | #2E7D32 | #F1F8E9 |
Sources: src/context/ThemeContext.jsx:7-111
Variable Injection Logic
When the theme state changes, the ThemeProvider executes a useEffect hook to update the --color-*, --font-*, and --border-radius variables on document.documentElement.
// Example of property injection
root.style.setProperty('--color-primary', theme.primary);
root.style.setProperty('--font-heading', theme.fontHeading);
root.style.setProperty('--border-radius', radiusOption?.css || '1rem');
Sources: src/context/ThemeContext.jsx:181-205
Visual Elements and Animations
The system includes a custom animation engine configured through Tailwind's extend property, allowing for smooth, wedding-appropriate transitions.
Keyframe Definitions
Custom animations defined in the system include:
fadeIn: Simple opacity transition from 0 to 1.slideUp: Combines opacity with a vertical translation of 30px.float: A 3-second infinite loop that translates elements 10px vertically.pulse-slow: A gentle scaling effect for emphasis.
Sources: tailwind.config.js:45-68
Style Customization Options
The ThemeEditor component allows users to toggle between different intensities and shapes:
- Border Radius: Options ranging from
none(0) topill(9999px). - Animation Intensity: Maps to duration variables (e.g.,
subtle: 300ms,normal: 500ms,dynamic: 800ms). - Typography: Dynamic loading of Google Fonts via the
ThemeProvider's side effect, which appends<link>tags to the document head.
Sources: src/components/admin/ThemeEditor.jsx:260-318, src/context/ThemeContext.jsx:213-225
Dependencies
The styling system relies on the following packages as defined in package.json:
tailwindcss: The core CSS framework.autoprefixer: PostCSS plugin for cross-browser compatibility.framer-motion: Used for component-level animations (e.g., inThemeEditorcards).lucide-react: The icon library used throughout the UI.
Sources: package.json:14-25
Conclusion
The Boda Cris Styling System is a sophisticated implementation of Tailwind CSS that prioritizes end-user customization. By decoupling theme values into CSS variables and managing them through React context, the project achieves a "Live Editor" experience where visual changes are immediate and persistent across sessions.