Coming soon: New Tailwind-based UI components

Tailwind has become a popular CSS framework recently, and there have been many UI kits and component packs built on top of it. Most of these libraries require React or another JavaScript framework, and we wanted something that would be easy to use with DotVVM.

That's why we are planning to introduce a new commercial product - Tailwind UI for DotVVM. At the beginning, we want to focus on the line of business applications - admin dashboards, pages with GridView or complex forms, multi-step wizards, or similar. But we've already been thinking about making something that would help with public-facing areas of the web applications. Stay tuned for more.

How it will work

The Tailwind UI for DotVVM will come with a built-in theme that can be modified using CSS variables. We are currently using an internal version of this library in one of our projects at RIGANTI, and adapting all the controls to the RIGANTI branding required only a few lines of code.

The selection of components will be similar to Bootstrap for DotVVM - you'll get styled HTML form elements, buttons, alerts, badges, cards, icons, tables, lists, and so on. There will be a few interactive components, such as TabControl, ModalDialog, Notifications (for displaying toast notifications), or TopMenu and SideMenu (with responsive behavior for mobile screens).

Many applications need more sophisticated controls you know from DotVVM Business Pack, such as interactive pickers (date/time pickers, AutoComplete, ComboBox, etc.) or a more powerful GridView. Instead of reimplementing this functionality in Tailwind UI for DotVVM, we'll add a new theme to the Business Pack to ensure a consistent look & feel.

We also want to add a new project template that would pre-configure Tailwind to be used in DotVVM applications. By default, Tailwind looks in HTML pages and extracts all CSS classes used to produce a bundled CSS file with nothing more than is actually needed. We'll provide a pre-configured tailwind.config.js that tells Tailwind to also scan .dohtml, .dotcontrol, and .dotmaster files, and recognize DotVVM's conditional CSS classes (class-someclassname={value: SomeValue}). Everything will be added on top of the library's built-in CSS styles.

Stay tuned

We'll be publishing a preview version of Tailwind UI for DotVVM soon, and we are looking forward to your feedback.