Using Tailwind with our Components

Nova components are built as web components, prefixed with nv-, and are fully compatible with Tailwind CSS. This page explains how to style these components using Tailwind utilities and how to apply styles through CSS using @apply.

Passing Utility Classes to Components

Most components accept Tailwind utility classes via standard HTML attributes like class.

Example: Button with Custom Width and Margin


                                                        
                                                        
                                                            <nv-button class="w-full mt-4">Submit</nv-button>

This applies full width and top margin using Tailwind utilities. You can use this approach to control layout, spacing, and alignment around the component.

Use this for layout and container-level styling.

Avoid Overriding Internals

Our components are styled using the design system’s tokens and are intended to work out of the box, including support for dark mode. Avoid overriding internal styles unless necessary.

If you need to make visual changes, prefer to:

Use semantic utility classes (e.g., bg-level-00, text-low)

Use tokens for consistency

Avoid raw values (#colors, fixed px, etc.)

Using @apply in Custom Stylesheets

In some situations, you may prefer writing CSS while still using Tailwind utilities. The @apply directive lets you do this.

This is useful when
- You want to style pseudo-elements or states
- You want to reuse a consistent set of utilities
- You don’t want to bloat your markup

Example: Custom Class for Form Control Wrapper


                                                        
                                                        
                                                            /* styles.css */
                                                        .form-wrapper {
                                                          @apply p-4 bg-level-10 rounded-md shadow-sm;
                                                        }

css


                                                        
                                                        
                                                            <div class="form-wrapper">
                                                          <nv-fieldtext type="email" label="Email" placeholder="Enter your email"></nv-fieldtext>
                                                        </div>

webcomponent

This approach lets you keep your markup clean while using Tailwind utilities in a scoped, maintainable way.

Component-Specific Styling Considerations

When using Nova components, keep in mind:

Buttons (nv-button): Use layout utilities (e.g., w-full, mt-4) on the component directly.

Inputs (nv-fieldtext, nv-fieldtextarea, etc.): Wrap in a container and apply layout or spacing there.

Modals/Dialogs (nv-dialog): These are already styled internally; use utilities on wrapper elements if needed.

Layout Containers: Use Tailwind’s flex, grid, gap-*, p-*, and m-* utilities to create structure around components.

Best Practices

✅ Use utility classes for layout and spacing

✅ Use @apply for reusable style blocks

✅ Stick to Nova’s semantic tokens

❌ Avoid raw or arbitrary values

❌ Avoid copying Figma CSS directly