Tailwind & SCSS

Gravity comes with two styling options included for you:

1. Tailwind

2. SCSS modules

By default, the components use Tailwind but you can use the SCSS version simply by changing the import statement in the component.

import Style from './card.tailwind.js'
import Style from './card.module.scss'

Using Tailwind

Import the output.css file into app/app.js

import '../css/output.css'

Using SCSS

Disable the import line above and enable the two SCSS imports in components/view/view

import './scss/normalize.scss';
import './scss/view.scss';

Using Custom Styles

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

Live Reloading

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

Colors

Gravity includes a full-colour palette from the Tailwind library. 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 supported for both Tailwind and SCSS. It 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

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.