Styling

Styling should be done with no-code as a starting point. Meaning that the best blocks are developed with a non-developer using them in the end.

By default, all styling within Instant is scoped. Meaning any CSS rules are compiled behind-the-scenes to only apply to HTML rendered from that same component. The CSS that you write inside of an Instant block is automatically encapsulated inside of that component.

Importing CSS

The fastest way of styling elements inside your block is to use a seperate stylesheet. You can import any stylesheet using React's import feature:

import React, { Component } from 'react';
import './styles.css';

TailwindCSS

Another option is using Tailwind for styling blocks. For example, if you want to add a background color of #eee to a div element, you can do it like this:

<div className="bg-gray-200">
  ...
</div>

To learn more about using Tailwind, use our guide under Integrations / TailwindCSS.