Usage

Twilight Web Components makes it easy to implement and use them across any framework or no framework at all. This is accomplished by utilizing web platform APIs and Web Components that are standardized for smooth use.

Note

It's worth noting that the Tailwind CSS Framework is the default foundation for the Twilight web components.There is a possibility that future plans may include other CSS frameworks.

Installation

To use the components, developers need to load a CSS file and some JavaScript. The CSS file includes the fonts and design tokens.

Twilight Themes

When using Twilight web components within Twilight themes, there's no need to include them in your bundle or HTML. The Twilight theme engine will automatically inject the latest version of the Twilight web components into the page.

Bundler/ES modules

You need Node.js and Tailwind CSS installed, then install the components by performing one of the following commands:

NPM Installation Command

Yarn Installation Command

npm install @salla.sa/twilight-components --save

In your javascript codebase, you can import the components as follows:

Import Command

HTML/CDN

The following code imports and applies polyfills for older browsers, then registers the Twilight Web Components with the window object, enabling their use in the webpage.

Tailwind Config

Tailwind CSS Framework is the default foundation for the Twilight web components. There is a possibility that future plans may include other CSS frameworks.

Now you can adding twilight tainwind theme to your tailwind.config.js file:

Tailwind added a just-in-time compiler, which generates styles as the developer writes the theme rather than generating everything in advance at initial build time.

Since JIT mode generates your CSS on-demand by scanning your template files, it’s crucial that you configure the content option in your tailwind.config.js file with all of your template paths, otherwise your CSS will be empty

Note

As mentioned previously . The file tailwind.config.js is already bundled with the Twilight starter theme files. However, you may use any other CSS framework.

After installation, Components can be easily added in the basic HTML markup, as shown in the following example:

Note

For further usage examples, browse the subsequent component's page.

CSS Variables

Colors and fonts are the predominant features of the theme, which can be set by assigning the CSS styles. Twilight Web Components use the CSS Variables that have already been introduced. Accordingly, the developer can use the following CSS styles to assign them to the theme's colors and fonts.

Information

More details on this can be found here.

Events

We recommend using DOM events, but we also provide custom events to help with specific event kinds. All custom events are always documented on their own documentation page for each component.

Moreover, developers can detect when a component has been loaded, as Twilight registers its components using the standard Web Components API's CustomElementsRegistry object. This object also provides a whenDefined function, which takes a component name and returns a promise. When the component is defined, the promise will be fulfilled:

Usage

Installation#

Twilight Themes#

Bundler/ES modules#

Tailwind Config#

Usage#

CSS Variables#

Events#

Installation

Twilight Themes

Bundler/ES modules

Tailwind Config

Usage

CSS Variables

Events