Manage your styles

TL;DR / Overview

Design consistency across pages matters. Instead of manually editing styles page-by-page, Nilead lets you define reusable styles — for typography, spacing, colors, and more — that can be applied across multiple layouts. Update once, apply everywhere.

Prerequisites

• Admin access to your Nilead website

• A published layout using the Visual Editor

• Basic understanding of design properties (e.g., colors, fonts)

• Optional: Familiarity with HTML and TailwindCSS (for advanced customization)

Walkthrough

Why Styles Matter

If your website has more than a few pages, making manual style updates (e.g. brand color changes or seasonal themes) is inefficient and error-prone.

With Nilead Styles, you can:

• Define shared design rules

• Apply the same style to multiple layouts

• Update all related layouts by changing one style

Example use cases:

• Switching from green to red for a holiday campaign

• Updating your brand’s font or spacing site-wide

• Supporting multi-language sites with different font families

How to Access Styles

To manage styles:

1. Open the Quick Menu in your admin dashboard.

2. Type and select Styles.

3. Choose an existing style or create a new one.

Changes to a style automatically affect all layouts that use it once rebuilt.

How Styling Works Behind the Scenes

Nilead uses TailwindCSS — a utility-first CSS framework — to style everything.

• The Just-In-Time (JIT) compiler builds styles as you edit visually.

• When publishing, your layout is processed to generate optimized static CSS.

• Dynamic content with unknown classes may be excluded unless “whitelisted” using a hidden <div> or other technique.

Developers and designers should check Tailwind’s docs to unlock full power. End-users don’t need to know any Tailwind to use the Visual Editor.

Style Configuration Options

1. Breakpoints (Screens)

Control which screen sizes you want to support in your layout:

• Tailwind's screens configuration lets you define responsive breakpoints.

• Only enable the ones you plan to design for.

• This minimizes unnecessary code and improves performance.

Tip: Always use pixel (px) units for consistency.

2. Color Swatches

Avoid naming colors literally (e.g., red, blue).

• Use generic labels like primary, accent, or color-1.

• This way, changing your brand from blue to green won’t require renaming every class — only the values behind them.

Good: primary: #1E40AF
Bad: blue: #1E40AF (you’ll regret this when your palette changes)

3. Typography

Define global text styles:

• Font families (with localization support)

• Font sizes

• Line heights, tracking, etc.

Use labels like heading, paragraph, or body — not specific font names. You can override these for different languages.

4. Default Properties

Predefine commonly used values for:

• Margins / paddings

• Widths / heights

• Rounded corners, shadows, and more

This keeps your design consistent and saves editing time. You can override or skip these if using Tailwind’s default.

5. Selector Styling (Advanced)

Nilead supports the @apply feature of TailwindCSS:

.btn-primary { @apply bg-primary text-white px-4 py-2 rounded; }

You can target any CSS selector or element using this method.

Ideal for advanced users looking to bundle styles into reusable classes.

Rebuilding Your Styles

After editing a style:

1. Click Build to apply changes.

2. The system will regenerate the style sheet for all associated layouts.

3. This may take several minutes depending on how many layouts use the style.

You’ll see a notification once the rebuild completes.

FAQs

1. What happens if I change a style used on multiple layouts?
All associated layouts will reflect the change after the style is rebuilt.

2. Can I preview a style before applying it?
Yes, you can duplicate an existing style and apply it to a test layout first.

3. What if Tailwind removes my dynamic classes?
Use a hidden div in your layout’s custom code area to whitelist necessary classes until a future update provides a better interface.

4. Do I need to learn TailwindCSS?
No. The Visual Editor covers most needs. But developers building custom components or themes will benefit from reading Tailwind docs.

5. Can I switch styles for seasonal campaigns?
Absolutely. Create separate styles (e.g., Default, Christmas, Black Friday) and apply them as needed to different layouts.