Webframe UI Styles

The built-in Webframe UI styles use Tailwind CSS in combination with Webframe CSS.

Similarity with Tailwind CSS

• CSS variables - styling UI with only variables allows you to dynamically adjust the Look & Feel according to the selected theme.
• Style composition - Webframe has been fine-tuning the utility-first CSS since 2015. It's similar to Tailwind, but with some differences inspired by Semantic UI (opens in a new tab).

Unique to Webframe Styles

• Preview Intellisense - Webframe Intellisense automatically generates preview for all CSS classes in your project.
• Intuitive class names that match your intentions. For example, to align content to the middle and center it, add middle center class name.
• Semantic color variables with human-friendly naming conventions for a delightful DUX (Developer User Experience)
• Support for many UI themes, besides the default Light and Dark modes. Glass effect is another slick choice, to name a few.
• Switch between themes with ease. For example, just add class name dark and the UI should look great automagically, without manual color fixes like Tailwind CSS.

Custom UI Theme

The easiest way to create your own theme is to modify existing CSS variables under your new theme's namespace.

For example, here is how you can create a new UI theme called Dracula:

.dracula {
  --primary: hsl(250, 66%, 60%);
  --secondary: hsl(327, 80%, 61%);
  --accent: hsl(200, 100%, 43%);
  /* ...more variables */
}

For 100% bespoke UI/UX, create CSS styles for all headless UI components that you use in the app, then import your compiled CSS file, instead of Webframe's built-in CSS.

All CSS classes in your file will be available as Class Name option for styling in Webframe Editor.

The Webframe Compiler will also create CSS preview for all classes, and prune them during production bundling using Tailwind CLI.