Styling

Openexus supports two styling options when working in JavaScript/TypeScript: Tailwind and imported CSS/SCSS/SASS/LESS.

Tailwind Styling

Tailwind is supported out of the box. Most Tailwind classes are supported and enabled on all frameworks.

For more information on tailwind, please visit: https://tailwindcss.com/

Tailwind Example

<div class='p-4 bg-blue-200'>Hello World!</div>

Imported CSS Styling

CSS files can also be imported in the Node file structure. In addition to supporting CSS, Openexus also support SCSS, SASS, and LESS formatting.

CSS

 

src/styles.css

button {
  font: 100% Helvetica, sans-serif;
  background: #ff9900;
}

src/main.js

import "./styles.css";

function render(element) {
  const node = document.createElement('button');
  node.innerHTML = 'Click me!';
  element.appendChild(node);
}

context.set('view', render);

SCSS

 

src/styles.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #ff9900;

button {
  font: 100% $font-stack;
  background: $primary-color;
}

src/main.js

import "./styles.scss";

function render(element) {
  const node = document.createElement('button');
  node.innerHTML = 'Click me!';
  element.appendChild(node);
}

context.set('view', render);

SASS

 

src/styles.sass

$font-stack: Helvetica, sans-serif
$primary-color: #ff9900

button
  font: 100% $font-stack
  background: $primary-color

src/main.js

import "./styles.sass";

function render(element) {
  const node = document.createElement('button');
  node.innerHTML = 'Click me!';
  element.appendChild(node);
}

context.set('view', render);

LESS

 

src/styles.less

@font-stack: Helvetica, sans-serif;
@primary-color: #ff9900;

button {
  font: 100% @font-stack;
  background: @primary-color;
}

src/main.js

import "./styles.less";

function render(element) {
  const node = document.createElement('button');
  node.innerHTML = 'Click me!';
  element.appendChild(node);
}

context.set('view', render);