Overview
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build application layouts. The Progress Design System seamlessly integrates with Tailwind CSS, enabling you to use Kendo UI Theme design tokens within Tailwind CSS classes.
Integration Approaches
You can integrate the KendoReact components with Tailwind CSS in two primary ways:
Themed Components with Tailwind CSS
Use Kendo UI theme variables as Tailwind CSS classes to use Progress Design System tokens directly in your utility classes for layout and custom styling.
Unstyled Components with Tailwind CSS
Use completely unstyled components and apply all styling through Tailwind CSS classes for full control over the appearance and layout, leveraging Tailwind utilities to style KendoReact components from scratch.
Sample Applications and Demos
Explore the following sample applications and demos to see how Tailwind CSS can be integrated with KendoReact components:
- Project Tracker Sample Application
- Free Project Tracker Page Template
- Integrating Tailwind with KendoReact
- Unstyled + Tailwind CSS v4
- Unstyled + Tailwind CSS v3
Key Benefits
- Design System Consistency: Access to Progress Design System tokens through Tailwind CSS classes.
- Flexible Styling: Combine the power of Tailwind CSS utilities with Kendo UI components.
- Developer Experience: Maintain familiar Tailwind CSS workflow while using KendoReact components.