Tailwind & SCSS

The default styling in Gravity is Tailwind, but you can add your own custom styling with SCSS if you prefer.

Using SCSS

Every component supports a custom className prop, so you can create your own SCSS module and pass the styling to the component

import { Button } from 'components/lib';
import Style from './dashboard.module.scss';

export function Dashboard(){

  return (
    <div>
      <Button className={ Style.button }
    </div>
  );
}

Using Custom Tailwind Styles

You can feed a custom style to any component by passing it in the className prop as per the above example.

Live Reloading

Live reloading is automatically configured. The start script will watch for changes while the build script adds the output CSS file to your static build folder.

Colors

There is also a brand colour configured inside the tailwind.config.js file that you can modify with your brand colours.

Dark Mode

Dark mode is included and can be toggled on or off in the user dropdown nav on the top right corner (click the avatar to open it).

The setting is stored in both the authContext on the client and in the user table of the database so it will persist across user sessions.

Further Help

The Tailwind Fold plugin for VSCode is great for tidying up your code and only showing the tailwind classes when in focus.

If you're new to Tailwind and need more help, the Tailwind documentation provides a comprehensive guide to the principles along with a full reference guide to each utility class helper.