Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Web Components
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Web Components

Components Customization

Using Twilight, it's easy to change how the user interfaces (UI) of the JS Web Components look. This is to enable better user interface consistency throughout the theme and to prevent data from being hard-coded. The user interface can be customized in a variety of ways, including changing the colors, fonts, layouts, and sizes of its components.
In this article, we'll explore how the components' UI customization works, Tailwind installation and configuration, as well as the different ways to modify the look-and-feel of the JS Web Components.

📙 What you'll learn#

How it works
Tailwind Installation and Confiuragtion
Components UI customization

How it works#

Twilight Web Components are based on the basis and configuration of the Tailwind CSS Framework. This ensures that all web components are easily customizable and that all output CSS styles comply with Tailwind's configuration.
In order to make a general customization of the theme's overall look-and-feel, the file tailwind.config.js can be modified. The following is the default source code for this file, from which we can see how to change the values related to the theme's colors, font, and more.
Note
More information about this configuration file can be found here.

Custom CSS framework#

Twilight Web Components use the same CSS Variables that have already been introduced. That means the developer also has the flexibility to use self-developed CSS styles away from the Tailwind CSS Styles.
The core idea here is that each component has its own CSS class, which allows the developer to implement the style as he wishes. For example, the JS Web Component Button comes with the following CSS class:
In the above example, developers can add customizable styles to change, for example, the button's link and icon. In the coming articles of this documentation, we will explore how the UI for each JS Web Component can be modified using its .scss file.
Previous
Usage
Next
Elements